不熟悉vue模板的參考我之前的博課（vue基礎模板）此處是完善精簡優化vue項目
首先我們創建一個vue模板。vue init webpack 項目名字（不能使用中文）
1 . vue init webpack 項目名字。然後按照步驟去下一步。
2 . 創建完項目使用vs code打開 ctrl + ~ 組合鍵打開控制檯，然後 npm install 安裝依賴（建議使用npm 防止報錯。不過因爲是國外的鏈接，下載可能會很慢，依賴網速和服務器穩定性） cnpm install 的依賴包體積大。內容多。有時候會發現npm run dev 跑不起來項目
安裝完的目錄結構
3 . 首先我們從路由入手吧
第一張圖片是原始模板。先說下改動。
（1）首先就是我們把路由表定義成一個變量。然後定義一個全局的路由監聽守衛。用來更改跳轉後頁面的title以及我們從列表頁進入詳情頁面的時候保存狀態，等等一系列需要的操作，然後再export default route對象
（2）我們引入組件改爲了按需引入的方式區別就是我們引入組件在routes數組裏引入組件，定義meta的title是爲路由守衛能監聽到頁面跳轉的標題，也可以在meta對象里加keepAlive屬性爲true可以緩存當前頁面狀態。我的路有裏面的第一個頁面時自定義的一個404頁面。當找不到對應的路由或者此域名下的頁面時就會跳轉404頁面。
（3）history模式。就是地址欄不包含#。防止移動端出現地址欄截取的或者取參數的時候出現差錯。地址欄顯示也會美觀一些
首先配置mode：'history'，然後設置base:'/dist/',base屬性值可以自定義，前提是要和後臺定義的一致，影響我們打包和調試
4：看一些基本配置，首先build下的目錄下的webpack.base.conf.js
下面標紅處是我們可以創建一些簡潔路徑，inport 的時候就能 少寫一下路徑
5：看一些基本配置，首先build下的目錄下的index.js
