前端开发人员都必须知道的 7 个 Vue3 组件库！

Vue.js 是一个流行的 JavaScript 框架，它以其易用性和灵活性吸引了大量开发人员。

随着 Vue 3 的发布，生态系统也迎来了新的变化和增强。

本文将介绍每个前端开发人员都必须知道的 7 个 Vue 3 组件库，并提供详细步骤、代码示例和相关图片链接，帮助你快速上手这些强大的工具。

1. Element Plus

简介

Element Plus 是基于 Vue 3 构建的桌面端组件库，继承了 Element UI 的设计理念和用户体验。它提供了一套完整的 UI 组件，帮助开发者快速构建出高质量的 Web 应用。

特性

• • 丰富的组件库
• • 强大的主题定制功能
• • 详细的文档和社区支持

安装和使用

安装

npm install element-plus --save

使用

在 main.js 文件中引入 Element Plus：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

示例代码

<template>
  <el-button type="primary">Primary Button</el-button>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style>
@import 'element-plus/lib/theme-chalk/index.css';
</style>

2. Vuetify

简介

Vuetify 是一个基于 Material Design 设计规范的 Vue 组件库。它提供了一套丰富的 UI 组件和工具，帮助开发者快速构建现代化的 Web 应用。

特性

• • Material Design 风格
• • 丰富的主题和样式选项
• • 强大的组件和布局系统

安装和使用

安装

npm install vuetify@next --save

使用

在 main.js 文件中引入 Vuetify：
import { createApp } from 'vue'
import App from './App.vue'
import { createVuetify } from 'vuetify'
import 'vuetify/styles'
import { aliases, mdi } from 'vuetify/lib/iconsets/mdi'
const vuetify = createVuetify({
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: {
      mdi,
    },
  },
})
const app = createApp(App)
app.use(vuetify)
app.mount('#app')

示例代码

<template>
  <v-app>
    <v-main>
      <v-container>
        <v-btn color="primary">Primary Button</v-btn>
      </v-container>
    </v-main>
  </v-app>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style>
@import 'vuetify/styles';
</style>

3. Ant Design Vue

简介

Ant Design Vue 是基于 Ant Design 设计规范的 Vue 组件库。它提供了一套高质量的 UI 组件，帮助开发者快速构建企业级应用。

特性

• • 企业级设计规范
• • 丰富的组件库
• • 强大的主题定制功能

安装和使用

安装

npm install ant-design-vue --save

使用

在 main.js 文件中引入 Ant Design Vue：

import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
const app = createApp(App)
app.use(Antd)
app.mount('#app')

示例代码

<template>
  <a-button type="primary">Primary Button</a-button>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style>
@import 'ant-design-vue/dist/antd.css';
</style>

4. BootstrapVue

简介

BootstrapVue 是基于 Bootstrap 设计框架的 Vue 组件库。它结合了 Bootstrap 的强大样式和 Vue 的灵活性，提供了一套丰富的 UI 组件。

特性

• • 基于 Bootstrap 设计
• • 丰富的组件库
• • 简单易用的 API

安装和使用

安装

npm install bootstrap bootstrap-vue --save

使用

在 main.js 文件中引入 BootstrapVue：

import { createApp } from 'vue'
import App from './App.vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
const app = createApp(App)
app.use(BootstrapVue)
app.use(IconsPlugin)
app.mount('#app')

示例代码

<template>
  <b-button variant="primary">Primary Button</b-button>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style>
@import 'bootstrap/dist/css/bootstrap.css';
@import 'bootstrap-vue/dist/bootstrap-vue.css';
</style>

5. PrimeVue

简介

PrimeVue 是一款功能强大且灵活的 Vue 组件库，提供了丰富的 UI 组件，帮助开发者快速构建高质量的 Web 应用。

特性

• • 丰富的组件库
• • 强大的主题定制功能
• • 详细的文档和示例

安装和使用

安装

npm install primevue --save
npm install primeicons --save
npm install primeflex --save

使用

在 main.js 文件中引入 PrimeVue：

import { createApp } from 'vue'
import App from './App.vue'
import PrimeVue from 'primevue/config'
import 'primevue/resources/themes/saga-blue/theme.css'       
import 'primevue/resources/primevue.min.css'                
import 'primeicons/primeicons.css'                          
import 'primeflex/primeflex.css'
const app = createApp(App)
app.use(PrimeVue)
app.mount('#app')

示例代码

<template>
  <Button label="Click Me" icon="pi pi-check" />
</template>
<script>
import { Button } from 'primevue/button'
export default {
  name: 'App',
  components: {
    Button
  }
}
</script>
<style>
@import 'primevue/resources/themes/saga-blue/theme.css';
@import 'primevue/resources/primevue.min.css';
@import 'primeicons/primeicons.css';
@import 'primeflex/primeflex.css';
</style>

6. Quasar

简介

Quasar 是一个基于 Vue 的高性能 UI 框架，适用于桌面和移动端应用。它提供了一套丰富的组件和工具，帮助开发者快速构建响应式和跨平台的应用。

特性

• • 丰富的组件库
• • 支持跨平台应用开发
• • 强大的 CLI 工具

安装和使用

安装

npm install -g @quasar/cli
quasar create my-app
cd my-app
quasar dev

使用

在 src/main.js 文件中引入 Quasar：

import { createApp } from 'vue'
import App from './App.vue'
import { Quasar } from 'quasar'
import 'quasar/dist/quasar.css'
const app = createApp(App)
app.use(Quasar, {
  config: {}
})
app.mount('#app')

示例代码

<template>
  <q-btn label="Primary Button" color="primary" />
</template>
<script>
export default {
  name: 'App'
}
</script>
<style>
@import 'quasar/dist/quasar.css';
</style>

7. Chakra UI Vue

简介

Chakra UI Vue 是一个简单、模块化且易于使用的组件库，提供了一套基于 Chakra UI 设计理念的 Vue 组件，帮助开发者快速构建美观的用户界面。

特性

• • 简单易用的 API
• • 模块化设计
• • 强大的主题定制功能

安装和使用

安装

npm install @chakra-ui/vue @emotion/css @emotion/core @emotion/styled emotion-theming

使用

在 main.js 文件中引入 Chakra UI Vue：

import {
 createApp } from 'vue'
import App from './App.vue'
import { ChakraProvider } from '@chakra-ui/vue'
const app = createApp(App)
app.use(ChakraProvider)
app.mount('#app')

示例代码

<template>
  <CButton colorScheme="teal">Primary Button</CButton>
</template>
<script>
import { CButton } from '@chakra-ui/vue'
export default {
  name: 'App',
  components: {
    CButton
  }
}
</script>
<style>
@import '@chakra-ui/vue/dist/chakra-ui.css';
</style>