搭建 Vue 開發環境

Vue 開發環境搭建總結：
目錄：

1. 理清 Node.js、Vue、VSCode 間的關系；
2. 安裝 Node.js ；
3. 創建第一個 Vue 專案；
4. 安裝并使用 VSCode ；

1. 理清 Node.js、Vue、VSCode 間的關系

對于這三者之間的關系，我們可以舉 JRE(Java運行時環境)、Java、IDEA(Java語言常用的集成開發工具) 這個例子來理解；
首先呢，凡是 Java 撰寫的專案在運行時都需要使用 JRE ，所以我們可以把 JRE 理解為 Java 專案的運行時環境；
同理得， Vue 的底層是用 JavaScript 實作的，那 Node.js 便是 JavaScript 在服務器端的運行時環境（可以理解為 Vue 在服務器端靠 Node.js 來編譯運行）；
而 VSCode 便是我們在寫 Vue 專案時常用的集成開發環境（它的作用和 IDEA 一致）；

2. 安裝 Node.js

1. 打開官網下載安裝包：https://nodejs.org/zh-cn/

2. 安裝包下載完成之后，雙擊開始下載；
	在安裝的程序中一路 Next ，如果讓你選擇安裝路徑，那就按照自己的需求改變即可；
	如下圖所示：

3. 安裝一直到 Finish 按鈕這里，點擊之后就完成安裝了，之后我們進行安裝的測驗；
	打開 cmd 視窗，然后在其中輸入 node -v 和 npm -v 這兩條命令，如果可以正常顯示版本號就是安裝成功了，如下圖所示：

4. 安裝之后，我們打開 node.js 的安裝目錄看一下其中的檔案，如下圖所示（其中 node_cache 和 node_global 是我新建的）；
	因為我們在寫 Vue 專案的 時候會匯入很多原始碼包來加速自己的開發，但是如果我們不創建 node_cache 和 node_global ，這些內容會自動在 C 盤中去存盤；
	為了節約 C 盤的空間大小，所以我們直接在這里新建出來，但是我們肯定要進行配置，它才會選擇我們創建的這倆檔案夾來進行存盤；

5. node_cache 和 node_global 的配置
	npm config set prefix “D:\Program Files\nodejs\node_global”
	npm config set cache “D:\Program Files\nodejs\node_cache” 
   直接 cmd 視窗的任意盤符之下輸入這兩條命令，在今后進行 Vue 專案開發時，就會把所有包都放到我們新創建的那倆檔案夾中了；
   !!! 注意命令中的路徑，需要改為自己的創建路徑；
   我知道很多人會好奇， npm 是什么？
   在這里我們可以把它理解為一個包管理工具，使用它之后我們可以方便快捷的下載開發程序中所需要的原始碼包，它存在的目的同樣是為了加速我們的開發效率（可以將 npm 理解為 Node.js 的包管理工具），在進行 Node.js 安裝時，它會自動被安裝上(和前面的 npm -v 命令形成照應)；
   命令輸入如下圖所示:	

6. 最后我們進行環境變數的配置
	步驟：“我的電腦”-》右鍵-“屬性”-》“高級系統設定”-》“環境變數”
	進入環境變數對話框：
	在【系統變數】下新建【NODE_PATH】，輸入【D:\Program Files\nodejs\node_global\node_modules】
	在【用戶變數】下的【Path】中新增兩條記錄：
	【D:\Program Files\nodejs\node_global】
	【D:\Program Files\nodejs\node_cache】
	！！！Path 中新增的兩條記錄占兩行；
	！！！這些路徑都需要改為自己的安裝路徑；
	如下圖所示（為了快速截圖表示含義，我只在 Path 中輸入了一條就截圖了）：

7. 最終測驗階段
	依舊是打開 cmd 視窗，我們下載一個模塊代碼，看看它是否會自動下載到我們指定的目錄中；
	npm install express -g
	npm install vue -g
	在視窗中輸入這兩條命令，之后我們去指定的目錄中去找就可以了，如下圖所示:

8. 搞到這里就是 Node.js 安裝撒花完結的時刻了；

3. 創建第一個 Vue 專案

1. 因為 npm 默認的鏡像在下載原始碼包時速度會很慢，所以我們改一下 npm 的鏡像；
	需要在 cmd 視窗中輸入 npm install -g cnpm --registry=https://registry.npm.taobao.org
	如下圖所示：

之后我們測驗一下，看看 cnpm 是否生效了；
	在 cmd 中輸入 cnpm install --global vue-cli
	如果出現了下圖所示的情況，就是成功了；

2. 創建第一個 Vue 專案；
	在創建的時候，它默認是在當前目錄下新建專案檔案夾，所以我建議在輸入專案創建命令之前就先轉到對應的目錄下；
	vue init webpack my-vue
	其中 my-vue 是專案名；
	這個程序中它會讓你輸入很多 yes 和 no ，除了 vue-router 這里我們選擇 yes ，其他我們都選 no 就可以了；
	盤符切換如圖所示：

很多 yes 和 no ,如下圖所示：

創建成功標志：

3. 運行
	1）使用 cd 目錄名 的形式進入新建的 Vue 專案的目錄；
	2）輸入【cnpm i element-ui】 【cnpm install】 進行依賴包的安裝；
	3）輸入 npm run dev 啟動專案；
	4）之后在瀏覽器中輸入 http://localhost:8080 就可訪問到主頁面了；
	如下圖所示：

4. 安裝并使用 VSCode

1. 進入官網下載安裝包：https://code.visualstudio.com/
	如下圖所示:

2. 安裝各種插件；
	VSCode 這個 IDE 的特點就是可擴展性強，我們需要安裝 vetur、eslint、Auto Close Tag、Auto Rename Tag、Debugger for Chrome 這幾款插件；
	首先，使用 ctrl+shift+x 打開插件搜索的頁面，之后輸入以上的插件名就可以進行下載安裝了；
	其中 vetur、eslint 這倆我們需要在 settings.json 中配置一下；
	打開 settings.json 的步驟：檔案->首選項->設定 打開設定界面，在設定界面右側添加配置，點擊“在settings.json 中編輯”，進入代碼編輯界面；
	如下圖所示：

在 seetings.json 中輸入：
    "emmet.syntaxProfiles": {
           "vue-html": "html",
           "vue": "html"
    },
    
	"eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],

    "eslint.options": {
        "plugins":["html"]
    }

總輸入如下圖所示:

3. 之后打開我們上面創建的 my-vue 這個專案；
	打開步驟：右鍵-》打開檔案夾，然后匯入專案；
	如下圖所示：

4. 運行專案
	Ctrl+shift+Y 呼出控制臺，在控制臺終端輸入 npm install 添加包依賴；
	同樣在終端執行 npm run dev 代表開始運行專案，這條命令會自動在瀏覽器上運行專案；
	npm install 如下圖所示：

 npm run dev 如下圖所示：

6. 點擊 (ctrl+點擊) 網址 http://localhost:8080 ,運行結果如下：