前言: 上篇文章Vue項目結構晰房，我們已經下載安裝了node環(huán)境以及vue-cli炮姨，并且已經成功構建了一個vue-cli項目楚昭，so接下來冈涧，我們來梳理一下vue-cli項目的結構茂附。
一蝌以、總體框架
一個vue-cli的項目結構如下，其中src文件夾是需要掌握的何之，所以本文也重點講解其中的文件跟畅，至于其他相關文件，了解一下即可溶推。
二、vue-cli項目總體結構
接下面選一些模塊來講一下
1蒜危、build——[webpack配置]
build文件主要是webpack的配置虱痕。
2、config——[vue項目配置]
config文件主要是項目相關配置辐赞，我們常用的就是當端口沖突時配置監(jiān)聽端口部翘，打包輸出路徑及命名等
webpack運行時默認是本地是9528端口，你也可以修改config/index來改變運行的端口响委。
3新思、node_modules——[依賴包]
node_modules里面是項目依賴包，其中包括很多基礎依賴赘风，自己也可以根據需要安裝其他依賴夹囚。安裝方法為打開cmd源譬，進入項目目錄深寥，輸入npm install [依賴包名稱],回車灰伟。
在兩種情況下我們會自己去安裝依賴：
（1）項目運行缺少該依賴包：例如項目加載外部css會用到的css-loader筐高，路由跳轉vue-loader等（安裝方法示例：npm install css-loader）
（2）安裝插件：如vux（基于WEUI的移動端組件庫），vue-swiper（輪播插件）
注：有時會安裝指定依賴版本虱疏，需在依賴包名稱后加上版本號信息乌询，如安裝11.1.4版本的vue-loader背蟆，輸入npm install vue-loader@11.1.4
4肪虎、src——[項目核心文件]
項目核心文件前面已經進行了簡單的說明劣砍，接下來重點講解main.js，App.vue及router的index.js笋轨，平時前端開發(fā)的代碼編寫都在src目錄下秆剪。
4.1 index.html——[主頁]
index.html如其他html一樣赊淑，但一般只定義一個空的根節(jié)點爵政，在main.js里面定義的實例將掛載在根節(jié)點下，內容都通過vue組件來填充
4.2 App.vue——[根組件]
一個vue頁面通常由三部分組成:模板(template)陶缺、js(script)钾挟、樣式(style)
【template】
其中模板只能包含一個父節(jié)點，也就是說頂層的div只能有一個（例如下圖饱岸，父節(jié)點為#app的div掺出，其沒有兄弟節(jié)點）徽千，否則會爆錯。
<router-view></router-view>是子路由視圖汤锨，后面的路由頁面都顯示在此處
打一個比喻吧,<router-view>類似于一個插槽双抽，跳轉某個路由時，該路由下的頁面就插在這個插槽中渲染顯示
【script】
vue通常用es6來寫闲礼，用export default導出牍汹，其下面可以包含數(shù)據data，生命周期(mounted等)柬泽，方法(methods)等慎菲，具體語法請看vue.js文檔，在后面我也會通過例子來說明锨并。
【style】
樣式通過style標簽<style></style>包裹露该，默認是影響全局的，如需定義作用域只在該組件下起作用第煮，需在標簽上加scoped解幼，<style scoped></style>
如要引入外部css文件，首先需給項目安裝css-loader依賴包包警，打開cmd书幕，進入項目目錄，輸入npm install css-loader,回車揽趾。安裝完成后台汇，就可以在style標簽下import所需的css文件，例如：
<style>
? ? import './assets/css/public.css'
</style>
這樣篱瞎，我們就可以把style下的樣式封裝起來苟呐，寫到css文件夾，再引入到頁面使用俐筋，整個vue頁面也看上去更簡潔牵素。
4.3 main.js——[入口文件]
main.js主要是引入vue框架，根組件及路由設置澄者，并且定義vue實例笆呆，下圖中的
components:{App}就是引入的根組件App.vue。當然也可以在main.js全局引入第三方組件粱挡，如:element-ui
后期還可以引入插件赠幕，當然首先得安裝插件。
4.4 router——[路由配置]
router文件夾下询筏，有一個index.js榕堰，即為路由配置文件
這里定義了路徑為'/'的路由，該路由對應的頁面是Hello組件嫌套，所以當我們在瀏覽器url訪問http://localhost:8080/#/時就渲染的Hello組件
類似的逆屡，我們可以設置多個路由圾旨，‘/index’,'/list'之類的，當然首先得引入該組件魏蔗，再為該組件設置路由砍的。
到這里，你已經能運行vue項目莺治，并大概了解項目每個模塊挨约，如:src、node_modules产雹、static等是做什么的诫惭。那就OK了，至于蔓挖，如何寫組件夕土，如何寫路由等，后面慢慢講瘟判。
