最全Vue開發環境搭建

前言

一直想去學Vue，不過一直找不到一個契機。然公司手機端用到了跨平臺開發apicloud，裏邊涉及到Vue組件化開發，例如header和footer的封裝，以及apicloud自定義的frame等等，因而決定對Vue.js研究一番，固然開發環境搭建是少不了的第一步。俗話說，工欲善其事必先利其器！

vue的安裝

1.vue的安裝依賴npm

從node.js官網下載並安裝node，爲何要安裝node，由於node中自帶npm；有空還能夠學一下node.js,畢竟node.js也能夠開發後端。(有可能的話作個全棧開發)

安裝過程很簡單，一直下一步完事！安裝完成後可進入cmd編輯器，輸入命令 node -v進行查看,若是成功安裝node會出現 版本號 個人版本v8.11.1。

2.安裝cnpm

在命令行中輸入 npm install -g cnpm --registry=http://registry.npm.taobao.org 建議都用-g。全局安裝

而後等待，安裝完成後可進入cmd編輯器，輸入命令 cnpm -v進行查看,如已成功安裝會出現對應版本

大部分npm包是國外的，用淘寶鏡像的cnpm來代替npm的安裝，速度會快不少。若是使用淘寶鏡像安裝就輸入命令行 $ cnpm install -g vue-cli進行安裝，若是沒有安裝淘寶鏡像依舊用$ npm install -g vue-cli安裝 無非慢點而已。

輸入命令 cnpm -V 出現5.2.0表明淘寶鏡像安裝成功
輸入命令 vue -V 出現2.9.3表明VUE安裝成功

提一下，vue-cli 的 webpack 模板已經預先配置好（在安裝vue-cli時,已經自帶安裝webpack）

3.以上搭建完成後咱們就能夠構建並運行一個簡單的項目啦

 

 出現以上界面就說明運行成功啦！！！這裏介紹一個打開命令行的小技巧：每次運行vue項目都得用cmd命令而後cd命令進入到項目文件夾下執行npm run dev，很麻煩，其實咱們能夠這樣：資源管理器進入到此文件夾裏，shift+鼠標右鍵會出現 "在此處打開Powershell窗口選項"，直接點擊就能夠了，是否是很方便！！！

有沒有注意到上面截圖右上角

那個就是vue調試工具vue-devtools擴展程序

vue-devtools的安裝以及解決（chrome提示「禁用開發者模式運行的擴展程序」）

1.git clone https://github.com/vuejs/vue-devtools.git  個人是clone到E:\DevelopTools\vue-devtools-master

2.在vue-devtools-master目錄下安裝依賴包，打開命令行執行命令：

  cd   E:\DevelopTools\vue-devtools-master

  npm run install

3.修改manifest.json文件 把"persistent":false改爲true

4.編譯代碼 

         npm run build

5.安裝擴展Chrome插件

Chrome瀏覽器 >  更多程序 > 拓展程序 

點擊加載已解壓程序按鈕, 選擇 vue-devtools-master > shells > chrome 放入, 安裝成功以下圖

 6. vue-devtools使用

調試需引用開發環境下的完整版vue.js,若是使用生產環境壓縮後的版本（vue.min.js）會報如下錯誤：

 對於直接script引用,沒有用構建工具的項目，直接選中html頁面右鍵chrome瀏覽就能夠了,或者搭建一個httpserver用谷歌瀏覽器瀏覽就好了

vue-cli構建的vue項目，如何調試，確定是，進入到項目文件（若是項目已經被npm install過=安裝依賴包）執行命令 npm run dev（以後chrome瀏覽器F12後）

如圖所示：

 

瞭解vue的原理的應該知道,vue基於數據驅動。有此工具後能很方面看到視圖對應的數據。

安裝完vue-devtools後，每次打開瀏覽器會彈出提示

至於終極解決辦法請參考個人另一篇博客完全禁用Chrome的「請停用以開發者模式運行的擴展程序」提示

對於網上搜索的組策略等解決辦法，我試過，反正個人是不行（估計瀏覽器版本過高的緣故），最後用以上方法解決。。

以上工具裝完後，怎麼寫代碼呢，固然最簡單的工具，莫過於記事本，不過估計沒人會用。編輯器我推薦用vscode。。

安裝vscode

 別的不敢說，微軟出的工具我以爲沒啥可說的，我以爲好用、放心。。安裝確定簡單，下載後一直下一步便可，不在多說。

 1.調試很方便 ，直接F5修改launch.json，能夠添加一些自定義配置

 

2.如何進行源代碼管理

3.搜索一些方便好用的擴展

4.如何多項目切換(ctrl+shift+p)選擇project manager

此時會打開projects.json,這裏能夠配置如何進行多項目切換！

關於vscode我這裏拋磚引玉，其餘詳細的功能請你們自行研究！！！