前面在說到vue-router的時候，都是用最簡單的方式說明用法的，但是在實際項目中可能會有所出入，所以，今天就結合vue腳手架來展示項目中的vue-router的用法。
創建項目
首先需要使用腳手架創建一個項目，這里選擇的是webpack-simple這個模板。
1，執行命令：vue init webpack-simple cli-router就可以
2，npm install 下載相關依賴
3，npm run dev運行項目。
此時我們可以看到瀏覽器中自動新開的頁面：
新建組件
和前面例子一樣，我們需要新建兩個組件用於路由跳轉，按照習慣，這里在src文件夾下面新建一個用於存放組件的文件夾components，在這個文件夾下面新建兩個個組件Home.vue和News.vue，並添加基本信息。
安裝並配置路由
在以前是直接引入js包的，現在則是通過npm來下載，只需要在項目的根目錄執行命令：npm install vue-router --save即可。
下載完畢后，需要進行路由配置，在實際項目中，路由會比較多，所有通常的做法是將路由配置單獨提出來，所以這里先在src文件夾下面新建一個文router.config.js進行路由配置：
這里是將配置的路由放置在一個數組里面，然后需要在入口文件main.js中引入這個數組。在引入前，先需要引入上面下載的路由，
頁面渲染
在完成前面的步驟后，我們需要將匹配的路由進行渲染，在App.vue頁面中，先將之前默認生成的內容刪掉，然后再使用<router-link>標簽，和前面的用法基本一樣。
完成后，重新運行項目。
使用動畫
前面在過渡中使用過一個角animate.css的動畫庫，其實，在路由中也可以使用，使用前需要先將資源引入進來，
首先在src文件夾下面的assets這個文件夾下面新建一個文件css文件，然后將前面下載的animate.css放在css文件夾下面。
然后在main.js中引入這個樣式文件
有的版本中直接這樣引入外部樣式的時候會報下面的這樣的錯誤
這是因為項目中缺少css-loader和style-loader，所以需要在項目跟目錄中執行命令 npm intsall css-loader style-loader --save-dev來下載相關依賴，然后在webpack.config.js中進行配置。
如果上面的不報錯，再繼續在需要使用動畫的位置進行添加動畫組件和動畫樣式就可以了。
此時就實現了最基本的路由配合腳手架和動畫的項目了。
完整代碼下載：點這里