GitHub 上有一些不错的 Vue UI 工具包。

嗨！本文将介绍一些适用于 Vue 的优秀 UI 工具包。如果你准备好了，那就开始吧。

1-) 元素

第一个是Element。我认为 Element 的组件很不错。我创建了一个项目作为示例。

Github仓库： https://github.com/ElemeFE/element

浏览器支持：现代浏览器和 Internet Explorer 10+。

安装： npm install element-ui -S

快速入门

import Vue from 'vue'
import Element from 'element-ui'

Vue.use(Element)

// or
import {
  Select,
  Button
  // ...
} from 'element-ui'

Vue.component(Select.name, Select)
Vue.component(Button.name, Button)

2-) iView

第二个是iView。其实我没在任何项目中用过它，因为它有点慢。这只是我个人的看法。

GitHub仓库： https://github.com/iview/iview

浏览器支持：大部分组件和功能支持IE9及以上浏览器，部分组件和功能不支持IE

安装：

使用 npm：

npm install iview --save

使用脚本标签进行全局使用：

<script type="text/javascript" src="iview.min.js"></script>
<link rel="stylesheet" href="dist/styles/iview.css">

快速入门

<template>
    <Slider v-model="value" range />
</template>
<script>
    export default {
        data () {
            return {
                value: [20, 50]
            }
        }
    }
</script>

3-) Vuetify

这个是Vuetify。我没用过。不过他们的介绍是这样的；

Vuetify 是 Vue 的语义组件框架。它旨在提供简洁、语义化且可复用的组件，让你的应用程序构建变得轻而易举。

利用 Vue 和 Material Design 的强大功能以及海量精美组件库，构建精彩应用。Vuetify 组件遵循 Google 的 Material Design 规范，采用易于记忆的语义化设计，无需记忆复杂的类和标记，只需输入名称简洁明了的属性即可。

GitHub 仓库： https://github.com/vuetifyjs/vuetify

浏览器支持：

Vuetify 支持所有现代浏览器，包括 IE11 和 Safari 9+（使用 polyfill）。从移动设备、笔记本电脑到台式电脑，您的应用程序都能正常运行，让您安心无虞。对前沿技术感兴趣？试试 vue-cli Webpack SSR（服务器端渲染）模板，构建针对 SEO 优化的网站。

安装：

使用 Vue CLI 3

vue create my-app

vue add vuetify

使用 NPM 或 Yarn

# npm
npm install vuetify

# yarn
yarn add vuetify

快速入门

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

<v-app>
     <v-toolbar app>
       <v-toolbar-title>My Application</v-toolbar-title>
     </v-toolbar>
     <v-navigation-drawer app></v-navigation-drawer>
     <v-content>
       <v-container fluid>
          Hello World
       </v-container>
     </v-content>
   <v-footer></v-footer>
</v-app>

4-) Buefy

这个是Buefy。基于 Bulma 的 Vue.js 轻量级 UI 组件。我们在公司项目中多次使用过 Buefy。

GitHub 仓库： https://github.com/buefy/buefy

浏览器支持：

Firefox、Chrome、Edge、Opera 和 Safari 的最新版本。IE10+ 仅部分受支持。

安装：

使用 NPM

npm install buefy

使用 CDN

<!-- Include Material Design Icons -->
<link rel="stylesheet" href="//cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">

<!-- Buefy CSS -->
<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">

<!-- Buefy JavaScript -->
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>

快速入门

捆

import Vue from 'vue';
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';

Vue.use(Buefy);

或单个组件

import Vue from 'vue'
import { Field, Input } from 'buefy/dist/components'
import 'buefy/dist/buefy.css'

Vue.use(Field)
Vue.use(Input)

or

import Vue from 'vue'
import Field from 'buefy/dist/components/field'
import Input from 'buefy/dist/components/input'
import 'buefy/dist/buefy.css'

Vue.use(Field)
Vue.use(Input)

5-) Ant Design Vue

我其实没用过这个 UI 工具包。他们的描述是这样的：

遵循 Ant Design 规范，我们开发了一个 Vue UI 库 antd，其中包含一组用于构建丰富、交互式用户界面的高质量组件和演示。

GitHub 仓库： https://github.com/vueComponent/ant-design-vue

浏览器支持：

现代浏览器和 Internet Explorer 9+（带有 polyfill）

安装：

使用 NPM

npm install ant-design-vue --save

使用 Yarn

yarn add ant-design-vue

快速入门

完全导入

import Vue from 'vue'
import Antd from 'ant-design-vue'
import App from './App'
import 'ant-design-vue/dist/antd.css'
Vue.config.productionTip = false

Vue.use(Antd)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

以上代码完整地导入了 Antd。需要注意的是，CSS 文件需要单独导入。

仅导入您需要的组件

import Vue from 'vue'
import { Button, message } from 'ant-design-vue'
import App from './App'

Vue.config.productionTip = false

/* v1.1.2 */
Vue.component(Button.name, Button)
Vue.component(Button.Group.name, Button.Group)

/* v1.1.3+ Automatically register components under Button, such as Button.Group */
Vue.use(Button)

Vue.prototype.$message = message

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

我希望这些 UI 工具包能够对你有所帮助。

感谢阅读！

文章来源：https://dev.to/itachiuchiha/nice-vue-ui-toolkit-repositories-on-github-l9c