目錄

?一.前端項(xiàng)目結(jié)構(gòu)

二.在HBuilder X中搭建vue-cli項(xiàng)目

1. 安裝node.js前端環(huán)境

2. HBuilder X創(chuàng)建一個(gè)vue-cli項(xiàng)目?

3. vue-cli項(xiàng)目結(jié)構(gòu)

4. 如何運(yùn)行前端項(xiàng)目

5. 創(chuàng)建組件

6. 組件路由(頁面跳轉(zhuǎn))

6.1 創(chuàng)建router目錄

6.2 使用路由

6.3 在main.js中配置路由

6.4 路由嵌套

三. 解決npm下載依賴很慢

四. Vue-cli項(xiàng)目中導(dǎo)入ElementUI框架?

1. 使用命令下載ElementUI依賴

2. 在main.js文件中導(dǎo)入ElementUI

3. 測試是否配置成功

---

?一.前端項(xiàng)目結(jié)構(gòu)

傳統(tǒng)的前端項(xiàng)目結(jié)構(gòu):一個(gè)項(xiàng)目中有很多HTML文件,一個(gè)HTML文件表示一個(gè)網(wǎng)頁,他們之間彼此獨(dú)立,互相沒有聯(lián)系,我們每次導(dǎo)入其它前端文件時(shí),需要給每一個(gè)HTML文件都導(dǎo)入,需要導(dǎo)入的文件一旦過多,就會(huì)很麻煩,并且整體看來很亂

現(xiàn)代的前端項(xiàng)目結(jié)構(gòu):在一個(gè)node環(huán)境中構(gòu)建項(xiàng)目(類似于后端的maven),前端改為單頁面結(jié)構(gòu),只有一個(gè)HTML文件,所有的配置都是基于這一個(gè)HTML文件進(jìn)行配置,只需要配置一次即可.但是可以有很多的.vue文件,這些不再是一個(gè)網(wǎng)頁,而是被稱為一個(gè)組件,需要顯示不同的內(nèi)容時(shí),只需要切換組件即可

二.在HBuilder X中搭建vue-cli項(xiàng)目

1. 安裝node.js前端環(huán)境

node.js是一個(gè)前端運(yùn)行的環(huán)境,可以為前端開發(fā)提供服務(wù)

下載地址:

https://nodejs.org/en/download

這里注意不勾選,其他的無腦下一步即可,盡量安裝到?jīng)]有中文的路徑中,之后打開命令提示符,進(jìn)行測試,如下,即完成安裝

2. HBuilder X創(chuàng)建一個(gè)vue-cli項(xiàng)目?

注意:因?yàn)閷W(xué)的是vue2,所以選擇3.6.10版本,第一次創(chuàng)建可能比較慢,要下載很多的依賴,創(chuàng)建完成后,會(huì)顯示創(chuàng)建成功

3. vue-cli項(xiàng)目結(jié)構(gòu)

4. 如何運(yùn)行前端項(xiàng)目

補(bǔ)充(如何下載項(xiàng)目中依賴的組件):我們一般在網(wǎng)上下載的前端項(xiàng)目是沒有node_modules文件夾的,因?yàn)檫@里面包含的是項(xiàng)目所依賴的外部組件文件,并且該文件夾占用的空間較大,我們可以通過node.js中的命令(類似于maven中的pom.xml文件)來從遠(yuǎn)程倉庫中自己下載,所以不需要?jiǎng)e人打包發(fā)過來,這樣既省空間,又節(jié)約時(shí)間,該命令是npm install可以下載安裝外部依賴組件

項(xiàng)目運(yùn)行:我們可以打開HBuilder X的終端,輸入命令npm run serve

終止項(xiàng)目:ctrl+c

打包項(xiàng)目: npm run build

5. 創(chuàng)建組件

在vue-cli項(xiàng)目的src文件夾下創(chuàng)建一個(gè).vue文件,這里面可以用來寫組件(網(wǎng)頁)的相關(guān)內(nèi)容

<!--該標(biāo)簽用于寫HTML代碼,必須有一個(gè)根標(biāo)簽,如下<div>是根標(biāo)簽-->
<template> <div>登錄</div>
</template><!--該標(biāo)簽用于寫js代碼,下面是固定格式return里寫數(shù)據(jù),methods里寫函數(shù)-->
<script>export defaults{data(){return{}},methods:{}}
</script><!--該標(biāo)簽用于寫css和之前一樣-->
<style></style>

當(dāng)我們項(xiàng)目中的組件太多時(shí),建議創(chuàng)建一個(gè)名為views的文件夾專門用來管理我們的組件

?

6. 組件路由(頁面跳轉(zhuǎn))

6.1 創(chuàng)建router目錄

在src文件夾下創(chuàng)建router文件夾,并在router文件夾里創(chuàng)建一個(gè)index.js文件,在index.js文件中配置路由

配置路由主要是把自己定義的.vue文件(即組件)導(dǎo)入到index.js文件中,并為每個(gè)組件配置一個(gè)訪問地址

1.導(dǎo)入vue

import Vue from 'vue';

2.刪除package-lock文件?

npm config set package-lock false

