一、下載並安裝vscode
下載地址：https://code.visualstudio.com/
安裝略...
二、配置vscode
1.設置中文，Ctrl+Alt+P 選擇Configure Display language，選擇中文簡體安裝后重啟vscode
2.vscode終端由默認的powershell改為git bash
文件 -> 首選項 -> 配置，搜索shell:Window，點擊在setting.json中編輯
新增配置，注意前提是已經先裝好Git，按Ctrl+~ 切換即可調出終端。如果還是powershell刪除再重新添加終端
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe"
三、vscode配置vue插件相關
1、安裝插件
| 插件名 | 參考版本 | 備注 |
|---|---|---|
| Vetur | 0.23.0 | |
| Prettier | 3.20.0 | 代碼格式化 |
| ESLint | 2.1.1 |
2、vscode vue設置格式化，文件 -> 首選項-> 設置 -> 在setting.json中編譯，復制以下代碼，保存即可。
功能：按Ctrl+s后自動格式化代碼，用'代替"，帶換行沒有分號等等
{
"workbench.colorTheme": "One Monokai",
"editor.fontLigatures": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"files.exclude": {
"node_modules/": true
},
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
},
"editor.detectIndentation": false,
"editor.tabSize": 2,
"editor.formatOnSave": true,
"eslint.autoFixOnSave": true,
"prettier.semi": true,
"prettier.singleQuote": true,
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
}
},
"stylusSupremacy.insertColons": false, // 是否插入冒號
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括號
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行
"stylusSupremacy.insertNewLineAroundBlocks": false,
"diffEditor.ignoreTrimWhitespace": false, // 兩個選擇器中是否換行
"window.zoomLevel": 0, // 兩個選擇器中是否換行
/** Easy Sass 插件 **/
"easysass.formats": [
{
"format": "expanded", // 沒有縮進的、擴展的css代碼
"extension": ".css"
}
],
"easysass.targetDir": "./css/",
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}, // 自定義css輸出文件路徑
"powermode.enabled": true,
"powermode.presets": "flames",
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"workbench.iconTheme": "vscode-icons"
}
四、安裝nodejs
下載地址：https://nodejs.org/en/
安裝完成后檢查nodejs的版本：node -v
在磁盤找創建一個文件夾用來專門存放后面需要用的npm包緩存，如 D:\nodejs下分別創建cache和global文件夾
npm配置緩存全局緩存（在cmd命令下執行)
npm config set prefix "D:\nodejs\global"
npm config set cache "D:\nodejs\cache"
設置國內鏡像，加速npm包
npm config set registry=http://registry.npm.taobao.org
更新npm包
npm -v
npm install npm -g
系統環境變量Path加入global路徑，如 D:\nodejs\global
先安裝cnpm，安裝完成后cnpm -v查看是否安裝成功，可能需要重啟系統
npm install express -g
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝vue-cli 3.0的版本，安裝完成后在global文件可以看到對應的包
cnpm install -g @vue/cli
然后記得重啟下電腦。
五、常見問題解決
1.npm run的時候出現報錯：Module build failed (from ./node_modules/sass-loader/lib/loader.js):
問題原因是node-sass沒安裝好，需要重新安裝，安裝過程中有一步要從github.com下載東西，國內有時候github打不開，需要梯子！！
npm install node-sass --registry=https://registry.npm.taobao.org
2.npm run的時候出現報錯：SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents)
重新安裝一下再試試npm run dev
npm install fsevents --registry=https://registry.npm.taobao.org
npm install fsevents@1.2.9 --registry=https://registry.npm.taobao.org
3.vscode不顯示npm腳本
右鍵項目文件夾，勾選截圖
