構建vue單頁應用(一)

1.安裝node.js

   去官網下載最新版本雙擊安裝，node.js中集成了npm，因此node安裝好後，npm也安裝好了。

2.安裝vue-cli

 運行命令全局安裝：npm i -g vue-cli

       安裝好vue-cli後也就安裝上了webpack。vue-cli是基於nodejs+webpack封裝的命令行工具，能夠理解爲聚集了各類命令的bash,或者bat。本來須要本身配置webpck的相關配置，被cli簡化了。而且安裝vue的用戶習慣整理了一套構建和目錄規範。這樣，你只要按照vue-cli的配置規則來，就能夠知足不少繁瑣的webpack+plugin配置。

3.而後建立一個 webpack 項目而且下載依賴

 vue init webpack vue-tutorial

 

 填寫項目設置按回車（圖沒有截全），最後一項按回車直接在項目中執行了npm install

 進入文件夾中查看，發現項目已經構建好了

4.進入項目文件夾，運行項目

   cd vue-tutorial

   接着使用 npm run dev 在熱加載中運行咱們的應用

運行成功:

5. 建立新頁面：在src下添加了pages文件夾，而後添加了index.vue文件

6.配置router路徑

     在地址欄輸入index頁面顯示

 

可是如今index頁還不是默認顯示的頁面，修改一下router配置，設置默認首先打開index頁面：

在地址欄中無需輸入index,首先顯示index頁,效果：