在使用vue开发项目的时候,选择一款好的UI组件库/插件会让开发效率大幅提升,起到事半功倍的效果。今天,就来盘点下,几个热门Vue PC端UI组件库。
根据github 2020/6/18 Star数量 更新活跃度排序
1、Element UI ▪ 饿了么开源的PC端组件库
饿了么出品开发的一套为开发者、设计师和产品经理准备的基于 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 ▪ TalkingData开源的Vue2.0组件库
一套基于 Vue.js 的高质量UI 组件库。
目前统计使用 iView 组件库的大厂有:今日头条、阿里巴巴、腾讯、百度、京东、滴滴、美团、新浪、同程艺龙、科大讯飞...
http://v3.iviewui.com/
https://github.com/iview/iview
https://www.iviewui.com/
安装
$ npm i iview -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 ▪ 遵循Material Design 2.0组件框架
基于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 // 安装依赖并运行
$ 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 ▪ 遵循Material Design 2.0组件库
基于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 ▪ 阿里巴巴推出Antd的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 的前端UI库
基于 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 ▪ 遵循 Material Design 风格的UI组件库
基于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 ▪ 遵循Material Design的组件库
基于 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 ▪ 遵循Bulma的组件库
基于 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 ▪ 遵循Material Design的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 ▪ 轻量扁平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 ▪ 遵循 Antd 风格的UI组件库
基于 vue.js 和 ant-design 风格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);
![4cd9e3235220fbf00f37a12356cbf9cc.gif](https://i-blog.csdnimg.cn/blog_migrate/eb7ab7eea97d50b72724caf4dff497eb.gif)
End
好了,这次就分享到这里,如果小伙伴们有更好的Vue PC端UI组件库,欢迎在下方留言讨论,期待你的分享!