應用一：Vue之開發環境搭建

 

簡單分享下vue項目的開發環境搭建流程~

 

1、安裝nodeJS

　　vue的運行是要依賴於node的npm的管理工具來實現，下載地址：https://nodejs.org/en/。安裝完成以後以管理員身份運行cmd， 輸入node -v，查看node版本號，出現版本號則說明安裝成功。

 

二、安裝淘寶npm鏡像

　　因爲npm是國外的使用速度較慢，因此咱們須要安裝使用淘寶的cnpm鏡像命令來管理工具。安裝命令以下：

　　npm install -g cnpm –-registry=https://registry.npm.taobao.org，在cmd下直接運行便可。

 

3、安裝vue腳手架

　　vue的腳手架分爲2.0和3.0兩個版本，安裝命令稍有區別，具體以下：

　　2.0版本：cnpm install -g vue-cli

　　3.0版本：cnpm install -g @vue/cli

　　都是在cmd下直接運行進行全局安裝，完成後執行vue -V命令驗證是否安裝成功。

 

4、安裝 Webpack

　　在cmd下執行命令cnpm install webpack -g進行安裝。

　　注意：webpack 4x以上，webpack將命令相關的內容都放到了webpack-cli，因此還須要安裝webpack-cli；安裝完成後執行webpack -v驗證。

　　

　　到此全部安裝都已完成，接下來能夠開始建立vue工程。

 

5、建立vue工程

　　在一個目錄下新建一個vuepro文件夾，cd到該目錄下，建立新項目vue_project。

　　注意2.0和3.0版本的區別：

　　2.0版本：vue init webpack vue_project

　　3.0版本：vue create vue_project

 

六、安裝工程依賴

　　在當前工程目錄下執行cnpm install命令，工程根目錄下會自動生成node_modules文件夾用於存儲項目依賴文件。

　　工程目錄結構以下（2.0V）：

　　

 

七、啓動node服務

　　執行npm run dev

 

八、瀏覽裏輸入：http://localhost:8080運行項目，出現以下界面說明項目建立成功。