本文預設已經安裝nodejs

1.全域性安裝vue-cli

$ npm install --global vue-cli

$ vue init webpack new-project

$ cd new-project
$ npm install

$ npm run dev

.
|-- build                            // 專案構建(webpack)相關程式碼
|   |-- build.js                     // 生產環境構建程式碼
|   |-- check-version.js             // 檢查node、npm等版本
|   |-- dev-client.js                // 熱過載相關
|   |-- dev-server.js                // 構建本地伺服器
|   |-- utils.js                     // 構建工具相關
|   |-- webpack.base.conf.js         // webpack基礎配置
|   |-- webpack.dev.conf.js          // webpack開發環境配置
|   |-- webpack.prod.conf.js         // webpack生產環境配置
|-- config                           // 專案開發環境配置
|   |-- dev.env.js                   // 開發環境變數
|   |-- index.js                     // 專案一些配置變數
|   |-- prod.env.js                  // 生產環境變數
|   |-- test.env.js                  // 測試環境變數
|-- src                              // 原始碼目錄
|   |-- components                     // vue公共元件
|   |-- store                          // vuex的狀態管理
|   |-- App.vue                        // 頁面入口檔案
|   |-- main.js                        // 程式入口檔案，載入各種公共元件
|-- static                           // 靜態檔案，比如一些圖片，json資料等
|   |-- data                           // 群聊分析得到的資料用於資料視覺化
|-- .babelrc                         // ES6語法編譯配置
|-- .editorconfig                    // 定義程式碼格式
|-- .gitignore                       // git上傳需要忽略的檔案格式
|-- README.md                        // 專案說明
|-- favicon.ico 
|-- index.html                       // 入口頁面
|-- package.json                     // 專案基本資訊
 

6. 在index.html處有個id="app"的div，在App.vue中也有一個id="app"的div。頁面渲染的就是這個元件。

7. 在這個App.vue中有個router-view標籤，預設在這渲染當路由為"/"指向的元件

路由設定在src/router/index.js中

8. 這樣就可以使用HelloWorld元件了。

這張圖可以更清楚得讓大家明白router-view標籤的作用

*注意，當有多個元件的時候，就不是component屬性而是components，記得註冊的元件上面都要用import匯入

9. 當元件裡有自己的子元件的情況下，就需要使用到router-link標籤了，它其實是一個a標籤

10. 那麼我們怎麼根據路由渲染同級元件呢？

11. 如果我們想通過超連結的方式切換元件來實現切換頁面的效果呢？

12.那麼router-view和router-link的區別是什麼呢？

目前來說，router-link和router-view結合使用，可以在元件中通過點選渲染子元件；
單獨使用router-view就可以在當前元件中重根據name屬性選擇渲染元件；
單獨使用router-link就可以整個切換到to屬性指定路由的元件；

最後，這個單頁面開發的意思就是，這個專案只有index.html這個頁面，我們通過使用不同的元件像拼裝機器人一樣獲得不同的頁面展示，而src下的App.vue就是所有元件的父元件，所有其它元件都通過路由渲染到它裡面的router-view中，然後再將App.vue渲染到index.html中。

本人愚見，希望大牛指出錯誤。