阿卡不拉

Appearance

使用组件库 👌 ​

快速总览

  • 组件库提供高质量 UI 组件，显著提升开发效率与一致性。
  • Vue 3 主流组件库：Element Plus、Naive UI、Ant Design Vue、PrimeVue、Vuetify、Vant 等。
  • 引入方式分为“全量引入”和“按需引入”，按需更利于体积与性能。
  • 配套插件：unplugin-auto-import 与 unplugin-vue-components 可自动按需引入组件与工具函数。
  • 函数
  • 函数库
  • 类
  • 类库
  • 模块
  • 组件
  • 组件库
  • 框架
  • ….

这些东西看上去很多，但其实本质上就是代码复用的一种方式。

  1. Vuetify - Vuetify 是一个广受欢迎的 Vue UI 组件库，提供了广泛的材料设计组件。它非常适合快速开发，拥有丰富的组件和详细的文档。

    官网地址：https://vuetifyjs.com/en/

  2. Element Plus - Element Plus 是 Element UI 的 Vue 3 版本，是一个面向企业级产品的组件库，它提供了一系列可配置的组件和丰富的 API。

    官网地址：https://element-plus.org/

  3. PrimeVue - PrimeVue 是 PrimeFaces Team 针对 Vue 开发的组件库，它提供了丰富的组件和主题，适合用于各种商业应用。

    官网地址：https://primevue.org/

  4. Ant Design Vue - 这是 Ant Design 的 Vue 实现，特别适合用于企业级应用。它提供了丰富的 Vue 组件，是构建后台应用界面的理想选择。

    官网地址：https://antdv.com/components/overview

  5. Naive UI - 一个相对较新的 Vue 3 组件库，采用 TypeScript 编写，提供了一套完整的组件，以灵活性和轻量级著称，还被尤雨溪推荐过。

    官网地址：https://www.naiveui.com/zh-CN/os-theme

  6. BootstrapVue - 尽管 BootstrapVue 最初是为 Vue 2 开发的，但社区已经在为支持 Vue 3 而努力。它将 Bootstrap 的功能与 Vue 的反应性相结合。

    官网地址：https://bootstrap-vue.org/

  7. Vant - Vant 是一个轻量级、可靠的移动端 Vue 组件库，由有赞前端团队开发和维护。

    官网地址：https://vant-ui.github.io/vant/#/en-US

安装与引入（Element Plus 示例） ​

bash
npm i element-plus

安装完毕后，接下来需要在 Vue 应用中挂载组件库。

挂载组件库分为两种形式：全量引入 和 按需引入

全量引入：就是一次性引入整个组件库，配置也很简单，无需考虑哪些组件需要引入。

js
import { 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");

之后就可以在自己应用里面的任意组件中，使用组件库所提供的组件：

vue
<template>
  <div>
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </div>
</template>

如果涉及到图标，那么需要额外安装图标相关的库：

bash
npm i @element-plus/icons-vue

安装完毕后，仍然是可以全量进行注册：

js
import { createApp } from "vue";
import App from "./App.vue";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";

const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}
app.mount("#app");

还有一种方式，就是采用 按需引入

  • 优化包的体积
  • 性能更优

目前有两个非常方便的插件，让我们彻底告别全量引入，哪怕是学习阶段也可以采用按需引入

  • unplugin-vue-components：会自动扫描你的项目文件，找到使用的 Vue 组件，在打包的时候自动引入这些组件，无需手动的 import.
  • unplugin-auto-import：按需引入工具函数的插件，它可以自动引入 Vue 相关的工具函数（ref、computed），这些工具函数也就不需要再 import 了

安装这两个插件：

bash
npm i -D unplugin-vue-components unplugin-auto-import

之后需要在 Vite 的配置文件中引入这些插件：

js
// vite.config.js / vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({ resolvers: [ElementPlusResolver()] }),
    Components({ resolvers: [ElementPlusResolver()] }),
  ],
});

之后就不再需要在 Vue 应用中去挂载所有的组件了：

js
import { createApp } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");

按需引入的优势

  • 无需手动导入组件与 ref/computed 等工具函数，开发体验更好。
  • 打包体积更小，首屏加载更快；适合生产环境与学习阶段。

常见坑

  • 忘记安装或配置插件导致组件无法识别；确保 vite.config 使用对应 Resolver。
  • 仍按“全量引入”方式导入样式，可能导致体积增大；使用按需样式或主题定制时需注意。

快速上手（表单示例） ​