使用這個(gè)命令以后生成的vue-cli項(xiàng)目中就不會(huì)有package-lock這個(gè)文件,記得還要?jiǎng)h除當(dāng)前項(xiàng)目中的package-lock這個(gè)文件,?因?yàn)檫@個(gè)文件中有一些其他版本號的文件,有可能會(huì)導(dǎo)致版本不支持等問題,所以建議刪除

3.下載vue-router

由于要對組件進(jìn)行頁面跳轉(zhuǎn)就要導(dǎo)入vue-router,但我們沒有vue-router這個(gè)組件所以要先下載,通過下面語句在終端中執(zhí)行可以下載vue-router

npm i vue-router@3.5.3

下載成功后在package.json文件中會(huì)有新的依賴版本號導(dǎo)入

4.導(dǎo)入路由

 import router from 'vue-router'; /* 導(dǎo)入路由 */

5.導(dǎo)入其他組件

<!--login是你創(chuàng)建組件的組件名,也就是.vue文件的文件名,創(chuàng)建了幾個(gè)就導(dǎo)入幾個(gè)-->
<!--
'../views/login'是.vue文件的路徑,兩個(gè)點(diǎn)表示的是回退到上級目錄
因?yàn)?js文件在router文件中,而我們要導(dǎo)入的組件(.vue文件)和router在一級
所以要回退到.router目錄中
-->
import login from '../views/login'; /* 導(dǎo)入其他組件 */

注意:

(1)login是你創(chuàng)建組件的組件名,也就是.vue文件的文件名,創(chuàng)建了幾個(gè)就導(dǎo)入幾個(gè)

(2)'../views/login'是.vue文件的路徑,兩個(gè)點(diǎn)表示的是回退到上級目錄因?yàn)?js文件在router文件中,而我們要導(dǎo)入的組件(.vue文件)和router在一級,所以要回退到.router目錄中

?6.注冊,定義組件訪問地址

/*  注冊  定義組件訪問地址  */Vue.use(router);

7.為組件路由定義地址

/* 定義組件路由 */var rout = new router({routes: [{path: '/index',component: Index},{path: '/login',component: Login},{path: '/reg',component: Reg}]
});

?注意:

(1)path:為組件路由定義訪問地址,這個(gè)地址以/開始,名字可以任意取,建議和.vue文件(組件)名相同,但是是以小寫字母開頭

(2)component:這個(gè)是和你.vue文件(組件)的名字完全一致,大小寫也一致

8. 導(dǎo)出路由對象

export default rout;

?default后面的名字和你上一步為組件路由定義訪問地址時(shí)new router對象的名字一致

以上所有步驟做完后,index.js文件中應(yīng)該是這樣

6.2 使用路由

在你要訪問的第一個(gè)頁面中為內(nèi)容添加跳轉(zhuǎn)鏈接

<div>首頁<router-link to="/login">登錄</router-link><router-link to="/reg">注冊</router-link>
</div>

6.3 在main.js中配置路由

在main.js中將剛才配置好的index.js文件導(dǎo)入進(jìn)去,并將,router對象綁定到全局唯一的vue對象中

<!--路徑中一個(gè)點(diǎn)表示同級目錄下-->
import router from './router/index.js'Vue.use(router);new Vue({el: '#app',router,render: h => h(App)})

?最后在終端使用npm run serve啟動(dòng)項(xiàng)目,如果出現(xiàn)訪問地址則表示配置成功

6.4 路由嵌套

當(dāng)我們想在一個(gè)組件中顯示另外的組件,就要用到路由嵌套

{path: '/main',component: Main, //路由嵌套 在main下面的嵌套子路由children:[{path:"/admin",component:Admin}]
}

就是定義一個(gè)children屬性在你想要嵌套的主路由中,并在children屬性中對子路由的地址進(jìn)行配置?

?

三. 解決npm下載依賴很慢

我自己在用 npm下載外部依賴時(shí),總是會(huì)一直卡住,這是因?yàn)閚pm默認(rèn)的下載路徑是國外的,這就導(dǎo)致我們在下載依賴時(shí)會(huì)從國外的倉庫中下載,導(dǎo)致速度很慢,甚至卡住不動(dòng),這時(shí)我們就需要跟換nom的下載源,切換至淘寶鏡像

1.設(shè)置最新的淘寶鏡像

npm config set registry https://registry.npmmirror.com/

2.檢查是否配置成功

npm config get registry

?如果顯示以下信息,表示配置成功

四. Vue-cli項(xiàng)目中導(dǎo)入ElementUI框架?

1. 使用命令下載ElementUI依賴

npm i element-ui -S

當(dāng)發(fā)現(xiàn)package.json文件中出現(xiàn)ElementUI版本信息時(shí)表示導(dǎo)入成功

2. 在main.js文件中導(dǎo)入ElementUI

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

將上述代碼導(dǎo)入到main.js文件中

3. 測試是否配置成功

在官網(wǎng)找一個(gè)組件導(dǎo)入你創(chuàng)建的.vue文件(組件)中的<template></template>標(biāo)簽中,測試效果

運(yùn)行項(xiàng)目,看瀏覽器效果,表示配置成功