A. vue項目創建和部署使用
這周花了兩天時間簡單研究了下目前非常流行和應用廣泛的前端js框架 vue ，作為一個基礎的了解。 vue 的作者是國人尤雨溪。官網描述 vue 是一套用於構建用戶界面的漸進式框架，可以自底向上逐層應用，它核心只關注視圖層，易於上手和便於整合。同時，其可以與現代化的工具鏈和各種類庫結合，用以創建復雜的單頁應用。其特點主要有以下幾點：
基於 vue 的流行度，日常項目前端有在使用，遂記錄這篇文章，主要講從環境搭建到使用樣例。在學習中，體驗和完成了一個功能稍微豐富的例子，為簡潔起見，本期只展示官方默認例子。鑒於本地也沒搜清有nodeJs環境，所以直接從環境搭建開始。
配置淘寶源，注意 -g 是全局安裝
完成之後將使用 cnpm 替換 npm ，驗證 cnpm :
之後的依賴安裝就可以使用 cnpm install <package> 或簡寫 cnpm i <package> 進行。沒有代理的情況下，相比npm國內要快很多，也不容易失敗。注意可以使用 -g -D --save 等參數設置安裝范圍。
安裝 vue-cli
vue-cli 是官方提供的項目腳手架（可以看做類似服務端開發的maven用於構建的部分），用來進行項目構建等操作，後面我們會繼續介紹。它還提供了一個圖形界面，用來執行和進行相關配置，對於新手等只關心結果的人，減少了很多的學習成本。
安裝命令
驗證安裝
之後我們看到一個 hello-world 的文件夾，里邊包括默認生成的一些配置和 App.vue , main.js 等程序文件，如下鎮漏辯是支持 vue-router 路由 （控制頁面切換等操作） 的一個 main.js 具體內容
注意使用路由時，不要忘記在主模板里添加 <router-view>御缺</router-view> 標簽，表示路由切換的位置，否則路由頁面無法正常展示。
先保持默認的demo內容不變，運行如下命令啟動一個本地服務來運行
之後會啟動對應的服務，通過地址和埠訪問，就能看到默認的頁面。
既然提到了部署，默認的部署使用 npm/cnpm 進行，如下命令，輸出內容在 /dist 目錄。
可以使用參數來設置，得到符合不同需要的編譯結果。之後即可以將打包的文件部署到伺服器上。
這里說下 vue-cli 腳手架所帶的圖形界面編譯打包管理，可使用如下命令開啟，然後按照提示，加入需要的項目，可以查看儀表盤展示，進行插件管理，依賴管理，編譯配置，以及項目構建的操作，十分方便。
啟動 vue-cli 圖形界面
然後按照提示訪問即可。
以上就是本期的內容，主要是一些初期的准備工作。目前整體了解了vue相關，如渲染，組件化，路由等。總體來說依託 vue 提供的豐富文檔和比較好用的工具，以及本身非常高的流行度，在嘗試稍微復雜的功能或者遇到問題時，容易找到相關滿意的解決方式，總體來說還是比較適合入門的。後續看時間能多熟悉些實際項目，真正用於搭配後端做個可用的項目。
1. Vue.js介紹
2. Vue CLi腳手架
B. Vue項目啟動過程以及配置
我們點擊 npm run dev 的時候，這就是啟動 Vue 工程項目，那麼它啟動過程是什麼樣的呢？ Vue 項目啟動過程，本文簡要介紹皮寬。
在執行 npm run dev 的時候，會在當前目錄中尋找 package.json 文件，燃敏亮包含項目拿鄭的 名稱版本 、 項目依賴 等相關信息。
從下圖中可以看到， 啟動 npm run dev 命令後，會載入 build/webpack.dev.conf.js 配置並啟動 webpack-dev-server 。
webpack.dev.conf.js 中引入了很多模塊的內容，其中就包括 config 目錄下伺服器環境的配置文件。
可以看到，在 index.js 文件中包含伺服器 host 和 port 以及入口文件的相關配置，默認啟動埠是 8080 ，這里可以進行修改。
index.html 的內容很簡單，主要是提供一個 div 給 vue 掛載。
main.js 中， 引入了 vue 、 App 和 router 模塊， 創建了一個 Vue 對象，並把 App.vue 模板的內容掛載到 index.html 的 id 為 app 的 div 標簽下， 並綁定了一個路由配置。
上面 main.js 把 App.vue 模板的內容，放置在了 index.html 的 div 標簽下面。查看 App.vue 的內容我們看到，這個頁面的內容由一個 logo 和一個待放置內容的 router-view ， router-view 的內容將由 router 配置決定。
查看 route 目錄下的 index.js ，我們發現這里配置了一個路由， 在訪問路徑 / 的時候， 會把 HelloWorld 模板的內容放置到上面的 router-view 中。
HelloWorld 中主要是一些 Vue 介紹顯示內容。
所以，頁面關系組成是 index.html 包含 App.vue，App.vue 包含 HelloWorld.vue 。
到這，我們開始安裝 router 、 vuex 。
Ctrl+C 退出啟動，繼續執行 vue-cli ，腳手架安裝插件 router 和 vuex 開始。
輸入一個大寫Y，按下Enter
vuex 是專門為 Vue.js 設計的狀態管理庫，以利用 Vue.js 的細粒度數據響應機制來進行高效的狀態更新。
Vuex 主要有五部分：
① 安裝 vuex
接下來我們在 src目錄 下創建一個 vuex 文件夾
並在 vuex文件夾 下創建一個 store.js 文件
文件夾目錄 長得是這個樣子
在保證我們處於我們項目下，在命令行輸入下面命令，然後，安裝 vuex 。
② vuex 的關系圖
③ 開始使用，在 mian.js 中，引入 vuex
④然後告知 vue 開始使用 vuex (Vue.use(Vuex))
在 store.js 文件中，引入 vuex 並且使用 vuex ，這里注意我的變數名是大寫 Vue 和 Vuex
⑤接下來，在main.js中引入store
到這里算是，以及完成了。
我們再重新看一下此時的項目結構，多了router.js和store.js，其它相關的文件也被修改
C. vue項目怎麼在原來的項目上打開
在vscode里新打開一個命襪襲令行終端，在終端窗口裡使用vue對應的腳手架命令啟動項目即可。
1、用本地git客戶端將vue項目從github克隆到本地，用vscode打開，完成編輯。
2、在vscode里新打豎燃開一個命令行終端，在終端窗口裡使用vue對應的腳手架命令啟動項目。余好虛