Vue.js 生态系统中有许多优秀的第三方库，它们扩展了 Vue 的功能，帮助开发者更高效地构建应用。

状态管理

Vuex

Vuex 是 Vue.js 的官方状态管理库，适用于构建大型单页应用。

安装：

npm install vuex

使用：

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')
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
})

export default store

Pinia

Pinia 是 Vue 3 的下一代状态管理库，但也支持 Vue 2。

安装：

npm install pinia

使用：

import { createPinia, defineStore } from 'pinia'

const useMainStore = defineStore('main', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

路由管理

Vue Router

Vue Router 是 Vue.js 官方的路由管理器。

安装：

npm install vue-router

使用：

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

Vue.use(VueRouter)

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

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

export default router

HTTP 客户端

Axios

Axios 是一个基于 Promise 的 HTTP 客户端，可用于浏览器和 node.js。

安装：

npm install axios

使用：

import axios from 'axios'

// 创建实例
const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
})

// 请求拦截器
api.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    return config
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 响应拦截器
api.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response
  },
  error => {
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

export default api

Vue Resource

Vue Resource 是 Vue.js 的 HTTP 客端（已停止维护，推荐使用 Axios）。

UI 组件库

Element UI

Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

安装：

npm install element-ui

使用：

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

Vue.use(ElementUI)

// 按需引入
import { Button, Select } from 'element-ui'
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)

Vuetify

Vuetify 是一个基于 Vue.js 的 Material Design 组件框架。

安装：

npm install vuetify

使用：

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl' // 或使用 sass

Vue.use(Vuetify, {
  iconfont: 'md' // 'md', 'fa', 'fa4', 'fa5', 'mdi'
})

Ant Design Vue

Ant Design Vue 是 Ant Design 的 Vue 实现。

安装：

npm install ant-design-vue

使用：

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

Vue.use(Antd)

表单验证

VeeValidate

VeeValidate 是一个基于模板的表单验证库。

安装：

npm install vee-validate

使用：

import Vue from 'vue'
import VeeValidate, { Validator } from 'vee-validate'
import zh_CN from 'vee-validate/dist/locale/zh_CN'

Validator.localize('zh_CN', zh_CN)
Vue.use(VeeValidate, {
  locale: 'zh_CN'
})

在组件中使用：

<template>
  <form @submit.prevent="validateBeforeSubmit">
    <div>
      <input 
        v-validate="'required|email'" 
        type="text" 
        name="email"
        v-model="email"
        placeholder="邮箱"
      >
      <span v-if="errors.has('email')">{{ errors.first('email') }}</span>
    </div>
    
    <div>
      <input 
        v-validate="'required|min:6|max:20'" 
        type="password" 
        name="password"
        v-model="password"
        placeholder="密码"
      >
      <span v-if="errors.has('password')">{{ errors.first('password') }}</span>
    </div>
    
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    validateBeforeSubmit() {
      this.$validator.validateAll().then(result => {
        if (result) {
          // 表单验证通过
          this.submitForm()
        } else {
          // 表单验证失败
          console.log('表单验证失败')
        }
      })
    }
  }
}
</script>

图表库

Chart.js

结合 Vue 使用 Chart.js。

安装：

npm install chart.js vue-chartjs

使用：

<template>
  <div>
    <line-chart :chart-data="datacollection"></line-chart>
  </div>
</template>

<script>
import { Line } from 'vue-chartjs'

export default {
  extends: Line,
  data() {
    return {
      datacollection: {}
    }
  },
  mounted() {
    this.fillData()
  },
  methods: {
    fillData() {
      this.datacollection = {
        labels: ['January', 'February', 'March'],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: [40, 39, 10]
          }
        ]
      }
    }
  }
}
</script>

ECharts

Vue-ECharts 是 ECharts 的 Vue 组件。

安装：

npm install echarts vue-echarts

使用：

<template>
  <div>
    <v-chart class="chart" :option="option" />
  </div>
</template>

<script>
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent
} from 'echarts/components'

use([
  CanvasRenderer,
  BarChart,
  GridComponent,
  TooltipComponent
])

