Vue入坑——vue-cli（腳手架）代碼詳解

上一篇：vue-cli目錄結構認識

一塊兒學vue——vue學習總路線

——————————^~^我是萌萌噠分割線^~^————————————————

前言

上一篇簡單認識了腳手架的目錄結構，這篇咱們來繼續看看vue-cli裏面的咱們須要編寫的文件都是些什麼。

src文件夾

先來看一下src文件夾裏有些啥

一個個來看

（1）assets

是什麼：存放靜態文件的，裏面會放一些好比js，css，圖片之類的。

（2）components

前面學過語法應該知道這是什麼吧，若是不知道的話，仍是建議先去看看語法哦，磨刀不誤砍柴工嘛。

是什麼：存放組件的

這裏面的HelloWorld.vue

（a）、一個.vue文件由什麼組成：template（模板）、js（script）、style（樣式）

（b）、template：一個模板裏面只能有一個父節點，好比咱們這裏的class爲hello的父節點div，他沒有其餘的兄弟節點。

（c）、script：vue一般使用es6來寫這部分，而後使用export default導出，他裏面能夠寫好比data，mounted，methods等等。其中，data必定要用return來返回。

（d）、style：跟咱們寫樣式表同樣，都是使用<style></style>來包裹，不過，他這裏是默認影響全局的，也就是說回影響到包含他的全部頁面。這裏的使用的是局部的，語法是<style scoped></style>，scoped的意思就是隻做用於當前頁面，不影響其餘頁面。

（3）router

vue的路由是我下一步要學的，在這裏就簡單看一下他裏面有些啥。

是什麼：這裏展現的是router文件夾下的index.js，很明顯，是路由的配置文件。

（a）引入部分

（b）使用路由依賴

（c）配置路由

（4）App.vue

 

這個頁面結構和上面的helloworld.vue的頁面結構同樣，就不說了，只說一下里面的<router-view/>

這是用來展現路由頁面內容的。若是想跳轉的話就使用<router-link to='xxx'></router-link>

（5）、main.js

是什麼：是這個工程的入口文件，使用了es6的模塊化引入模塊，他的做用就是引入vue框架，根組件及路由，以及定義vue實例。

結語

學到這裏，就夠初學者用的了，要繼續學習vue就能夠繼續進行了，不過要深刻了解的話，仍是須要再看更詳細的資料以及查閱官方文檔，去理解這些代碼的意思。

——————————^~^我是萌萌噠分割線^~^————————————————

                                                                                        下一篇：