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 # 自动导入