组件库介绍

  • 函数
  • 函数库
  • 类
  • 类库
  • 模块
  • 组件
  • 组件库
  • 框架
  • ….

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

  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

安装

npm install element-plus --save

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

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

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

import { createApp } from 'vue'
import App from './App.vue'

// 导入组件库
import ElementPlus from 'element-plus'
// 导入组件库的样式
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(ElementPlus).mount('#app')

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

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

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

npm install @element-plus/icons-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)
}

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

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

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

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

安装这两个插件：

npm install -D unplugin-vue-components unplugin-auto-import

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

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: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

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

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.mount('#app')

main.js 重新变得非常的干净了。

而且这种方式是按需引入，打包后的体积也非常小。

快速上手

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

<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
    }
  })
}
</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>

国际化

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

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

import { createApp } from 'vue'
import App from './App.vue'

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

const app = createApp(App)

app
  .use(ElementPlus, {
    locale: zhCn
  })
  .mount('#app')

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

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

<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>
最近更新：:
Contributors: AK