「推荐」Vue PC端UI组件库｜框架盘点

在使用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/iviewhttps://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 框架。基于flexboxX布局，用于在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库是什么？欢迎留言讨论。

️ 最后

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