Vue開發常用庫（含npm安裝命令）

核心生態系統：

• Vue Router - 官方路由管理器

  npm install vue-router@4  # Vue 3
  npm install vue-router@3  # Vue 2
  

• Pinia - 新一代狀態管理庫

  npm install pinia
  

• Vuex - 傳統狀態管理庫

  npm install vuex@next     # Vue 3
  npm install vuex          # Vue 2
  

UI組件庫：

• Element Plus - Vue 3桌面端組件庫

  npm install element-plus
  # 圖標庫
  npm install @element-plus/icons-vue
  

• Ant Design Vue - Ant Design的Vue版本

  npm install ant-design-vue@next  # Vue 3
  npm install ant-design-vue       # Vue 2
  

• Quasar - 全平臺Vue框架

  npm install -g @quasar/cli
  npm install quasar @quasar/extras
  

• Vuetify - Material Design組件庫

  npm install vuetify@next         # Vue 3
  npm install vuetify              # Vue 2
  

• Naive UI - 輕量級Vue 3組件庫

  npm install naive-ui
  

開發工具：

• Vite - 快速構建工具

  npm create vue@latest my-project  # 使用create-vue腳手架
  # 或者
  npm create vite@latest my-project -- --template vue
  

• Vue CLI - Vue腳手架工具

  npm install -g @vue/cli
  vue create my-project
  

• Nuxt.js - 服務端渲染框架

  npx nuxi@latest init my-nuxt-app
  # 或者
  npm install nuxt@latest
  

實用庫：

• VueUse - 組合式API工具集

  npm install @vueuse/core
  npm install @vueuse/components  # 可選組件
  

• Vue-i18n - 國際化解決方案

  npm install vue-i18n@9          # Vue 3
  npm install vue-i18n@8          # Vue 2
  

HTTP請求：

• Axios - HTTP客戶端

  npm install axios
  

工具庫：

• Lodash - 實用工具庫

  npm install lodash
  npm install @types/lodash        # TypeScript類型定義
  

• Day.js - 輕量級日期處理

  npm install dayjs
  

• UUID - 唯一標識符生成

  npm install uuid
  npm install @types/uuid          # TypeScript類型定義
  

VSCode擴展安裝

VSCode擴展通過擴展商店安裝，以下是擴展ID（可用于命令行安裝）：

# 使用code命令安裝擴展
code --install-extension Vue.volar                    # Vue 3官方擴展
code --install-extension octref.vetur                 # Vue 2擴展
code --install-extension hollowtree.vue-snippets      # Vue代碼片段
code --install-extension formulahendry.auto-rename-tag # 自動重命名標簽
code --install-extension esbenp.prettier-vscode       # Prettier格式化
code --install-extension dbaeumer.vscode-eslint       # ESLint
code --install-extension bradlc.vscode-tailwindcss    # Tailwind CSS
code --install-extension ms-ceintl.vscode-language-pack-zh-hans # 中文包

常用開發依賴：

# TypeScript支持
npm install -D typescript @vue/tsconfig# 代碼規范
npm install -D eslint prettier @vue/eslint-config-prettier# 構建工具插件
npm install -D @vitejs/plugin-vue  # Vite Vue插件
npm install -D unplugin-auto-import unplugin-vue-components  # 自動導入