文章目录
**Vue 项目常用插件介绍****1. 状态管理****1.1 Vuex（Vue 2）****安装****使用****在组件中使用**
**1.2 Pinia（Vue 3 推荐）****安装****使用****在组件中使用**
**2. 路由管理****Vue Router****安装****配置****在 Vue 组件中使用**
**3. UI 组件库****3.1 Element Plus（Vue 3）****安装****使用****示例**
**3.2 Vuetify****安装****使用****示例**
**4. HTTP 请求****Axios****安装****配置全局 Axios****在 Vue 组件中使用**
**5. 动画****VueUse****安装****使用**
**6. 本地存储****Vuex-Persistedstate****安装****使用**
**7. 表单验证****VeeValidate****安装****使用**
Vue 生态系统中还有很多优秀的插件，以上是最常用的一些插件，涵盖状态管理、路由、UI 组件库、HTTP 请求、动画、本地存储、表单验证等核心功能。 
**Vue 2 vs Vue 3 全面对比****1. 语法与 API****Vue 2（Options API）****Vue 3（Composition API）**
**2. 响应式系统****Vue 2（Object.defineProperty）****Vue 3（Proxy）**
**3. 组件注册****Vue 2****Vue 3**
**4. 生命周期钩子****Vue 2****Vue 3**
**5. 事件处理****Vue 2****Vue 3**
**6. v-model 语法****Vue 2****Vue 3**
**7. 依赖注入****Vue 2****Vue 3**
**8. 其他改进****总结**
Vue 生态系统中有许多强大的插件可以提高开发效率，增强项目功能。以下是 Vue 项目常用的插件，按不同类别详细介绍，并附带代码示例。
Vue 项目常用插件介绍
1. 状态管理
1.1 Vuex（Vue 2）
Vuex 是 Vue 2 官方的状态管理库，主要用于管理全局状态。
安装
npm install vuex@3 --save
使用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
},
actions: {
increment({ commit }) {
commit('increment')
}
}
})
export default store
在组件中使用
Count: {{ count }}
1.2 Pinia（Vue 3 推荐）
Pinia 是 Vue 3 官方推荐的状态管理库，比 Vuex 更轻量、易用。
安装
npm install pinia
使用
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0
}),
actions: {
increment() {
this.count++
}
}
})
在组件中使用
Count: {{ counter.count }}
2. 路由管理
Vue Router
Vue Router 是 Vue 官方的路由管理库，支持单页应用（SPA）的路由配置。
安装
npm install vue-router
配置
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = new VueRouter({
mode: 'history',
routes
})
export default router
在 Vue 组件中使用
3. UI 组件库
3.1 Element Plus（Vue 3）
Element Plus 是基于 Vue 3 的 UI 组件库。
安装
npm install element-plus
使用
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
示例
3.2 Vuetify
Vuetify 是一个基于 Material Design 的 Vue 组件库，适用于 Vue 2 和 Vue 3。
安装
npm install vuetify
使用
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
export default new Vuetify({})
示例
4. HTTP 请求
Axios
Axios 是一个基于 Promise 的 HTTP 客户端，可用于处理 API 请求。
安装
npm install axios
配置全局 Axios
import axios from 'axios'
const api = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000
})
export default api
在 Vue 组件中使用
加载中...
{{ data }}
5. 动画
VueUse
VueUse 提供了很多 Vue 3 的常用工具，如动画、状态管理等。
安装
npm install @vueuse/core
使用
鼠标位置: {{ x }}, {{ y }}
6. 本地存储
Vuex-Persistedstate
Vuex-Persistedstate 允许 Vuex 数据持久化存储到 localStorage 或 sessionStorage。
安装
npm install vuex-persistedstate
使用
import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
state: {
user: null
},
mutations: {
setUser(state, user) {
state.user = user
}
},
plugins: [createPersistedState()]
})
7. 表单验证
VeeValidate
VeeValidate 是 Vue 的表单验证库。
安装
npm install vee-validate
使用
Vue 生态系统中还有很多优秀的插件，以上是最常用的一些插件，涵盖状态管理、路由、UI 组件库、HTTP 请求、动画、本地存储、表单验证等核心功能。
Vue 2 和 Vue 3 在多个方面有较大的区别，包括响应式系统、Composition API、性能优化、TypeScript 支持等。下面将从多个维度全面对比 Vue 2 和 Vue 3，并提供代码示例。
Vue 2 vs Vue 3 全面对比
1. 语法与 API
Vue 3 引入了 Composition API，而 Vue 2 主要基于 Options API。
Vue 2（Options API）
计数: {{ count }}
Vue 3（Composition API）
计数: {{ count }}
✅ 对比分析：
Vue 3 使用 setup() 取代 Vue 2 的 data、methods，代码更清晰。Vue 3 的 ref 需要 .value 访问数据。
2. 响应式系统
Vue 3 采用 Proxy 替代 Vue 2 的 Object.defineProperty 进行数据劫持，响应式能力更强。
Vue 2（Object.defineProperty）
const data = {
count: 0
}
Object.defineProperty(data, 'count', {
get() {
console.log('获取 count')
return value
},
set(newValue) {
console.log('设置 count', newValue)
value = newValue
}
})
Vue 3（Proxy）
const data = new Proxy(
{ count: 0 },
{
get(target, key) {
console.log(`获取 ${key}`)
return target[key]
},
set(target, key, value) {
console.log(`设置 ${key} 为 ${value}`)
target[key] = value
return true
}
}
)
✅ 对比分析：
Vue 2 需要遍历对象属性，不能监听新增属性。Vue 3 直接代理整个对象，性能更优，支持动态属性。
3. 组件注册
Vue 3 提供了 defineComponent，使 TypeScript 友好性更强。
Vue 2
import Vue from 'vue'
import MyComponent from './MyComponent.vue'
Vue.component('MyComponent', MyComponent)
Vue 3
import { createApp } from 'vue'
import MyComponent from './MyComponent.vue'
const app = createApp({})
app.component('MyComponent', MyComponent)
app.mount('#app')
✅ 对比分析：
Vue 3 通过 createApp 创建应用实例，避免全局污染。
4. 生命周期钩子
Vue 3 采用更直观的 onMounted 代替 mounted，支持 setup() 内使用。
Vue 2
export default {
created() {
console.log('组件已创建')
},
mounted() {
console.log('组件已挂载')
}
}
Vue 3
import { onMounted } from 'vue'
export default {
setup() {
onMounted(() => {
console.log('组件已挂载')
})
}
}
✅ 对比分析：
Vue 3 生命周期钩子更易组合复用。
5. 事件处理
Vue 3 的 emits 机制更加严格，避免无效事件。
Vue 2
Vue 3
✅ 对比分析：
Vue 3 明确声明 emits，提升可读性和维护性。
6. v-model 语法
Vue 3 支持多个 v-model 绑定。
Vue 2
export default {
props: ['value'],
methods: {
updateValue(val) {
this.$emit('input', val)
}
}
}
Vue 3
export default {
props: ['title', 'content'],
emits: ['update:title', 'update:content']
}
✅ 对比分析：
Vue 3 允许多个 v-model 绑定，逻辑更清晰。
7. 依赖注入
Vue 3 provide/inject 可响应式更新。
Vue 2
export default {
provide() {
return { theme: 'dark' }
}
}
Vue 3
import { provide, ref } from 'vue'
export default {
setup() {
const theme = ref('dark')
provide('theme', theme)
return { theme }
}
}
✅ 对比分析：
Vue 3 provide/inject 允许动态响应更新。
8. 其他改进
特性Vue 2Vue 3兼容性Vue 2 代码不可直接用Vue 3 兼容 Vue 2 APITree-Shaking不支持支持按需加载TypeScript支持但不友好内置 TS 支持片段 (Fragments)不支持允许多个根节点Suspense不支持支持异步组件更优的处理
总结
对比项Vue 2Vue 3响应式系统Object.definePropertyProxyAPI 风格Options APIComposition API性能优化不支持 Tree-shaking代码体积更小TypeScript 支持一般内置支持事件管理$emit 无严格限制emits 需显式声明v-model只能绑定一个可绑定多个
Vue 3 提供了更好的性能、Composition API、TypeScript 友好性，并提升了响应式能力。如果是新项目，建议直接使用 Vue 3；但如果是老项目，Vue 2 依然有很多支持。