vue现在使用的人越来越多了,这篇文章主要整理一些比较优秀的移动端ui框架,推荐给大家,例如:mint UI、vux、vonic、vant、cube-ui、Muse-ui、Vue-Carbon、YDUI
// 安装基于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/
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
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
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
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/
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 开发 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
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组件外,还有很多其他的暂未整理。请留言补充哦~~~~~~~
Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后使用$nextTick,则可以在回调中获取更新后的DOM(dom的改变是发生在nextTick()之后),这个方法作用是当数据被修改后使用这个方法
vue中的watch是一个对象,所以一定要当成对象来用,它有键-值组成,其中键就是你要监控的那个数据。这篇文章介绍:vue如何实现首次不触发watch,vue如何实现数据的深度监听?
在需要身份验证的前端应用里,我们经常想通过用户角色来决定哪些内容可见。比如,游客身份可以阅读文章,但注册用户或管理员才能看到编辑按钮。在前端中管理权限可能会有点麻烦。你之前可能写过这样的代码
Vue.js是一套构建用户界面的渐进式的前端框架。 vueJS与后台交互数据的方法我所了解的有以下几种
Web 中的组件其实就是页面组成的一部分,具有高内聚性,低耦合度,互冲突等特点,有利于提高开发效率,方便重复使用,简化调试步骤等。vue 中的组件是一个自定义标签形式,扩展原生的html元素,封装可重用的代码。
Vue是一套构建用户界面的JS渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。讲解js高级之响应式、过渡效果、过渡状态。
Vue高版本中一些新特性的使用:深度作用选择器、组件配置项inheritAttrs、组件实例属性$attrs和$listeners、组件选项 provide/inject、作用域插槽 slot-scope、Vue的错误捕获
在vue组件中,为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块,这是一个非常好的举措,但是为什么要慎用呢?因为scoped往往会造成我们在修改公共组件(三方库或者项目定制的组件)的样式困难,需要增加额外的工作量
用Vue/React这类双向绑定框架做后台系统再适合不过,那么如何在一个Vue应用中实现权限控制呢?下面是我的一点经验。
Vue为我们提供了很多高级特性,学习和掌握它们有助于提高你的代码水平。从我们刚开始学习Vue的时候,对于侦听属性,都是简单地如下面一般使用:
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!