Vuetify BootCamp

Appearance

開發環境 ​

必要軟體 ​

選用：

  • yarn：npm install --global yarn

VSCode Extension ​

安裝套件的方式： ​

  • 在 VSCode 裡面 ctrl-shift-x 搜尋安裝。
  • 從 Marketplace 搜尋安裝。

工作坊懶人包 ​

套件名稱說明安裝連結
Vue Volar extension Pack必要套件點我
Vue 3 Support - All In One必要套件點我
Vue VSCode Snippets必要套件點我
Prettier必要套件點我
TypeScript Vue Plugin (Volar)Typescript 開發 Vue 專案用點我
vscode-icons讓檔案有漂亮的 icon點我
indent-rainbow為縮排上色點我
Auto Import自動導入相依性點我

VSCode settings.json ​

  1. Ctrl-Shift-P 輸入 json 搜尋，選擇 Preference: Open User Settings (JSON)
  2. 在第一層加入 lint 設置
    js
    "files.autoSave": "onWindowChange", // 切換視窗自動存檔
"editor.formatOnSave": true, // 存檔時自動 format
"vetur.validation.template": false, // 關閉 vetur 驗證 (或直接解除安裝 vetur)
"editor.defaultFormatter": "esbenp.prettier-vscode" // 預設 format 使用 prettier
    "files.autoSave": "onWindowChange", // 切換視窗自動存檔
"editor.formatOnSave": true, // 存檔時自動 format
"vetur.validation.template": false, // 關閉 vetur 驗證 (或直接解除安裝 vetur)
"editor.defaultFormatter": "esbenp.prettier-vscode" // 預設 format 使用 prettier
  3. 設置 vscode 排除追蹤檔案
    js
    /* 
    node_module、.git 等等資料夾底下有非常多不需要追蹤的檔案，
    如果不排除於追蹤清單外，vscode會因為追蹤(watch)的檔案數量檔案達到飽和，
    無法對正在編輯的檔案進行追蹤、執行hot reload。
*/
"files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/*/**": true
},
    /* 
    node_module、.git 等等資料夾底下有非常多不需要追蹤的檔案，
    如果不排除於追蹤清單外，vscode會因為追蹤(watch)的檔案數量檔案達到飽和，
    無法對正在編輯的檔案進行追蹤、執行hot reload。
*/
"files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/*/**": true
},

注意事項 ​

請務必解除安裝 Vetur

同步帳號的擴充功能與設置 ​

點左下角 (Sign In to Sync Settings)，登入後開啟同步設置 。
目前接受 GitHub、Microsoft 帳號。
在新的電腦登入帳號後就直接可以使用環境，有點像手機 App Store 的概念.

Vue DevTools ​

Vue DevTools 是 Browser Extension

瀏覽器安裝連結
chrome安裝
edge安裝
firefox安裝

NVM ​

NVM 是用於 Node.js 版本控制的工具。它允許使用者安裝、切換和卸載不同版本的 Node.js。如果要維護舊專案，可以使用 NVM 切換回較舊版本的 Node.js。

安裝方式 ​

原始 nvm 專案只適用於 Linux/Mac，windows 需要下載另外的專案 nvm windows安裝。 安裝其他 node 版本

bash
nvm install node # "node" is an alias for the latest version
nvm install 18.14.0 # or 16.3.0, 12.22.1, etc
nvm install node # "node" is an alias for the latest version
nvm install 18.14.0 # or 16.3.0, 12.22.1, etc

查看 node.js 安裝清單，並列出當前環境版本：

bash
nvm list

  * 18.14.0 (Currently using 64-bit executable)
    16.19.1
nvm list

  * 18.14.0 (Currently using 64-bit executable)
    16.19.1

切換 node.js 版本：

bash
nvm use
nvm use

Reference ​