下面是 ElementPlus 中一个关于表单的示例：

vue
<template>
  <div class="form-container">
    <el-form
      :model="form"
      :rules="rules"
      ref="formRef"
      label-width="100px"
      class="user-form"
    >
      <h2 class="form-title">用户信息表单</h2>
      <!-- 姓名 -->
      <el-form-item label="姓名：" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <!-- 邮箱 -->
      <el-form-item label="邮箱：" prop="email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <!-- 出生日期 -->
      <el-form-item label="出生日期：" prop="birthday">
        <el-date-picker
          v-model="form.birthday"
          type="date"
          placeholder="选择日期"
          :picker-options="{ firstDayOfWeek: 1 }"
          style="width: 100%"
        />
      </el-form-item>
      <!-- 性别 -->
      <el-form-item label="性别：" prop="gender">
        <el-radio-group v-model="form.gender">
          <el-radio value="male">男</el-radio>
          <el-radio value="female">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 兴趣爱好 -->
      <el-form-item label="兴趣爱好：" prop="hobbies">
        <el-checkbox-group v-model="form.hobbies">
          <el-checkbox value="reading" name="hobby">阅读</el-checkbox>
          <el-checkbox value="music" name="hobby">音乐</el-checkbox>
          <el-checkbox value="sports" name="hobby">运动</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="接收通知：" prop="notifications">
        <el-switch v-model="form.notifications"></el-switch>
      </el-form-item>
      <el-form-item label="用户评级：" prop="rating">
        <el-rate v-model="form.rating"></el-rate>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from "vue";
const form = ref({
  name: "",
  email: "",
  birthday: "",
  gender: "male",
  hobbies: [],
  notifications: false,
  rating: 0,
});

const formRef = ref(null);

const rules = {
  // 验证规则是一个数组，因为可以设置多条验证规则
  // 每一条验证规则，是一个对象
  name: [
    {
      required: true,
      message: "请输入姓名",
      trigger: "blur",
    },
  ],
  email: [
    { required: true, message: "请输入您的邮箱", trigger: "blur" },
    { type: "email", message: "请输入有效的邮箱地址", trigger: "blur" },
  ],
  birthday: [
    { required: true, message: "请选择您的出生日期", trigger: "change" },
  ],
  gender: [{ required: true, message: "请选择您的性别", trigger: "change" }],
  hobbies: [
    { required: true, message: "至少选择一个兴趣爱好", trigger: "change" },
  ],
  rating: [{ required: true, message: "请评价用户等级", trigger: "change" }],
};
// 提交表单
function submitForm() {
  // 提交表单的时候，需要看一下表单是否验证通过
  formRef.value.validate((valid) => {
    // 自动传入一个参数，这个参数是一个布尔值，代表表单是否验证通过
    if (valid) {
      // 验证通过
      console.log("表单验证通过");
    } else {
      // 验证不通过
      console.log("表单验证不通过");
      return false;
    }
  });
}
// 可选：表单重置
function resetForm() {
  form.value = {
    name: "",
    email: "",
    birthday: "",
    gender: "male",
    hobbies: [],
    notifications: false,
    rating: 0,
  };
}
</script>

<style scoped>
.form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.user-form {
  width: 600px;
  border: 1px solid #eee;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.form-title {
  text-align: center;
  margin-bottom: 20px;
}
</style>

国际化（i18n） ​

在 ElementPlus 组件库中，默认采用的是英语。

如果想要使用其他的语言，那么同样是稍微配置一下就可以了：

js
import { createApp } from "vue";
import App from "./App.vue";

import ElementPlus from "element-plus";
import zhCn from "element-plus/es/locale/lang/zh-cn";

createApp(App).use(ElementPlus, { locale: zhCn }).mount("#app");

但是上面的这种配置方式，就变成全量引入了，这意味着打包的时候，会将所有的组件都打包进去。

如果想要采用按需引入的方式，需要借助 ElConfigProvider 组件：

vue
<template>
  <ElConfigProvider :locale="locale">
    <!-- 其他组件 -->
  </ElConfigProvider>
</template>

<script setup>
import { ElConfigProvider } from "element-plus";
// 引入的是中文语言包
import zhCn from "element-plus/es/locale/lang/zh-cn";
const locale = ref(zhCn);
</script>

配置建议

  • 使用 ElConfigProvider 可以配合按需引入，避免全量方式带来的体积问题。
  • 同时可在其中配置 size、zIndex 等全局状态，实现统一风格。