1 開發vue需要基礎環境

node + vue + vscode

2 安裝node.js ,下載地址：https://nodejs.org/download/release/latest-v14.x/node-v14.15.1-x64.msi

安裝完後測試 npm node 是否安裝成功

node -v
npm -v

3 改變nodeJS原有的環境變數,即改變nodeJS全域性安裝模組的預設目錄, 便於管理

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache
 
"

4 安裝 cnpm， 因為眾所周知的原因npm有時候安裝失敗，使用 npm 的國內映象 cnpm 比較方便

npm install -g cnpm --registry=http://registry.npm.taobao.org

4.1 在系統變數 path 裡設定 的路徑, 因為cnpm會被安裝到D:\Program Files\nodejs\node_global下,以便 快速執行cnpm

檢查cnpm是否安裝

cnpm -v

5 安裝 vue-cli

npm install -g vue-cli

5.1 檢查 vue 版本

vue -V

6 初始化 vue專案

vue init webpack project

6.1 安裝依賴並執行

cd peoject
npm install
npm run dev

7 vscode 環境配置，安裝瞭如下外掛

8 配置：檔案 -》 首選項 -》 設定

{
  "window.zoomLevel": 0,
  "files.autoSave": "off",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "git.confirmSync": false,
  "editor.minimap.enabled": true,
  "workbench.startupEditor": "
 
newUntitledFile",
  "git.autofetch": true,
  "eslint.validate": [
      "javascript",
      "javascriptreact",
      "vue"
  ],  
  "vetur.validation.template": true,
  "vetur.format.enable": true,
  "vetur.format.defaultFormatter.js":"vscode-typescript",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "workbench.settings.editor": "json",
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[javascript]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  }
}

9 VScode 常用快捷鍵

直接刪除某一行：shift+delete或者ctrl+shift+k 
多行游標選擇：alt+滑鼠左鍵 
自動生成html結構和meta宣告：首先輸入“!”，然後按tab鍵 
標籤自動補全：tab鍵 
摺疊所有程式碼：ctrl+k、ctrl+0 
拆分編輯器：ctrl+\ 查詢框右邊的3個引數分別為：區分大小寫，全字匹配，使用正則 
跳轉行號：ctrl+G 
新增函式註釋：在函式上方輸入“/**”，然後點選enter 
格式化：alt+shift+f 
註釋：ctrl+/ 
全部儲存：ctrl+k, 然後只按s一個鍵 
向上移動一行：alt+↑ 
向下移動一行：alt+↓ 
向上複製一行：alt+shift+↑ 
向下複製一行：alt+shift+↓ 
查詢：ctrl+F 
替換：ctrl+H 
資料夾中查詢：ctrl+shift+f