基于vue移动端UI框架有哪些？vue移动端UI框架总汇

vue现在使用的人越来越多了，这篇文章主要整理一些比较优秀的移动端ui框架，推荐给大家，例如：mint UI、vux、vonic、vant、cube-ui、Muse-ui、Vue-Carbon、YDUI

mint UI

1.Mint UI 包含丰富的 css 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。

2.真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。

3.考虑到移动端的性能门槛，Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。

4.依托 Vue.js 高效的组件化方案，Mint UI 做到了轻量化。即使全部引入，压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。

// 安装基于vue2.0
npm install mint-ui -S
//使用
// 引入全部组件
import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);
// 按需引入部分组件
import { Cell, Checklist } from 'minu-ui';
Vue.component(Cell.name, Cell);
Vue.component(Checklist.name, Checklist);

官网：http://mint-ui.github.io/#!/zh-cn
github:https://github.com/ElemeFE/mint-ui/

vux

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

2.基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式。vux-loader保证了组件按需使用，因此不用担心最终打包了整个vux的组件库代码。

3.vux并不完全依赖于WeUI，但是尽量保持整体UI样式接近WeUI的设计规范。最初目标是创建一个易用，实用，美观的移动端UI组件库，现在离理想状态还有不少距离，因此需要大家及时反馈问题及贡献代码。

//安装
npm install vux --save
//使用
import { AlertPlugin, ToastPlugin } from 'vux'
Vue.use(AlertPlugin)
Vue.use(ToastPlugin)

官网：https://vux.li/
github:https://github.com/airyland/vux

vonic

1.一个基于 vue.js 和 ionic 样式的 UI 框架，用于快速构建移动端单页应用。和 ionic没有关系，只是在样式方面以 ionic 的 css 文件为基础（做了一些调整）

2.vonic 依赖以下几个库，在创建 vonic 项目之前，请确保引入它们: vue-router,axios (vue.js 官方推荐的 ajax 方案)

//安装
npm install vonic --save
//使用
//应用挂载点
<von-app></von-app>
//启动应用
Vue.use(Vonic.app, {
  routes: routes
})

官网：https://wangdahoo.github.io/vonic/
github: https://github.com/wangdahoo/vonic

Muse-ui

1.Muse UI 基本实现了 Material Design 设计规范类的所有组件，另外还开发许多的功能性的组件

2.Muse UI 使用less文件，所有的颜色都有一个变量维护，通过编写 less 文件完成自定义主题，另外组件内部也提供一些修改效果的参数

3.Muse UI 基于 Vue2.0 开发，Vue2.0是当下最快的前端框架之一，小巧，api友好，可用于开发的复杂单页应用

//安装
pm install --save muse-ui
//加载
import Vue from 'vue'
import MuseUI from 'muse-ui'
import 'muse-ui/dist/muse-ui.css'
Vue.use(MuseUI)

官网：http://www.muse-ui.org/
github: https://github.com/museui/muse-ui

vant

1.组件都是来源于有赞的微商城业务，并且经过有赞业务的检验，更靠谱

2.丰富的文档和Demo

3.支持 babel-plugin-import

4.单元测试覆盖率超过90%

5.不仅仅有丰富的基础组件，还有许多的业务组件

//安装
npm i -S vant
//按需引入组件
import { Button } from 'vant/lib/button';
import 'vant/lib/vant-css/base.css';
import 'vant/lib/vant-css/button.css';
//导入所有组件
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/vant-css/index.css';
Vue.use(Vant);

文档：https://www.youzanyun.com/zanui/vant#/zh-CN/component/quickstart
github:https://github.com/youzan/vant/

cube-ui

1.由滴滴内部组件库精简提炼而来，历经考验，并且每个组件都有充分单元测试，为后续集成提供保障。

2.以迅速响应、动画流畅、接近原生为目标，在交互体验方面追求极致。

3.遵循统一的设计交互标准，高度还原设计效果；接口标准化，统一规范使用方式，开发更加简单高效。

4.支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。

//安装使用：
npm install cube-ui --save
//使用
import Vue from 'vue'
import Cube from 'cube-ui'
Vue.use(Cube)

官网：https://didi.github.io/cube-ui/
github:https://github.com/didi/cube-ui/

Vue-Carbon

一个基于 Vue 开发 material design 风格的移动端 UI 库

//安装
npm install vue-carbon --save
//使用
import Vue from 'vue'
import VueCarbon from 'vue-carbon'
import 'vue-carbon/dist/vue-carbon.css' // 加载文件
Vue.use(VueCarbon)

文档：http://www.myronliu.com/vue-carbon/#!/
github: https://github.com/myronliu347/vue-carbon

YDUI

1.YDUI Touch 专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高。

2.使用 Flex 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局。

3.实现强大的屏幕适配布局，等比例适配所有屏幕。什么？用得不开心？轻松切换 px。

4.自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。

<!-- 引入YDUI样式 -->
<link rel="stylesheet" href="path/build/css/ydui.css" />
<!-- 引入YDUI自适应解决方案类库 -->
<script src="path/build/js/ydui.flexible.js"></script>

<!-- 引入jquery 2.0+ -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 引入YDUI脚本 -->
<script src="path/build/js/ydui.js"></script>

官网：http://www.ydui.org/
github: https://github.com/ydcss/ydui

除了上面的这些基于VUE的UI组件外，还有很多其他的暂未整理。请留言补充哦~~~~~~~

链接: https://www.fly63.com/article/detial/166