Vue環境搭建的簡單總結

構成：　　Node.js環境　 cnpm npm的淘寶鏡像 　　Veu cli 手腳架構建工具

安裝node.js環境

安裝node.js方法步驟https://jingyan.baidu.com/article/b0b63dbfca599a4a483070a5.html；

安裝cnpm

有些npm有些資源被屏蔽或者是國外資源的原因，經常會導致用npm安裝依賴包的時候失敗，所以需要npm的國內鏡像---cnpm

在命令行中輸入npminstall-gcnpm--registry=http://registry.npm.taobao.org 然後等待

安裝vue-cli腳手架構建工具

在命令行中運行命令npm install -g vue-cli

如果在此步驟時出現了vue不是內部或外部命令。。。。。。。。的提示時，有可能時vue沒有安裝，則需要在命令行運行npm vue

然後在命令行中運行cnpm install -g vue-cli

用vue-cli構建項目

創建項目，首先要選定目錄，然後再命令行中把目錄轉到選定的目錄。

例如：在此步驟，我在D盤新建了一個文件夾myvue

在我指定的myvue目錄下，在命令行中運行命令 vue init webpack myvues。該命令個命令的意思是初始化一個項目，其中webpack是構建工具，也就是整個項目是基於webpack的。myvues是整個項目文件夾的名稱，這個文件夾會自動生成在我指定的myvue目錄下。

運行初始化命令的時會讓用戶輸入幾個基本的選項，如項目名稱，描述，作者等信息，如果不想填直接回車默認就好

安裝項目所需的依賴

安裝依賴包，首先cd到項目文件夾（myvues文件夾），然後運行命令 npm install 或者是cnpm install(因為我的無法npm下載，只能用cnpm)，等待安裝。

安裝完之後，myvues目錄下會多出一個node_modules文件夾，該文件夾就是我們項目需要的依賴包資源。

安裝完依賴包之後，就可以運行整個項目了。

運行項目

在項目目錄中，運行命令 npm run dev ，

然後在瀏覽器手動運行localhost:8080，運行成功則會出現如下界面

然後手動關閉（ctrl+c）。

安裝json和resource和router

npm install vue-router --save npm install vue-resource –sav這兩句話等同於：

npm install vue-router vue-resource --save

npm install json-server --save

1. 3. 安裝vue develop tools

安裝步驟方法鏈接：

https://www.cnblogs.com/tanyongli/p/7554045.html

首先在github下載devtools源碼，地址：

https://github.com/vuejs/vue-devtools

下載好devtools源碼，進入vue-devtools-master工程 執行cnpm install, 下載依賴在此步驟中我將其直接放在D盤下

然後執行npm run build，編譯源程序

該步驟完成後，修改shells、chrome目錄下的mainifest.json 中的persistant為true：

打開谷歌瀏覽器的設置--->擴展程序，並勾選開發者模式

然後將剛剛編譯後的工程中的shells目錄下，chrome的整個文件夾直接拖拽到當前瀏覽器中，並選擇啟用，即可將插件安裝到瀏覽器

打開一個已有的vue項目，運行項目，然後在瀏覽器中--->設置--->更多工具--->開發者工具，進入調試模式：發現vue.js is not detected ，可以調整一下webpack.config.js的代碼

最後重啟vue項目就可以了。

vue環境搭建的簡單總結