Vue.js項目的開發環境搭建與運行

寫做背景：手上入一個用Vue框架寫的微信公衆號項目，根據公司安排，我負責項目源代碼的驗收工做（固然專業的工做檢測會交給web開發人員，我只是想運行起來看一看）。

1 開發環境安裝步驟：

（一）安裝node.js（JavaScript運行環境runtime）

從node.js官網下載並安裝node，安裝過程很簡單，一路「下一步」就能夠完成。

完成以後，開發命令行工具，輸入

node -v

若是出現相應的版本號，則說明安裝成功。

 

另外，npm是node.js下的包管理器，npm能很好的和諸如webpack或Browserify模塊打包器配合使用。

npm包管理器是集成在node中的，所以安裝好node.js以後，直接輸入

npm -v

能夠查看到npm的版本信息。

 

（二）獲取node.js模塊安裝目錄訪問權限

sudo chmod -R 777 /usr/local/lib/node_modules/

 

（三）安裝全局的webpack（vue的組件都是.vue或者向微信小程序的.wxml或者.wxss等自定義組件都沒法被用戶端的瀏覽器解析，須要使用webpack編譯和打包成js文件）

npm install webpack -g

 

（四）安裝vue腳手架vue-cli

npm install vue-cli -g

 

2 建立一個vue.js項目並運行

（一）找一個合適的位置存放你的Vue項目

cd 目錄路徑 

注：目錄路勁直接把建立好的文件夾拖拽到終端就好了

 

（二）建立項目

vue init webpack-simple 項目名

如：vue init webpack-simple vue_project

注：項目名不能夠使用中文，也不能使用大寫字母

 

運行初始化命令的時候會讓用戶輸入基本基本的選項，如項目名稱、描述、做者等信息，若是不想填直接一路回車默認就行。

這個命令的意識是初始化一個項目，其中webpack是構建工具，也就是整個項目是基於webpack的。

 

（三）將根目錄切換到項目

cd 項目名

如：cd vue_project

 

（四）安裝項目依賴

npm install

 注：運行完上面的命令後，項目文件夾中會多出一個package-lock.json文件

================>>>>>>>>

 

（五）安裝vue路由模塊vue-router和網絡請求模塊vue-resource

npm install vue-router vue-resource --save

注：安裝完成後，項目文件夾中會多出一個node_modules文件夾，這裏面就是咱們項目所須要的依賴包資源

================>>>>>>>>

 

（六）啓動項目

npm run dev

注：項目運行成功後，瀏覽器會自動打開localhost:8080（若是瀏覽器沒有自動打開，能夠手動輸入）。運行成功後，會看到以下所示的界面。

 

3 運行一個已存在的Vue項目 

沒有依賴庫的項目是運行不起來的，也許你從代碼服務器上面拉下來的Vue項目只有幾百kb（由於通常不會將項目的依賴庫放入代碼的版本控制器中進行跟蹤），所以當你開始要接受別人的Vue項目時，你須要爲它下載好依賴庫。

 

（一）將根目錄切換到項目

cd 項目名

如：cd vue_project

 

（二）安裝項目依賴

npm install

 注：運行完上面的命令後，項目文件夾中會多出一個package-lock.json文件

================>>>>>>>>

 

（三）安裝vue路由模塊vue-router和網絡請求模塊vue-resource

npm install vue-router vue-resource --save

注：安裝完成後，項目文件夾中會多出一個node_modules文件夾，這裏面就是咱們項目所須要的依賴包資源

================>>>>>>>>

 

（四）啓動項目

npm run dev

 

 

 固然，以後再要運行該項目時，直接cd到該項目的目錄下，運行npm run dev命令就行。

 

【參考1】https://nodejs.org/en/

【參考2】http://www.javashuo.com/article/p-pkexfktm-hg.html

【參考3】https://www.jianshu.com/p/918314e9f757