Vue開發之環境搭建

一、Vue開發所需要的環境

1. nodejs:javaScript運行環境
2. npm:nodejs下的包管理器（是國外的，在國內使用會很慢），可以使用國內的淘寶npm鏡像。
3. webpack: 把無法直接在瀏覽器中使用的語言（如es6,sass）編譯成瀏覽器支持的形式，資源的合併、壓縮混淆。
4. vue-cli：直接構建vue項目。

二、環境搭建步驟

1. nodejs安裝
   直接在nodejs官網下載安裝，安裝完之後打開cmd輸入node -v可以查看node版本，顯示node版本說明已經安裝成功。
   
2. npm版本
   安裝nodejs成功之後輸入npm -v就可以查看npm版本。
   
3. 安裝cnpm
   輸入指令npm install -g cnpm –registry=http://registry.npm.taobao.org，然後回車進行安裝。安裝完之後輸入cnpm -v查看版本信息。
   
4. 安裝vue-cli
   輸入指令npm install -g vue-cli進行全局安裝vue-cli。
   
5. 使用vue-cli構建一個vue項目
      在終端輸入進入項目的存放地址，然後輸入輸入指令vue init webpack firstvuedemo（firstvuedemo是項目名稱,最好小寫字母，首字母小寫後面有大寫字母會報錯）初始化項目，然後一直回車，但是如果提示Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)，則選擇No, I will handle that myself，因爲這裏是使用npm install,在國內npm會很慢，所以推薦選擇自己處理，構建完成之後再用cnpm install來安裝。顯示下面的提示則表示成功。
   
   目錄結構：
   
6. 安裝項目依賴
   進入項目路徑，輸入指令cnpm install安裝依賴。安裝完成之後項目目錄結構會多出一個node_modules文件夾，這裏存放的是項目需要的依賴包資源。
   
   
7. 運行項目
   輸入指令npm run dev就可以運行整個項目了。在瀏覽器輸入返回的地址就可以查看了。
   
   
8. vue開發代碼編輯器
   本人使用vscode進行開發，vscode安裝以及所需要插件請看下一篇文章。