Vue.js 项目开发常用基础依赖包
核心依赖包
1. Vue 核心库
npm install --save vue
- Vue.js 框架的核心库，提供响应式数据绑定、组件系统等基础功能
- Vue 2 和 Vue 3 在API和实现上有较大差异，Vue 3采用了Composition API
2. Vue CLI / Vite
# Vue CLI (Vue 2/3 通用)
npm install -g @vue/cli
# 或 Vite (Vue 3 推荐)
npm create vite@latest my-vue-app -- --template vue
- Vue CLI：官方脚手架工具，提供预设项目结构、插件系统、开发服务器和打包工具
- Vite：新一代前端构建工具，开发时启动快速，热更新性能优秀，Vue 3项目推荐使用
路由管理
3. Vue Router
npm install --save vue-router@4 # Vue 3 版本
# 或
npm install --save vue-router@3 # Vue 2 版本
- Vue官方路由管理器，用于构建单页应用的路由系统
- 支持嵌套路由、命名视图、导航守卫等功能
- 示例导入：
import { createRouter, createWebHistory } from 'vue-router'
状态管理
4. Vuex (Vue 2 时代主流)
npm install --save vuex@4 # Vue 3 版本
# 或
npm install --save vuex@3 # Vue 2 版本
- Vue官方状态管理库，用于集中管理应用的状态
- 适用于中大型应用的复杂状态管理需求
5. Pinia (Vue 3 时代推荐)
npm install --save pinia
- 尤雨溪推荐的新一代状态管理库，替代Vuex
- API设计简洁，类型支持完善，支持Vue DevTools
- 示例导入：
import { defineStore } from 'pinia'
网络请求
6. Axios
npm install --save axios
- 基于Promise的HTTP客户端，用于浏览器和Node.js
- 支持请求/响应拦截器、请求取消、请求超时等功能
7. es6-promise
npm install --save es6-promise
- 为低版本浏览器提供ES6 Promise支持，确保Axios等基于Promise的库可以正常工作
样式处理
8. Less / Sass
npm install --save-dev less less-loader
# 或
npm install --save-dev sass sass-loader
- CSS预处理器，提供变量、嵌套、混入等高级功能
- 可以使用@vue/cli或Vite的配置来启用这些预处理器
数据处理
9. js-cookie
npm install --save js-cookie
- 轻量级的Cookie操作库，简化Cookie的读写和删除操作
实用工具库
10. VueUse
npm install --save @vueuse/core
- Vue生态中的实用工具库，提供大量开箱即用的功能
- 包括浏览器API封装、响应式工具、动画效果等
11. TanStack Query (Vue版本)
- React Query的Vue版本，简化数据请求和状态管理
- 提供缓存、重试、背景更新等高级功能
UI组件库
12. Element Plus (Vue 3)
npm install --save element-plus
- 基于Vue 3的桌面端UI组件库，功能丰富，文档完善
13. Ant Design Vue
npm install --save ant-design-vue
- Ant Design的Vue实现，企业级UI设计语言
14. Vant (移动端)
npm install --save vant
- 轻量、可靠的移动端Vue组件库
15. Headless组件库
- Reka UI：帮助开发者构建高度可定制的无样式组件
- Shadcn-vue：提供优雅的设计系统
构建和开发工具
16. Webpack
npm install --save-dev webpack webpack-cli
- 现代JavaScript应用的静态模块打包器
- Vue CLI默认使用Webpack作为构建工具
17. ESLint
npm install --save-dev eslint eslint-plugin-vue
- JavaScript代码检查工具，确保代码质量和一致性
- 与Vue结合使用可以检查Vue组件的语法和最佳实践
安装依赖的基本命令
安装生产依赖
npm install --save package-name # 简写: npm i package-name
- 安装的包会记录在package.json的dependencies中
- 这些包会被包含在最终的构建产物中
安装开发依赖
npm install --save-dev package-name # 简写: npm i -D package-name
- 安装的包会记录在package.json的devDependencies中
- 这些包只在开发环境中使用，不会被包含在最终的构建产物中
根据项目需求选择依赖
根据项目的具体需求，你可以选择合适的依赖包：
- 小型项目：Vue核心库 + Vue Router + Axios
- 中型项目：添加Pinia/Vuex状态管理 + UI组件库
- 大型项目：添加构建工具优化、代码规范工具、测试框架等
Vue生态系统非常丰富，还有许多其他优秀的库可以满足各种特定需求，如动画库、图表库、表单验证库等，可以根据项目需要进一步探索和选择。
