前言

在上一篇項(xiàng)目搭建文章中，我們已經(jīng)下載安裝了node環(huán)境以及vue-cli，并且已經(jīng)成功構(gòu)建了一個(gè)vue-cli項(xiàng)目，那么接下來(lái)，我們來(lái)梳理一下vue-cli項(xiàng)目的結(jié)構(gòu)。

總體框架

一個(gè)vue-cli的項(xiàng)目結(jié)構(gòu)如下，其中src文件夾是需要掌握的，所以本文也重點(diǎn)講解其中的文件，至于其他相關(guān)文件，了解一下即可。

文件結(jié)構(gòu)細(xì)分

1.build——[webpack配置]

build文件主要是webpack的配置，主要啟動(dòng)文件是dev-server.js，當(dāng)我們輸入npm run dev首先啟動(dòng)的就是dev-server.js，它會(huì)去檢查node及npm版本，加載配置文件，啟動(dòng)服務(wù)。

2.config——[vue項(xiàng)目配置]

config文件主要是項(xiàng)目相關(guān)配置，我們常用的就是當(dāng)端口沖突時(shí)配置監(jiān)聽(tīng)端口，打包輸出路徑及命名等

3.node_modules——[依賴包]

node_modules里面是項(xiàng)目依賴包，其中包括很多基礎(chǔ)依賴，自己也可以根據(jù)需要安裝其他依賴。安裝方法為打開(kāi)cmd，進(jìn)入項(xiàng)目目錄，輸入npm install [依賴包名稱],回車。

在兩種情況下我們會(huì)自己去安裝依賴：

（1）項(xiàng)目運(yùn)行缺少該依賴包：例如項(xiàng)目加載外部css會(huì)用到的css-loader，路由跳轉(zhuǎn)vue-loader等（安裝方法示例：npm install css-loader）

（2）安裝插件：如vux（基于WEUI的移動(dòng)端組件庫(kù)），vue-swiper（輪播插件）

注：有時(shí)會(huì)安裝指定依賴版本，需在依賴包名稱后加上版本號(hào)信息，如安裝11.1.4版本的vue-loader，輸入npm install vue-loader@11.1.4

4.src——[項(xiàng)目核心文件]

項(xiàng)目核心文件前面已經(jīng)進(jìn)行了簡(jiǎn)單的說(shuō)明，接下來(lái)重點(diǎn)講解main.js，App.vue,及router的index.js

4.1 index.html——[主頁(yè)]

index.html如其他html一樣，但一般只定義一個(gè)空的根節(jié)點(diǎn)，在main.js里面定義的實(shí)例將掛載在根節(jié)點(diǎn)下，內(nèi)容都通過(guò)vue組件來(lái)填充

index.html

4.2 App.vue——[根組件]

一個(gè)vue頁(yè)面通常由三部分組成:模板(template)、js(script)、樣式(style)

App.vue

【template】

其中模板只能包含一個(gè)父節(jié)點(diǎn)，也就是說(shuō)頂層的div只能有一個(gè)（例如下圖，父節(jié)點(diǎn)為#app的div，其沒(méi)有兄弟節(jié)點(diǎn)）

<router-view></router-view>是子路由視圖，后面的路由頁(yè)面都顯示在此處

打一個(gè)比喻吧,<router-view>類似于一個(gè)插槽，跳轉(zhuǎn)某個(gè)路由時(shí)，該路由下的頁(yè)面就插在這個(gè)插槽中渲染顯示

【script】

vue通常用es6來(lái)寫(xiě)，用export default導(dǎo)出，其下面可以包含數(shù)據(jù)data，生命周期(mounted等)，方法(methods)等，具體語(yǔ)法請(qǐng)看vue.js文檔，在后面我也會(huì)通過(guò)例子來(lái)說(shuō)明。

【style】

樣式通過(guò)style標(biāo)簽<style></style>包裹，默認(rèn)是影響全局的，如需定義作用域只在該組件下起作用，需在標(biāo)簽上加scoped，<style scoped></style>

如要引入外部css文件，首先需給項(xiàng)目安裝css-loader依賴包，打開(kāi)cmd，進(jìn)入項(xiàng)目目錄，輸入npm install css-loader,回車。安裝完成后，就可以在style標(biāo)簽下import所需的css文件，例如：

<style>

  import './assets/css/public.css'

</style>

這樣，我們就可以把style下的樣式封裝起來(lái)，寫(xiě)到css文件夾，再引入到頁(yè)面使用，整個(gè)vue頁(yè)面也看上去更簡(jiǎn)潔。

4.3 main.js——[入口文件]

main.js主要是引入vue框架，根組件及路由設(shè)置，并且定義vue實(shí)例，下圖中的

components:{App}就是引入的根組件App.vue

后期還可以引入插件，當(dāng)然首先得安裝插件。

main.js

4.4 router——[路由配置]

router文件夾下，有一個(gè)index.js，即為路由配置文件

router下的index.js

這里定義了路徑為'/'的路由，該路由對(duì)應(yīng)的頁(yè)面是Hello組件，所以當(dāng)我們?cè)跒g覽器url訪問(wèn)http://localhost:8080/#/時(shí)就渲染的Hello組件

類似的，我們可以設(shè)置多個(gè)路由，‘/index','/list'之類的，當(dāng)然首先得引入該組件，再為該組件設(shè)置路由。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論