夜雨聆风
9 个 Vue 插件,让你的项目开发效率翻倍!
一个分享 技术 | 生活 | 社会| 科技| 经济 | 情感 的前端爱好者！(联系V: HC106888888)
说明：文中默认 Vue3 项目（基于 Vite），Vue2 项目仅需微调安装命令 / 使用方式，会单独标注差异。
一、基础核心类：Vue 项目的 “骨架插件”
1. vue-router：Vue 官方路由插件
Vue3 + Vitenpm install vue-router@4 --save# Vue2npm install vue-router@3 --save
极简使用
（1）新建路由文件src/router/index.js：
import { createRouter, createWebHistory } from 'vue-router'// 引入页面组件import Home from '@/views/Home.vue'import About from '@/views/About.vue'const routes = [{ path: '/', name: 'Home', component: Home },{ path: '/about', name: 'About', component: About }]const router = createRouter({history: createWebHistory(), // Vue3推荐的history模式routes})export default router
（2）全局注册（src/main.js）：
import { createApp } from 'vue'import App from './App.vue'import router from './router'createApp(App).use(router).mount('#app')
<!-- 跳转链接 --><router-linkto="/">首页</router-link><router-linkto="/about">关于我们</router-link><!-- 路由渲染容器 --><router-view></router-view>
2. Pinia：Vue 官方推荐状态管理库
安装
npm install pinia --save极简使用
(1) 全局注册（src/main.js）：
import { createApp } from 'vue'import App from './App.vue'import { createPinia } from 'pinia'const pinia = createPinia()createApp(App).use(pinia).mount('#app')
import { defineStore } from 'pinia'// 定义并导出仓库，唯一标识为counterexport const useCounterStore = defineStore('counter', {state: () => ({ count: 0 }), // 状态数据actions: {// 方法修改状态（支持同步/异步）increment() {this.count++}},getters: {// 计算属性doubleCount: (state) => state.count * 2}})
<template><div>{{ counter.count }} → {{ counter.doubleCount }}</div><button @click="counter.increment()">加1</button></template><scriptsetup>import { useCounterStore } from '@/stores/counter'const counter = useCounterStore()</script>
3. Vuex：经典状态管理（兼容 Vue2）
安装
Vue2npm install vuex@3 --save
二、UI 组件类：快速搭建页面，告别重复写样式
4. Element Plus：Vue3 通用 PC 端 UI 库
安装
完整安装npm install element-plus --save# 按需引入（推荐，减小打包体积）：需安装unplugin-vue-componentsnpm install element-plus unplugin-vue-components --save
极简使用（完整引入，新手友好）
// src/main.jsimport { createApp } from 'vue'import App from './App.vue'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css' // 引入样式createApp(App).use(ElementPlus).mount('#app')
组件中直接使用，无需单独引入：
<template><el-buttontype="primary">主要按钮</el-button><el-inputv-model="input"placeholder="请输入内容" /></template><scriptsetup>import { ref } from 'vue'const input = ref('')</script>
按需引入：配置 Vite 后，使用组件时无需手动引入和导入样式，插件会自动按需加载，适合生产环境。
5. Vant 4：Vue3 移动端 UI 库
安装
npm install vant --save按需引入插件npm install unplugin-vue-components unplugin-auto-import --save-dev
极简使用：配置 Vite 后可按需引入，直接使用组件：
<template><van-buttontype="primary">移动端按钮</van-button><van-celltitle="单元格"value="内容" /></template>
6. Naive UI：Vue3 高颜值轻量 UI 库
安装
npm install naive-ui --save极简使用：组件需手动引入（按需加载更友好）：
<template><n-buttontype="primary">Naive按钮</n-button></template><scriptsetup>import { NButton } from 'naive-ui'</script>
三、网络请求类：优雅处理接口请求
7. vue-axios：Vue 适配的 Axios 插件
安装
先安装axios，再安装vue-axiosnpm install axios vue-axios --save
极简使用
(1) 全局注册并封装（src/main.js）：
import { createApp } from 'vue'import App from './App.vue'import axios from 'axios'import VueAxios from 'vue-axios'const app = createApp(App)app.use(VueAxios, axios)// 配置请求基准地址axios.defaults.baseURL = 'https://api.example.com'// 请求拦截器：添加Tokenaxios.interceptors.request.use(config => {config.headers.token = localStorage.getItem('token') || ''return config})// 响应拦截器：统一处理错误axios.interceptors.response.use(res => res.data,err => {console.error('请求错误：', err.message)return Promise.reject(err)})app.mount('#app')
(2) 组件中使用：
<scriptsetup>import { getCurrentInstance } from 'vue'// Vue3组合式API中获取全局实例const { proxy } = getCurrentInstance()// 发起GET请求const getList = async () => {const res = await proxy.$axios.get('/api/list')console.log(res)}// 发起POST请求proxy.$axios.post('/api/add', { name: 'Vue插件' })</script>
8. VueUse：Vue 官方工具集（含网络 / 工具等能力）
安装
npm install @vueuse/core --save<template><div>{{ data }}</div></template><scriptsetup>import { useFetch } from '@vueuse/core'import { useLocalStorage } from '@vueuse/core'// 网络请求：替代axios简单请求，自动处理加载/错误const { data, isLoading, error } = useFetch('https://api.example.com/api/list').get()// 本地存储：自动序列化/反序列化，响应式更新const userInfo = useLocalStorage('userInfo', { name: 'Vue', age: 3 })userInfo.value.age = 4 // 直接修改，localStorage自动更新</script>
四、工具辅助类：解决高频小需求，提升开发体验
9. vue-ls：Vue 适配的本地存储插件
安装
npm install vue-ls --save极简使用
import { createApp } from 'vue'import App from './App.vue'import Storage from 'vue-ls'// 配置项const options = {namespace: 'vue_', // 本地存储key的命名空间storage: 'local' // 存储类型：local/session}createApp(App).use(Storage, options).mount('#app')
<scriptsetup>import { getCurrentInstance } from 'vue'const { proxy } = getCurrentInstance()// 设置存储：key, value, 过期时间（秒）proxy.$ls.set('name', 'Vue插件', 60 * 60)// 获取存储console.log(proxy.$ls.get('name'))// 删除存储proxy.$ls.remove('name')// 清空所有本命名空间的存储proxy.$ls.clear()</script>
五、插件使用小技巧（新手必看）
按需引入：除了基础核心插件，UI 库、工具库尽量按需引入（如 Element Plus、Vant），可大幅减小项目打包体积，提升页面加载速度；
版本匹配：Vue2 和 Vue3 的插件版本差异较大，安装前务必确认插件适配的 Vue 版本，避免出现兼容问题；
全局注册 vs 局部引入：核心插件（vue-router、Pinia）全局注册，单个组件的专用工具（如 VueUse 的某个函数）局部引入，保持项目结构清晰；
封装二次开发：网络请求、本地存储等插件，建议在全局注册时做二次封装（如统一请求头、统一存储命名），避免每个组件重复写相同逻辑。
