在window下搭建Vue.Js開發環境

在window下搭建Vue.Js開發環境

（轉載自博主生聖）

 

 

1. nodejs官網http://nodejs.cn/下載安裝包，無特殊要求可本地傻瓜式安裝，這里選擇2017-5-2發布的 v6.10.3

2. cmd命令行：

   node -v //顯示node版本 v6.10.3

   npm -v  //顯示npm包管理器版本 3.10.10

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

4. Cmd命令行中輸入npm install -g cnpm --registry=http://registry.npm.taobao.org

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

6. 至此，我們需要的環境及工具已經准備好了。

   接下來，我們使用vue-cli來構建項目。

7. 首先，我們先選擇進入到e我們的工作目錄為 E:\個人\VueJS。此目錄需先建好，目前是空的，這個工作目錄以后會添加各個項目目錄。
8. 在VueJs目錄下，運行命令vue init webpack firstVue。其中，webpack是構建工具、模塊打包器，也就是整個項目是基於webpack的。其中，firstVue是項目文件夾的名稱，這個文件夾會自動生成在vuejs這個工作目錄中。

9. 

   安裝過程中，需要我們輸入項目名稱，描述，作者，版本（獨立版）,使用ESLint規范等等，

   
   （插入一
   

   不應用ESLint 
   創建webpack模板項目時，如果你對ES6和ESLint不是很熟的話我個人不建議你應用它，因為要求比較嚴格，所以一不小心就報錯，導致整個項目運行不起來，對於初學很痛苦。 
   

    ）

   
   此時，我們看到工作目錄下已經自動生成了目錄firstVue,如下圖。

10. 

     

11.  主要用的包都在package.json中，如下圖

12.  

     

13.  cd到我們的項目文件夾firstVue中，運行命令cnpm install 安裝包,(注意：我們已經使用淘寶鏡像cnpm)

14. 

     

15. 安裝完之后，我們發現項目文件夾下多了一個node_modules目錄，里面就是項目依賴包資源

16. 

     

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

    
     
    這里簡單介紹下 npm run dev 命令，其中的“run”對應的是package.json文件中，scripts字段中的dev，也就是 node build/dev-server.js命令的一個快捷方式。
     

    
    
    
     運行項目在項目目錄中，運行命令 npm run dev ，會用熱加載的方式運行我們的應用，熱加載可以讓我們在修改完代碼后不用手動刷新瀏覽器就能實時看到修改后的效果。

18. 

     

19. 

     

20. 如果啟動過程中出現下方問題，只需要將config目錄下的index.js文件中dev端口由8080改為8088

21. 

     

22.