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安裝以及所需要插件請看下一篇文章。