vue環境搭建的簡單總結

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

安裝步驟方法連接：

http://www.javashuo.com/article/p-bitnowun-hb.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項目就能夠了。