export default {
  components: {
    VChart
  },
  data() {
    return {
      option: {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }
    }
  }
}
</script>

动画库

Vue Animate

Vue Animate 是一个 CSS 动画库。

安装：

npm install vue2-animate

使用：

import 'vue2-animate/dist/vue2-animate.min.css'

<template>
  <transition name="bounce">
    <div v-show="show">hello</div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

Animate.css

结合 Vue 使用 Animate.css。

安装：

npm install animate.css

使用：

<template>
  <div>
    <transition
      name="custom-classes-transition"
      enter-active-class="animate__animated animate__fadeInUp"
      leave-active-class="animate__animated animate__fadeOutDown"
    >
      <p v-if="show">hello</p>
    </transition>
    <button @click="show = !show">Toggle</button>
  </div>
</template>

<script>
import 'animate.css'
</script>

日期处理

Day.js

Day.js 是一个轻量级的日期处理库。

安装：

npm install dayjs

使用：

import dayjs from 'dayjs'

// 格式化日期
const formattedDate = dayjs().format('YYYY-MM-DD HH:mm:ss')

// 相对时间
const relativeTime = dayjs().subtract(1, 'minute').fromNow() // 'a minute ago'

// 操作日期
const tomorrow = dayjs().add(1, 'day')

Vue Day.js

Vue 的 Day.js 插件。

import Vue from 'vue'
import VueDayjs from 'vue-dayjs'

Vue.use(VueDayjs)

// 在组件中使用
export default {
  computed: {
    formattedDate() {
      return this.$dayjs(new Date()).format('YYYY-MM-DD')
    }
  }
}

国际化

Vue I18n

Vue I18n 是 Vue.js 的国际化插件。

安装：

npm install vue-i18n

使用：

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

Vue.use(VueI18n)

const messages = {
  en: {
    message: {
      hello: 'Hello world'
    }
  },
  zh: {
    message: {
      hello: '你好，世界'
    }
  }
}

const i18n = new VueI18n({
  locale: 'zh', // 设置地区
  messages // 设置语言环境信息
})

new Vue({
  i18n,
  // ...
}).$mount('#app')

在模板中使用：

<template>
  <div>
    <p>{{ $t('message.hello') }}</p>
    <button @click="changeLocale">切换语言</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeLocale() {
      this.$i18n.locale = this.$i18n.locale === 'zh' ? 'en' : 'zh'
    }
  }
}
</script>

构建工具

Vue CLI

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。

安装：

npm install -g @vue/cli

创建项目：

vue create my-project
cd my-project
npm run serve

Vite

Vite 是下一代前端构建工具。

安装：

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

测试工具

Vue Test Utils

Vue Test Utils 是 Vue.js 的官方测试工具库。

安装：

npm install --save-dev @vue/test-utils

使用：

import { mount } from '@vue/test-utils'
import Component from '@/components/Component.vue'

describe('Component', () => {
  test('renders correctly', () => {
    const wrapper = mount(Component)
    expect(wrapper.exists()).toBe(true)
  })
})

Jest

Jest 是一个令人愉快的 JavaScript 测试框架。

安装：

npm install --save-dev jest

实用工具库

Lodash

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

安装：

npm install lodash

使用：

import { debounce, throttle, cloneDeep } from 'lodash'

// 防抖
const debouncedFunction = debounce(func, 300)

// 节流
const throttledFunction = throttle(func, 100)

// 深拷贝
const deepCopiedObject = cloneDeep(originalObject)

Moment.js (已不推荐)

Moment.js 是一个日期处理库（已不推荐使用，建议使用 Day.js）。

安装：

npm install moment

性能优化工具

Vue Performance Devtool

Vue Performance Devtool 是一个性能分析工具。

安装浏览器扩展并使用：

// 在开发环境中启用性能追踪
if (process.env.NODE_ENV !== 'production') {
  Vue.config.performance = true
}

这些相关库极大地丰富了 Vue.js 的生态系统，开发者可以根据项目需求选择合适的库来增强应用功能。

贡献者: WhileSun

上一页Vue DevTools

下一页从 Vue 1 迁移