常用插件推荐

Vue 生态系统中有大量优秀的插件，本节介绍一些最常用的插件及其使用场景。

官方插件

Vue Router

路由管理器，构建单页应用必备。

npm install vue-router@3

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/user/:id', component: User }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

适用场景：单页应用、多页面导航、路由守卫

Vuex

状态管理模式，集中管理应用状态。

npm install vuex@3

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    user: null,
    cart: []
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    }
  },
  actions: {
    async fetchUser({ commit }) {
      const user = await api.getUser()
      commit('setUser', user)
    }
  }
})

适用场景：大型应用、跨组件状态共享、复杂状态管理

Vue Devtools

浏览器开发者工具扩展，调试 Vue 应用必备。

功能：

• 组件树查看
• Vuex 状态追踪
• 事件监听
• 性能分析

安装：Chrome/Firefox 扩展商店搜索 Vue Devtools

UI 组件库

Element UI

饿了么出品的 Vue 2.0 UI 组件库。

npm install element-ui

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

特点：

• 组件丰富，文档完善
• 中后台场景优化
• 支持主题定制

适用场景：中后台系统、企业级应用

Vuetify

基于 Material Design 的 UI 组件库。

npm install vuetify@2

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

new Vue({
  vuetify: new Vuetify()
})

特点：

• Material Design 风格
• 组件数量多
• 响应式设计

适用场景：移动端应用、Material 风格项目

Ant Design Vue

蚂蚁金服出品的 UI 组件库。

npm install ant-design-vue@1

import Vue from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

Vue.use(Antd)

特点：

• 企业级 UI 设计
• 组件质量高
• 国际化支持

适用场景：企业级应用、中后台系统

Vant

有赞出品的移动端组件库。

npm install vant@2

import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant)

特点：

• 移动端优化
• 轻量级
• 组件丰富

适用场景：移动端 H5、小程序

HTTP 请求

Axios

基于 Promise 的 HTTP 客户端。

npm install axios vue-axios

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

Vue.axios.get('/api/users').then(response => {
  console.log(response.data)
})

特点：

• 支持 Promise
• 拦截器
• 取消请求
• 自动转换 JSON

Vue Resource

Vue 官方推荐的 HTTP 库（已不推荐使用）。

npm install vue-resource

工具类

Lodash

JavaScript 实用工具库。

npm install lodash

import _ from 'lodash'

const debouncedSearch = _.debounce(search, 300)
const deepClone = _.cloneDeep(obj)

Moment.js / Day.js

日期处理库。

npm install dayjs

import dayjs from 'dayjs'

const formatted = dayjs().format('YYYY-MM-DD HH:mm:ss')

Vue-ls

Vue 本地存储插件。

npm install vue-ls

import Vue from 'vue'
import VueLocalStorage from 'vue-ls'

Vue.use(VueLocalStorage, {
  namespace: 'app_'
})

this.$ls.set('user', { name: '张三' })
const user = this.$ls.get('user')

表单验证

VeeValidate

Vue 表单验证库。

npm install vee-validate@3

import { ValidationProvider, extend } from 'vee-validate'
import { required, email } from 'vee-validate/dist/rules'

extend('required', required)
extend('email', email)

Vue.component('ValidationProvider', ValidationProvider)

<ValidationProvider rules="required|email" v-slot="{ errors }">
  <input v-model="email" type="email">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

Vuelidate

简洁的模型验证库。

npm install vuelidate@0.7

import { required, email, minLength } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      form: {
        email: '',
        password: ''
      }
    }
  },
  validations: {
    form: {
      email: { required, email },
      password: { required, minLength: minLength(6) }
    }
  }
}

动画

Vue Transition

Vue 内置过渡系统，配合 CSS 动画。

Animate.css

CSS 动画库。

npm install animate.css

import 'animate.css'

<transition
  enter-active-class="animate__animated animate__fadeIn"
  leave-active-class="animate__animated animate__fadeOut"
>
  <div v-if="show">内容</div>
</transition>

图表

ECharts

百度开源的图表库。

npm install echarts vue-echarts

import Vue from 'vue'
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'

Vue.component('v-chart', ECharts)

<v-chart :options="chartOptions" style="width: 100%; height: 400px;"></v-chart>

Chart.js

简洁的图表库。

npm install chart.js vue-chartjs

国际化

Vue I18n

Vue 国际化插件。

npm install vue-i18n@8

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const messages = {
  en: {
    hello: 'Hello'
  },
  zh: {
    hello: '你好'
  }
}

const i18n = new VueI18n({
  locale: 'zh',
  messages
})

new Vue({ i18n })

<p>{{ $t('hello') }}</p>

拖拽

Vue.Draggable

基于 Sortable.js 的拖拽组件。

npm install vuedraggable@2

import draggable from 'vuedraggable'

export default {
  components: { draggable }
}

<draggable v-model="list">
  <div v-for="item in list" :key="item.id">{{ item.name }}</div>
</draggable>

虚拟滚动

vue-virtual-scroller

大数据列表虚拟滚动。

npm install vue-virtual-scroller@1

import Vue from 'vue'
import VueVirtualScroller from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

Vue.use(VueVirtualScroller)

<RecycleScroller
  :items="items"
  :item-size="50"
  key-field="id"
>
  <template v-slot="{ item }">
    <div>{{ item.name }}</div>
  </template>
</RecycleScroller>

插件选择建议

小结

常用插件要点：

1. 官方插件优先：Vue Router、Vuex、Vue Devtools
2. UI 库选择：根据项目类型选择合适的组件库
3. 工具类插件：提升开发效率
4. 按需引入：减少打包体积
5. 关注维护状态：选择活跃维护的插件