在使用vue开发项目的时候，一款好的UI组件库/插件会让开发效率大幅提升，起到事半功倍的效果。今天，就来盘点下，常用的vue+pc端UI组件库。

根据GitHub上 star 数量、文档丰富度等因素，整理了如下一些优秀的vue pc端 UI框架/组件库。文章篇幅可能有点长，耐心看完会有点点帮助的。

1、Element

element | 饿了么团队开发的一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

https://element.eleme.cn/

https://github.com/ElemeFE/element

安装

$ npm i element-ui -S

使用

// 引入全部组件
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

// 按需引入部分组件
import { Button, Dialog } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Dialog.name, Dialog);

2、iView

iview | 一套基于 Vue.js 的高质量UI 组件库。

目前统计使用 iView 组件库的大厂有：今日头条、阿里巴巴、腾讯、百度、京东、滴滴、美团、新浪、同程艺龙、科大讯飞...

http://v3.iviewui.com/

https://github.com/iview/iview

https://www.iviewui.com/

安装

$ npm i iv-S

使用

// 引入全部组件
import Vue from 'vue';
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);

// 按需引入部分组件
import { Button, Table } from 'iview';
Vue.component('Button', Button);
Vue.component('Table', Table);

3、Quasar

quasar | 基于Vue.js的开源框架，允许Web开发人员快速创建多种类型的responsive++网站/应用，编写代码一次并同时将其部署为网站、移动应用和/或Electron应用。

http://www.quasarchs.com/

https://github.com/quasarframework/quasar

安装Quasar CLI

// 安装Quasar CLI脚手架
$ npm install -g @quasar/cli
// 使用Quasar CLI创建一个项目文件夹
$ quasar create <folder_name>
// 安装依赖并运行
$ npm install
$ quasar dev

使用

// 在quasar.conf.js里做如下配置
return {
  framework: {
    components: ['QBtn', 'QIcon' /* ... */],
    directives: ['TouchSwipe', 'Ripple' /* ... */],
    plugins: ['Notify' /* ... */],
    
    // ...
  }
}

<template>
  <div>
    <q-btn @click="$q.notify('My message')" color="primary" label="Show a notification" />
    <q-btn @click="showNotification" color="primary" label="Show another notification"/>
    <q-icon name="alarm" />
    <div v-touch-swipe="handler">...</div>
    <div v-ripple>Click me. I got ripples.</div>
  </div>
</template>

<script>
  export default {
    methods: {
      showNotification () {
        this.$q.notify('Some other message')
      }
    }
  }
</script>

4、Vuetify

vuetify | 基于Vue.js的Material Design组件框架。包含手工制作的精美材料组件。不需要设计技能，也能创建令人惊叹的应用程序。

https://vuetifyjs.com/

https://github.com/vuetifyjs/vuetify

安装

$ npm i vuetify -S

使用

// 引入全部组件
import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);

5、ant-design-vue

ant-design-vue | 一个基于 vue.js 和 Ant Design 样式的 UI组件库，开发和服务于企业级产品。

https://www.antdv.com/docs/vue/introduce-cn/

https://github.com/vueComponent/ant-design-vue/

安装

$ npm i ant-design-vue -S

使用

// 引入全部组件
import Vue from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);

// 按需引入部分组件
import { Button, Select } from 'ant-design-vue';
Vue.use(Button);
Vue.component(Select);

6、bootstrap-vue

bootstrap-vue | 基于 Bootstrap v4 + Vue.js 的前端 UI 框架。基于flexbox弹性布局，用于在web上构建响应式，移动优先的项目。

https://bootstrap-vue.org/

https://github.com/bootstrap-vue/bootstrap-vue

安装

$ npm i bootstrap-vue bootstrap -S

使用

// 引入全部组件
import Vue from 'vue';
import { BootstrapVue } from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue);

7、vue-material

vue-material | 基于Vue Material和Vue 2.0建立精美的app应用。

http://vuematerial.materializecss.cn/

https://github.com/vuematerial/vue-material

安装

$ npm i vue-material -S

使用

// 引入全部组件
import Vue from 'vue';
import VueMaterial from 'vue-material';
import 'vue-material/dist/vue-material.min.css';
Vue.use(VueMaterial);

// 按需引入部分组件
import { MdButton, MdTabs } from 'vue-material/dist/components';
Vue.use(MdButton);
Vue.use(MdTabs);

8、Muse-UI

muse ui | 基于 Vue 2.0 优雅的 Material Design UI 组件库。

https://muse-ui.org/

https://github.com/museui/muse-ui

安装

$ npm i muse-ui -S

使用

// 引入全部组件
import Vue from 'vue';
import MuseUI from 'muse-ui';
import 'muse-ui/dist/muse-ui.css';
Vue.use(MuseUI);

// 按需引入部分组件
import { Button, Select } from 'muse-ui';
import 'muse-ui/lib/styles/base.less';
import 'muse-ui/lib/styles/theme.less';
Vue.use(Button);
Vue.use(Select);

9、Buefy

buefy | 基于 Vue.js 和 Bulma 的轻量级UI组件，它提供了即装即用的轻量级组件。

https://buefy.org/

https://github.com/buefy/buefy

安装

$ npm i buefy -S

使用

// 引入全部组件
import Vue from 'vue';
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';
Vue.use(Buefy);

// 按需引入部分组件
import { Button, Input } from 'buefy';
Vue.use(Button);
Vue.use(Input);

10、Keen-UI

keen-ui | 基于 Vue.js 和 Material Design 编写的基本UI组件的轻量级集合。

https://josephuspaye.github.io/Keen-UI/

https://github.com/JosephusPaye/Keen-UI

安装

$ npm i keen-ui -S

使用

// 引入全部组件
import Vue from 'vue';
import KeenUI from 'keen-ui';
import 'keen-ui/dist/keen-ui.css';
Vue.use(KeenUI);

// 按需引入部分组件
import { UiAlert, UiButton } from 'keen-ui';
Vue.use(UiAlert);
Vue.use(UiButton);

11、AT UI

at-ui | 是一款基于 Vue.js 2.0 的前端 UI 组件库，主要用于快速开发 PC 网站中后台产品。

https://at-ui.github.io/at-ui/

https://github.com/at-ui/at-ui

安装

$ npm i at-ui -S

使用

// 引入全部组件
import Vue from 'vue';
import AtComponents from 'at-ui';
import 'at-ui-style';
Vue.use(AtComponents);

// 按需引入部分组件
import { Button, Input } from 'at-ui';
Vue.use(Button);
Vue.use(Input);

12、Vue Beauty

vue-beauty | 基于 vue.js 和 ant-design 样式 的PC端 UI 组件库，旨在帮助开发者提升产品体验和开发效率、降低维护成本。

https://fe-driver.github.io/vue-beauty/

https://github.com/FE-Driver/vue-beauty

安装

$ npm i vue-beauty -S

使用

// 引入全部组件
import Vue from 'vue';
import vueBeauty from 'vue-beauty';
import 'vue-beauty/package/style/vue-beauty.min.css';
Vue.use(vueBeauty);

// 按需引入部分组件
import { Button, Alert } from 'vue-beauty';
Vue.use(Button);
Vue.use(Alert);

好了，这次就分享到这里，你最喜欢的Vue PC端UI库是什么？欢迎留言讨论。

?? 最后

如果觉得这篇文章对你有帮助，点个『关注/转发』，让更多的人也能看到你的分享！