vue-cli利用router建立單頁面

1、建立腳手架

第一步

打開命令輸入vue init webpack-simple vue-name 下載webpack-simple  (vue-name是你要建立的項目名稱)

第二步

輸入cd vue-name進入你的項目目錄

第三步

輸入 npm install 下載模塊 也叫作依賴注入

第四步

輸入npm run dev 運行項目

若是端口錯誤 打開package.json，找到scripts，在--hot後面加上--port 8085 要修改的端口號

 

 

 

2、建立路由

腳手架：vue-loader

第一步

建立組件，好比建立一個Home.vue文件，建立完裏面編寫

 

 

第二步

下載vue-router，打開命令輸入npm install vue-router --save

第三步

引入router

打開main.js，寫上

 

 

第四步

配置router

在main.js，寫上

 

 

router.comfig.js是新建的js文件，用來存放路由相應配置的模塊

也能夠直接在const router = new VueRouter({這裏寫模塊})，我的建議用上面方法，益處就很少說了

而後在router.comfig.js文件寫上

 

 

第五步

在App.vue文件使用配置好的路由

 

配置環境沒問題的話，你只要按這樣的思路步驟寫下來，就能在vu-clid的實現router功能

最後，當你點擊主頁就會出現你想寫的組件

寫的很差多多包涵，不懂的能夠留言~~~~