vue3 的高频插件

在 Vue 3 的开发过程中，插件能够极大地简化开发流程，提高生产力。以下是一些 Vue 3 环境下好用的插件及其使用示例，涵盖路由、状态管理、表单验证、动画、UI 库等多个方面。

1. Vue Router 4

Vue Router 是 Vue.js 的官方路由管理器，Vue 3 需要使用 Vue Router 4 版本。它支持动态路由、路由守卫、嵌套路由等特性。

安装：

npm install vue-router@4

使用示例：

创建路由配置文件：

// 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: '/', component: Home },{ path: '/about', component: About }
];const router = createRouter({history: createWebHistory(),routes
});export default router;

在主文件中引入并使用：

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';const app = createApp(App);
app.use(router);
app.mount('#app');

2. Pinia

Pinia 是 Vue 3 官方推荐的状态管理库，轻量且现代，提供了优异的 TypeScript 支持，相比 Vuex 更简单灵活。

安装：

npm install pinia

使用示例：

创建 Store：

// src/stores/counter.js
import { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', {state: () => ({count: 0}),actions: {increment() {this.count++;}}
});

在组件中使用：

// src/components/Counter.vue
<template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button></div>
</template><script setup>
import { useCounterStore } from '../stores/counter';
const store = useCounterStore();const { count, increment } = store;
</script>

在主文件中引入 Pinia：

// src/main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';const app = createApp(App);
app.use(createPinia());
app.mount('#app');

3. Vuelidate

Vuelidate 是 Vue 3 兼容的轻量级表单验证库，支持动态验证规则。

安装：

npm install @vuelidate/core @vuelidate/validators

使用示例：

在组件中使用：

<template><form @submit.prevent="submit"><div><label for="email">Email:</label><input v-model="email" type="text" id="email"><span v-if="!$v.email.email">Invalid Email!</span></div><button type="submit">Submit</button></form>
</template><script setup>
import useVuelidate from '@vuelidate/core';
import { required, email } from '@vuelidate/validators';
import { reactive } from 'vue';const state = reactive({email: ''
});const rules = {email: { required, email }
};const v$ = useVuelidate(rules, state);function submit() {v$.value.$touch();if (!v$.value.$invalid) {alert('Form submitted!');}
}
</script>

4. VueUse

VueUse 是一个强大的 Vue 3 工具库，包含各种组合式 API 函数，简化常见的应用场景，如鼠标追踪、状态管理、性能优化等。

安装：

npm install @vueuse/core

使用示例：

使用 useMouse 跟踪鼠标位置：

<template><div><p>Mouse X: {{ x }}</p><p>Mouse Y: {{ y }}</p></div>
</template><script setup>
import { useMouse } from '@vueuse/core';const { x, y } = useMouse();
</script>

使用 useLocalStorage 操作本地存储：

<template><div><p>Stored name: {{ name }}</p><input v-model="name" type="text" placeholder="Enter your name"></div>
</template><script setup>
import { useLocalStorage } from '@vueuse/core';const name = useLocalStorage('name', 'Vue Developer');
</script>

5. Vue I18n

Vue I18n 是 Vue.js 的国际化插件，支持多语言处理，适用于构建全球化应用。

安装：

npm install vue-i18n@next

使用示例：

配置国际化插件：

// src/i18n.js
import { createI18n } from 'vue-i18n';const messages = {en: { message: 'Hello' },fr: { message: 'Bonjour' }
};const i18n = createI18n({locale: 'en',messages
});export default i18n;

在组件中使用：

<template><div><p>{{ $t('message') }}</p><button @click="changeLanguage">Switch Language</button></div>
</template><script setup>
import { useI18n } from 'vue-i18n';const { locale } = useI18n();function changeLanguage() {locale.value = locale.value === 'en' ? 'fr' : 'en';
}
</script>

在主文件中引入：

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import i18n from './i18n';const app = createApp(App);
app.use(i18n);
app.mount('#app');

6. Vue 3 UI 库（Vant, Element Plus, Ant Design Vue）

Vant（适用于移动端）

Vant 是一款轻量级、流行的移动端 Vue 组件库。

安装：

npm install vant

使用示例：

<template><van-button type="primary">Primary Button</van-button>
</template><script setup>
import 'vant/lib/index.css';
import { Button } from 'vant';
</script>

Element Plus（适用于桌面端）

Element Plus 是 Vue 3 的桌面端 UI 组件库，提供了丰富的组件。

安装：

npm install element-plus

使用示例：

<template><el-button type="primary">Primary Button</el-button>
</template><script setup>
import 'element-plus/dist/index.css';
import { ElButton } from 'element-plus';
</script>

7. VueUseMotion

VueUseMotion 是一个用于 Vue 3 的动画库，基于 motion 库，支持现代动画效果。

安装：

npm install @vueuse/motion

使用示例：

在组件中使用动画：

<template><motion-div:initial="{ opacity: 0 }":enter="{ opacity: 1 }"transition="bounce">Animated Content</motion-div>
</template><script setup>
import { MotionDiv } from '@vueuse/motion';</script>