1. Vuetify

Vuetify 是一个基于Material Design规范的Vue.js UI库，具备丰富的组件和响应式布局。适用于各种类型的项目，特别是需要一致性外观和感觉的应用程序。

Demo

npm install vuetify@next

// main.jsimport { createApp } from 'vue'import App from './App.vue'import { createVuetify } from 'vuetify'import 'vuetify/styles'import * as components from 'vuetify/components'import * as directives from 'vuetify/directives'const vuetify = createVuetify({  components,  directives,})createApp(App).use(vuetify).mount('#app')

<template>  <v-app>    <v-container>      <v-btn @click="clickHandler">Click Me</v-btn>    </v-container>  </v-app></template>

2. Element Plus

Element Plus 是Element UI库的Vue 3版本，为开发者提供了一组友好的组件。

Demo

npm install element-plus

// main.jsimport { 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')

<template>  <el-button type="primary">Primary Button</el-button></template>

3. PrimeVue

PrimeVue 提供了80多个UI组件，适用于企业应用程序。

Demo

npm install primevue primeicons

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

<template>  <Button label="Click Me" /></template>

4. Ant Design Vue

Ant Design Vue 是Ant Design在Vue上的实现，提供了高质量的组件。

Demo

npm install ant-design-vue

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

<template>  <a-button type="primary">Primary Button</a-button></template>

5. BootstrapVue

BootstrapVue V3 是基于Bootstrap 5的Vue.js组件库。

Demo

npm install bootstrap@next bootstrap-vue@next

// main.jsimport { 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'createApp(App).use(BootstrapVue).use(IconsPlugin).mount('#app')

<template>  <b-button variant="primary">Primary Button</b-button></template>

6. Quasar Framework

Quasar Framework 是一个高性能的Vue.js框架，支持从一套代码基出发搭建多种平台应用。

Demo

npm install @quasar/app

// main.jsimport { createApp } from 'vue'import App from './App.vue'import { Quasar } from 'quasar'import 'quasar/dist/quasar.css'createApp(App).use(Quasar).mount('#app')

<template>  <q-btn label="Primary Button" @click="clickHandler"></q-btn></template>

7. Buefy

Buefy 基于Bulma框架的轻量级Vue UI组件库。

Demo

npm install buefy

// main.jsimport { createApp } from 'vue'import App from './App.vue'import Buefy from 'buefy'import 'buefy/dist/buefy.css'createApp(App).use(Buefy).mount('#app')

<template>  <b-button type="is-primary">Primary Button</b-button></template>

8. Chakra UI Vue

Chakra UI Vue 是Chakra UI在Vue上的实现，专注于可访问性。

Demo

npm install @chakra-ui/vue

// main.jsimport { createApp } from 'vue'import App from './App.vue'import { Chakra, extendTheme } from '@chakra-ui/vue-next'import { domElements } from '@chakra-ui/vue-system'const theme = extendTheme({  components: domElements})createApp(App)  .use(Chakra, {    extendTheme  })  .mount('#app')

<template>  <CButton colorScheme="blue">Primary Button</CButton></template>

9. ViewUI Plus

ViewUI Plus 是ViewUI的升级版本，支持Vue 3。

Demo

npm install view-ui-plus

// main.jsimport { createApp } from 'vue'import App from './App.vue'import ViewUIPlus from 'view-ui-plus'import 'view-ui-plus/dist/styles/viewuiplus.css'createApp(App).use(ViewUIPlus).mount('#app')

<template>  <Button type="primary">Primary Button</Button></template>

10. Vant

Vant 是一个轻量级的移动端Vue组件库。

Demo

npm install vant

// main.jsimport { createApp } from 'vue'import App from './App.vue'import Vant from 'vant'import 'vant/lib/index.css'createApp(App).use(Vant).mount('#app')

<template>  <van-button type="primary">Primary Button</van-button></template>

结论

每一个Vue.js UI库都有其独特的优势和适用场景。无论是企业级应用还是个人项目，选择合适的UI库可以大大提升开发效率和用户体验。希望本文列出的十大UI库和相应的Demo能帮助你找到最适合的库，快速构建出色的应用。