当前位置：首页 > article >正文

vue3 的高频插件

article 2024/10/23 2:04:38

在 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>