一、如何使用vue
1.script
若項目直接通過script加載CDN文件，則：
<script src=http://webapp.didistatic.com/static/webapp/shield/z/vue/vue/1.0.24/vue.min.js></script>
2.npm
若項目基於npm管理依賴，則可以使用npm安裝vue，執行如下命令：
$ npm i vue --save-dev
3.bower
若項目基於bower管理依賴，則可以使用npm安裝vue，執行如下命令：
$ bower i vue --save-dev
二、結合npm搭建一個vue項目
1.首先安裝node.js
1).進入node.js官網下載相應的安裝包：https://nodejs.org/en/
2).安裝node.js後在cmd指令輸入node -v以及npm -v出現相應的版本號表示已經安裝完成
3).配置npm在安裝全局模塊時的路徑和緩存cache的路徑，因爲在執行例如npm install webpack -g等命令全局安裝的時候，默認會將模塊安裝在C:\Users\用戶名\AppData\Roaming路徑下的npm和npm_cache中，不方便管理且佔用C盤空間，如下圖所示：
所以這裏配置自定義的全局模塊安裝目錄，在node.js安裝目錄下新建兩個文件夾 node_global和node_cache，然後在cmd命令下執行如下兩個命令：
npm config set prefix "D:\SDE\Node11.8.0\node_global"
npm config set cache "D:\SDE\Node11.8.0\node-cache"
執行成功。然後在環境變量 -> 系統變量中新建一個變量名爲 “NODE_PATH”， 值爲“D:\SDE\Node11.8.0\node_modules”，如下圖：
最後編輯用戶變量裏的Path，將相應npm的路徑改爲：D:\SDE\Node11.8.0\node_global，如下：
4).最後使用npm config list指令查看配置
三、搭建項目
1.安裝vue-cli腳手架
使用指令npm install -g vue-cli，其中-g表示全局的意思，結合上面配置的npm全局安裝配置所使用
使用vue -V查看當前vue的版本(注：其中-V中的V一定得是大寫)
2.準備就緒，着手搭建項目
在合適的地方創建一個目錄
cmd指令切換到該目錄下，或者直接在目錄欄上輸入cmd然後回車
輸入指令vue init webpack,下載模板(必須連接外網)
然後一個vue項目就搭建好了
3.cmd進入該項目然後輸入npm install指令，安裝項目所依賴的包
若install或者搭建過程中遇到
npm ERR! Unexpected end of JSON input while parsing near '...npmjs.org/node-...
解決方案，刪除項目目錄下的所有文件，然後輸入指令
npm cache clean --force
4.重新搭建一遍然後，輸入npm run dev，啓動項目
打開瀏覽器輸入localhost:8080，即可看到vue 模板項目
四、vue項目目錄結構介紹
├── index.html 入口頁面
├── build 構建腳本目錄
│ ├── build-server.js 運行本地構建服務器，可以訪問構建後的頁面
│ ├── build.js 生產環境構建腳本
│ ├── dev-client.js 開發服務器熱重載腳本，主要用來實現開發階段的頁面自動刷新
│ ├── dev-server.js 運行本地開發服務器
│ ├── utils.js 構建相關工具方法
│ ├── webpack.base.conf.js wabpack基礎配置
│ ├── webpack.dev.conf.js wabpack開發環境配置
│ └── webpack.prod.conf.js wabpack生產環境配置
├── config 項目配置
│ ├── dev.env.js 開發環境變量
│ ├── index.js 項目配置文件
│ ├── prod.env.js 生產環境變量
│ └── test.env.js 測試環境變量
├── mock mock數據目錄
│ └── hello.js
├── package.json npm包配置文件，裏面定義了項目的npm腳本，依賴包等信息
├── src 項目源碼目錄
│ ├── main.js 入口js文件
│ ├── app.vue 根組件
│ ├── components 公共組件目錄
│ │ └── title.vue
│ ├── assets 資源目錄，這裏的資源會被wabpack構建
│ │ └── images
│ │ └── logo.png
│ ├── routes 前端路由
│ │ └── index.js
│ ├── store 應用級數據（state）
│ │ └── index.js
│ └── views 頁面目錄
│ ├── hello.vue
│ └── notfound.vue
├── static 純靜態資源，不會被wabpack構建。
└── test 測試文件目錄（unit&e2e）
└── unit 單元測試
├── index.js 入口腳本
├── karma.conf.js karma配置文件
└── specs 單測case目錄
└── Hello.spec.js
package.json文件介紹:
.editorconfig：編輯器的配置:
