asp.net 安装element ui_2020年12个精选热门Vue PC端UI组件库

在使用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);

End

好了，这次就分享到这里，如果小伙伴们有更好的Vue PC端UI组件库，欢迎在下方留言讨论，期待你的分享！