本篇文章主要寫給剛剛使用vue-cli的新手們，話不多說感覺看下面程式碼吧！

首先在大前提vue-cli已經安裝好的情況下，並且cnpm install後(官網使用的是npm，但這裡推薦用cnpm比npm快而且npm有時候會有出現卡住的現象)，這裡有個小提醒就是關於是否開啟eslint,這個是對你寫的程式碼進行規範化的一個工具，對於剛接觸的新手們建議關閉，不然程式碼寫的不符合它的規範你的編譯器會一直報錯，如下圖

安裝好腳手架之後就像這樣

終端輸入npm run dev，然後開啟localhost:8080就可以看到專案執行啦

大致分析一下幾個比較常用的檔案把，如下圖

1.build：主要用來配置構建專案以及webpack

2.config：專案開發配置

3.npm或者cnpm所下載的依賴包

4.你的原始碼

5.靜態資料夾，webpack打包時不會打包這裡檔案

6.最外層的頁面一般title等都設定在這裡

7.存放你要npm依賴包的json資料

大致介紹完專案結構，我們一起看看它頁面的原始碼吧！

先從這個App.vue開始，這個檔案僅此於外部的index意思就是index包含所有頁面，而App.vue包含除了index的頁面，也就是路由巢狀，後面會說到，在這裡所建立的檔案都是檔名.vue，頁面的html格式就是一個template標籤中包含一個div，相當於元件化的形式，而元件的內容寫在這個div中（一個頁面必須只有一個template包一個div，內容寫在這個div中，不然會報錯

css，js格式

現在我們來看看HelloWorld.vue這個頁面，這裡js，css的程式碼放置格式它已經幫你寫出來了，按照這種格式寫就行了，需要提醒的就是style標籤中的scoped屬性，如果沒寫這條那麼這個style的樣式會影響到這個頁面所有的子路由，如果加了那麼這個樣式只對當前頁面起作用

看完頁面我們看看路由的配置如下圖

路由的路徑在router下，剛開始開啟會看到有報錯，其實不是語法錯誤，是因為編譯器預設編譯es5的語法，而vue腳手架用的是es6的語法，我用的編譯器是webStorm，只要設定一下就行了。

簡單介紹一下routers中的結構，這裡主要用來配置路由的，上面說過所有子路由都在App.vue下，所有App.vue是最外層的父路由，這裡的routes中存的就是路由的陣列，path就是你要訪問你所建立的頁面的路徑，這裡所配置的路由為''/，也就是根路徑所以你直接訪問localhost:8080就會出現一個App.vue中插入一個HelloWorld.vue的頁面（這個相當於路由巢狀），name就是給當前路由命名，可以在其他頁面通過$route.name訪問到當前頁面路由的name，component相當於你要引用的路由頁面，這裡引用的是HelloWorld.vue這個頁面，使用import將HelloWorld.vue引入

現在教大家建立一個檔案，並配置路由

先建立一個字尾為vue檔案，並把最基本的html結構寫上

然後配置它的路由，先引入這個檔案，用import，然後填寫要訪問這個檔案的路由路徑，這邊寫為/test，所有訪問這個路由的url為：localhost:8080/#/test

輸入url，一個APP.vue中巢狀test.vue（test被APP包裹）的頁面就呈現了

vue腳手架預設的路由巢狀就是所有頁面都巢狀在App.vue頁面下，被App.vue包裹，現在教大家自由巢狀自己的頁面，現在把test頁面巢狀到HelloWorld.vue頁面下

首先在HelloWorld.vue介面下加一個router-view標籤（router-view放置子路由，就是被包裹的頁面）

然後配置HelloWorld.vue的子路由(test.vue)

這樣localhost:8080/#/test就是一個APP.vue包裹HelloWorld.vue，HelloWorld.vue包裹test.vue的頁面瞭如下圖

這樣簡單路由巢狀就完成，在說說路由跳轉，比如你給一個按鈕繫結一個函式，實現點選按鈕跳轉到test頁面那在函式中可以用

this.$router.push({path:'/test'})

this.$router.go(-1)

也可以通過router-link標籤跳轉，to中寫要跳轉的路由，router-link還有很多有用的屬性可以去vue官網檢視

<router-link to='/to' >點選跳轉</router-link>

大致內容就是這些，如果有哪裡說錯或者遺憾還望多多包涵，或者聯絡我，大家多交流交流！