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

时间: 2017-11-24阅读: 30097标签: vue

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


mint UI

  • 1.Mint UI 包含丰富的 cssjs 组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。
  • 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组件外,还有很多其他的暂未整理。请留言补充哦~~~~~~~


    站长推荐

    1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

    2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

    基于Vue实现后台系统权限控制

    用Vue/React这类双向绑定框架做后台系统再适合不过,那么如何在一个Vue应用中实现权限控制呢?下面是我的一点经验。

    vue之nextTick全面解析

    vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架。本人比较喜欢用之。在我们用vue时,我们经常用到一个方法是this.$nextTick

    如何理解vue中的v-bind?

    若不是动态属性,首先为其增加驼峰化后的监听,然后再为其增加一个连字符的监听,例如v-bind:foo-bar.sync,首先v-on:update:fooBar,然后v-on:update:foo-bar。v-on监听是通过addHandler加上的。

    详细分析Vue.nextTick()实现

    刚开始接触Vue的时候,哇nextTick好强,咋就在这里面写就是dom更新之后,当时连什么macrotask、microtask都不知道(如果你也不是很清楚,推荐点这里去看一下,也有助于你更好地理解本文),再后来,写的多了看得多了愈发膨胀了,就想看看这个nextTick到底是咋实现的

    Vue 3.0 将从头开始重写!

    Vue.js 伦敦大会上,Vue.js 作者尤雨溪简要介绍了 Vue 下一个主要版本要发布的内容,不久前,尤雨溪在 medium 个人博客上发布了 Vue 3.0 的开发路线,我们不妨看看 Vue 3.0 将会有怎样的发展。

    组件化的概念/特性/优点,Vue组件的使用

    Web 中的组件其实就是页面组成的一部分,具有高内聚性,低耦合度,互冲突等特点,有利于提高开发效率,方便重复使用,简化调试步骤等。vue 中的组件是一个自定义标签形式,扩展原生的html元素,封装可重用的代码。

    vue混入

    混入是一种分发Vue组件中可复用功能非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。当组件和混入对象含有同名选项时,这些选项将以恰当的方式混合。

    谈谈vue的render函数?

    使用vue 这么长时间,对vue 对源码了解还是不多,作为一个不甘平庸的前端小白,决定奋起,那么今天我们就来谈谈vue 的render 函数;打开源码,我发现render 函数返回一个VNode; 可是我们并未在模版中写render 呀,这又是一个什么样的过程呢?

    vue2.0之监听属性的使用心得及搭配计算属性的使用

    在工作中常常需要监听某一个属性值的变化,这个时候我们就需要用到了监听属性watch,在这里我总结watch属性的三种场景使用希望对你有所帮助

    对Vue.js的认知

    MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。

    点击更多...

    内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

    文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

    小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广