如何选择一个 vue ui 框架？

LIYI

发布于 2020-02-11 15:37:48

5K0

发布于 2020-02-11 15:37:48

1，比较流行的 UI 框架有哪些？
1.1 适用 PC 端
1.2 适用移动端
1.3 其它
2，vuetify 是什么，为什么选择它？
2.1 Vuetify给出的 vue ui 框架对比图
2.2 vuetify 支持移动应用吗？
2.3 基于 vuetify 后台 web 应用如何开发？
2.4 如何在微信小程序中使用 vuetify？
2.5 如何快速开始使用 vuetify？
参考链接

“Material Design 并不是一种单一风格，而代表着一套源自纸张与墨水的适应性设计系统。经过精心编排，你将能够更快构建起美观且实用的产品。”

在选择 UI 框架之前或之后，推荐阅读一下谷歌的设计指南。框架未立，思想先明。

1，比较流行的 UI 框架有哪些？

关于选择哪一个 UI 框架，有人推iview，有人推mintui，有人推vant，还有人推bootstrap4。

框架这东西，各有优劣，难以选出一个目前最好的。当下最好的，也不一定一直优秀。直接选一个有长期支持计划、社区活跃、组件丰富、支持多端开发、上手成本低的就可以了。

1.1 适用 PC 端

elementUI

支持vue2.x，饿了么前端团队打造

iView

支持vue2.x

Vue Antd

支持vue1.x，据说不再有人维护

支持vue2.x

AliTelecom UI

支持vue2.x，阿里通信技术团队打造

Vue-Blu

基于Vuejs和Bulma开发

Vue-Beauty

基于 vue.js 和 ant-design样式的PC端UI组件库

Vuetify

一个material design vue 组件库

vue-material

同 Material 风格的组件库

Keen-UI

又一个 Material 风格的组件库

Vue Admin

基于Vue 2.0 和 Bulma 0.2 开发的后台界面框架

1.2 适用移动端

Muse-UI

基于Material Design开发，支持vue2.0

Mint UI

支持vue2.0，饿了么前端团队打造

VUX

基于WeUI和Vue(2.x)开发的移动端UI组件库，主要服务于微信页面

VUWE

基于微信WeUI所开发的，专用于Vue2的组件库

WEEX

阿里推出的跨平台的移动端开发框架,可以构建高性能、可扩展的 native 应用

VueStrap

基于 Vue.js 的 Bootstrap 组件，不需要 jQuery 和 Bootstrap 的 JS 文件

vonic

基于 vue.js 和 ionic 样式的UI框架，用于快速构建移动端单页应用。

vue-carbon

基于 vuejs 1.0 开发 material design 风格的移动端 WEB UI 库

VUM

vue-mobile是用于SPA的Vue.js的UI框架

1.3 其它

Quasar

Star 数超过 6K，是构建 Vue.js 响应式网站、PWA、混合移动应用和 Electron 应用的流行框架。

Vue Material

Star 数差不多 6K，是一个实现了谷歌 Material Design 的简单库。

Buefy

Star 数 3K 左右，基于 Bulma（https://bulma.io）提供了一组轻量级的 UI 组件。

Bootstrap Vue

为 Vue.js 提供了 Bootstrap 4 组件和网格系统的实现。

AT-UI

一个模块化的前端 UI 框架，用于开发基于 Vue.js 的 Web 界面，适用于桌面应用程序。

地址：https://github.com/at-ui/at-ui

Uiv

用于 Vue 2 的 Bootstrap 3 组件库。

Vuikit

一个用于网站界面的响应式的 Vue UI 库，设计风格干净而统一。

https://github.com/vuikit/vuikit

Onsen UI+Vue

基于流行的 Onsen-UI 框架，封装了核心 Web 组件并暴露了 Vue 风格的 API。

Semantic UI+Vue

Semantic-UI 框架与 Vue.js 的集成。

https://semantic-ui-vue.github.io/

Fish-UI

fish-ui 提供了一个基于 Vue 的 Web 工具包，其中包含整洁干净的组件。

https://github.com/myliang/fish-ui

Framework7 Vue

这个集成提供了几乎所有的 Framework7 元素和组件。

地址：https://framework7.io/vue/

Cube UI

是用于 Vue.js 移动应用程序的 UI 组件库。

地址：https://github.com/didi/cube-ui

Vueblu

基于 Vue 2.0 和 Bulma 的 UI 组件库，用于构建中台和后台办公产品。

Mand Mobile

Mand Mobile是面向金融场景的Vue移动端UI组件库。

https://didi.github.io/mand-mobile/#/zh-CN/home

为什么会有这么多框架？

每个公司都有自己独特的业务需求，只要公司支持，员工肯做，一个 UI 框架很快就可以开发出来。

2，vuetify 是什么，为什么选择它？

Vuetify 是 Vue.js 的一个UI组件库，自2016年以来一直在积极开发。提供使用谷歌 Material Design 设计指南构建现代网站所需的一切 UI 能力。它通过一致的更新周期、对以前版本的长期支持(LTS)、响应式社区参与、巨大的资源生态系统和提供高质量组件来实现这一点。

目前，Vuetify 已经成为 Vue 应用程序当中，遵循谷歌 Material Design 规范的，最完整的用户界面组件库之一。

其中有一个最重要的原因，就是它是有思想的。Material Design 就是它的思想。统一的思想，利于开发出风格一致的项目外观，同时也利于不岗位之间的沟通。

2.1 Vuetify给出的 vue ui 框架对比图

第一条：组件数量。仅次于 element ui。

第二条：Full Accessibility，全面无障碍支持。

Accessibility 此处译为无障碍。Android 手机上有一项顶重要的服务叫 Accessibility Service，做过 App 无人值守测试开发或微信朋友圈自动点赞的朋友对它都不陌生。

Section 508 指什么？

美国508无障碍法案。1973年颁布的美国劳工复健法的改进，强调所有技术（电子信息技术）要考虑到残障人士的应用。

第四条：Long-term Support，长期支持。

第五条：Release cadence，发版节奏。

第六条：冗余清扫。Tree Shaking，用于描述移除 JS 文件中的“引而未用”代码，就像秋风撼树一样，将残枝败叶一摇而下。它依赖于 ES2015 模块语法的“静态结构”特性，例如 import 和 export。Tree Shaking 这个概念，是由随着模块打包工具 rollup 普及起来的。

第七条：RTL Support，自右向左布局支持。

我们常用的习惯，称之为 LTR（Left-To-Right），阅读书写从左向右。而 RTL（Right-To-Left）则正好相反，是从右向左。常见使用 RTL 习惯的语言有阿拉伯语、希伯来语等。不支持 RTL 的框架，不能说是一个全面支持全球国际化的框架。

第八条：Premium Themes，高级主题支持。

第九条：商业及企业支持。

2.2 vuetify 支持移动应用吗？

vuetify 为移动设备而生。所有的 vuetify 组件都是专为移动设备设计。应用程序可以轻松在不同的方向和屏幕尺寸间转换。从桌面，到平板、手机，都可以。

以表单为例，将表单 width 改为 auto，自适应移动端。移动模样一瞥：