移动端vue.js ui - 腾讯云开发者社区

文章/答案/技术大牛

发布

Vue移动端UI框架

自从Vue成为前端的主流框架之后，各家UI框架也越来越多，今天重点聊一聊移动端的那些框架吧，Vue移动端框架到底哪家强？以下排名不分先后，开发过程中根据自己的具体业务需求来做选择。...x-page=v2-doc-home#/ VUX 是基于 WeUI 和 Vue.js 的移动端 UI 组件库,提供丰富的组件满足移动端(微信)页面常用业务需求，可以说是相当的全面了。 ?...://elemefe.github.io/mint-ui/#/ 饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库，包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要...#/ 在线预览：https://wangdahoo.github.io/vonic/docs/#/home 一个基于 vue.js 和 ionic 样式的 UI 框架，用于快速构建移动端单页应用.../quick-start cube-ui 是滴滴17年底开源的一款基于 Vue.js 2.0 的移动端组件库，主要核心目标是做到体验极致、灵活性强、易扩展以及提供良好的周边生态—后编译。

3.7K2 0

滴滴开源基于 Vue.js 的移动端组件库 cube-ui

综合自：https://didi.github.io/cube-ui/ 继 6 月份开源Android 端插件化框架 VirtualAPK后，滴滴近日又开源了第二个项目 —— 基于 Vue.js 实现的移动端组件库...cube-ui 。...移动端组件库 cube-ui 授权协议：Apache 开发语言：JavaScript 操作系统：跨平台开发厂商：滴滴 Github：https://didi.github.io/cube-ui/ cube-ui...简介 cube-ui 是由滴滴开源的基于 Vue.js 实现的移动端组件库。...cube-ui 其他模块除了组件之外，cube-ui 还有一些特殊的模块。

3.8K0 0

您找到你想要的搜索结果了吗？

是的

没有找到

码云推荐 | 基于 vue.js 的移动端组件库 mint-ui

升级版的mint-ui，基于vue.js,可自己拓展组件。 Installation 推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。...“ npm i mint-ui -S # for Vue 1.x npm i mint-ui@1 -S Usage Import all components. “ import Vue from 'vue...mint-ui/lib/radio'; import 'mint-ui/lib/radio/style.css'; Vue.component(MtRadio.name, MtRadio); babel-plugin-component...://cdn.rawgit.com/ElemeFE/mint-ui/master/lib/style.css NPMCDN https://unpkg.com/mint-ui/lib/index.js...https://unpkg.com/mint-ui/lib/style.css

1.9K10 0

基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

item.commentCount}} vue.js...网上找到很多mint-ui 的loadmore组件来实现上拉加载更多，由于上拉触发相应的加载更多事件，所以当进入页面的时候应该不会自动载入数据，则这里可以加一个获取第一页数据的函数。

3.3K5 0

Vue PC端框架和Vue移动端UI框架

下面是我整理的 Vue PC端和移动端的UI框架，建议收藏，方便以后学习的时候拿出来查看。 Vue PC端框架 1....Keen UI 在线文档：https://josephuspaye.github.io/Keen-UI/#/ui-alert github地址：https://github.com/JosephusPaye.../Keen-UI Vue移动端UI框架 1.Vux 中文文档：https://vux.li/#/ 在线预览：https://vux.li/demos/v2/?...x-page=v2-doc-home#/ 2.Mint UI 中文文档：http://mint-ui.github.io/docs/#/ github地址：https://github.com/ElemeFE.../mint-ui 在线预览：http://elemefe.github.io/mint-ui/#/ 3.MUI 中文文档：http://dev.dcloud.net.cn/mui/ github地址

2.9K4 0

Vue.js开发移动端经验总结

作者：阡ゼ陌移动端适配相对于PC端来说，移动端设备分辨率百花齐放，千奇百怪，对于每一个开发者来说，移动端适配是我们进行移动端开发第一个需要面对的问题。...idealviewport为浏览器定义的可完美适配移动端的viewport，固定不变，可以认为是设备视口宽度device-width。...user-scale=no禁止缩放所以现在我们知道，这段在移动端常见的代码的意思，即将visualviewport和layoutviewport设置为idealviewport的值；这样我们在移动端就不会出现滚动条...UI出图的时候一般是有一个固定的宽度的，而我们实际的移动端设备的宽度却都不太一样，但是如果页面元素的缩放比例和页面宽度的缩放比例一致，在不同尺寸的设备下我们网页的效果也将会是一致的。...键盘弹出与使用transform属性的情况在移动端是很常见的，所以需要谨慎使用position:fixed。推荐使用flex flex，即弹性布局，移动端兼容性较好，能够满足大部分布局需求。

5.4K1 0

Vue：移动端 UI 如何做适配？

导语 | 移动端做 UI 适配其实很简单。这里仅指手机端，iPad 及 PC 端需要另做打算。目录三类法三规则为什么选择 iPhone6 做基准本文大约 1000 字，阅读 5 分钟。...iPhone 仅手机端就有这么多尺寸： ? 每种尺寸都要单独做一套 UI 及样式吗，显然不现实。合理的做法是将设备尺寸分为三类，只处理三类尺寸。Android 适配亦是如此。 ?

2K2 0

移动端重构实战系列7——环形UI

本文作者：IMWeb 结一原文出处：IMWeb社区未经同意，禁止转载 ”本系列教程为实战教程，是本人移动端重构经验及思想的一次总结，也是对sandal及sheral UI的一次全方位剖析，

2.3K6 0

移动端重构实战系列7——环形UI

这里主要分析下圆环的实现，蓝色的进度条圆环由左右两边构成，这里以右半边的为例，html结构为.circle-right > .right-inner(为了视觉效...

1.3K2 0

基于cube-ui搭建移动端项目

一、配置官方文档 1.1 vue-cli < 3 此安装部分只针对于 vue-cli < 3 的情况 npm install cube-ui --save cube-ui 搭配 webpack...--新增的部分开始--> "transformModules": { "cube-ui": { "transform": "cube-ui/lib/${member...const TransformModulesPlugin = require('webpack-transform-modules-plugin') //将solve中的alias中增加'cube-ui...'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'cube-ui': 'cube-ui/lib'...Dialog, ActionSheet, Drawer, // scroll Scroll, Slide, IndexList, Swipe } from 'cube-ui

2K2 0

WebApp移动端前端UI库推荐—Frozen UI、WeUI、SUI Mobile

我始终坚信WebApp会有未来，所以研究了一下符合国情的移动前端UI库，发现腾讯和淘宝在这块都做得不错，百度那个WebUploader – 文件上传组件做的不错，还有百度的UEditor – 富文本编辑器...，但是移动前端UI库暂时没发现。...Frozen UI 自述：简单易用，轻量快捷，为移动端服务的前端框架。...SUI Mobile 主页：http://m.sui.taobao.org/ 自述：轻量、小巧、精美的UI库，方便迅速搭建手机H5应用，也非常适合开发跨平台Web App。

5.3K1 0

移动端项目设配UI设计图方法

由于要使用UI的设计图，所以需要根据UI设定的尺寸来写页面下面是移动端适配的方法在script标签中执行 (function (doc, win) {...win.addEventListener(resizeEvt, recalc, false); })(document, window); 其中这里的375是根据UI...name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> 最后根据UI...除以100后得到的数字+rem就是移动端设配的方法示例 <div style="width:2.18rem;height:0.21rem;font-size:0.15rem;font-weight:400

6433 0

基于Appium的移动端UI自动化测试

为什么需要UI自动化测试移动端APP是一个复杂的系统，不同功能之间耦合性很强，很难仅通过单元测试保障整体功能。...UI测试是移动应用开发中重要的一环，但是执行速度较慢，有很多重复工作量，为了减少这些工作负担，提高工作效率，需要引入可持续集成的自动化测试方案。...为了应对快速迭代的移动端应用功能，越来越多的App采用混合模式，即将部分功能交给应用内嵌的Web页面实现。...可以传入元素ID对应的字符串，By.id表示通过元素resource-id查找 driver.findElement(By.id(type)).click(); } 编写case时，使用UI...自动化测试常用的Page Object设计模式，即为APP中需要测试的UI页面定义一个Page对象，该对象中包含页面上的可操作或可校验元素，并添加常用方法。

3.9K1 0

Vue移动端框架Mint UI教程-底部导航栏（二）

---- 官网：https://mint-ui.github.io/#!...，正好今天要聚餐，趁着下午的时间，把之前没有写完的Mint UI教程继续写一写。...接着上一篇：Vue移动端框架Mint UI教程-搭建环境引入框架（一）：https://www.jianshu.com/p/874e5152b3c5 开始来写代码： 1：在components里面新建一个.../router' import Mint from 'mint-ui' import 'mint-ui/lib/style.css' Vue.config.productionTip = false...github链接：https://github.com/wangxiaoting666/Mint-UI

2.9K2 0

Vue移动端框架Mint UI教程-组件的使用（三）

---- 官网：https://mint-ui.github.io/#!.../zh-cn Github: https://github.com/ElemeFE/mint-ui/ ---- 前面两节说到，从搭建环境，引入Mint框架，到实现一个页面导航跳转； Vue移动端框架...Mint UI教程-搭建环境引入框架（一）：https://www.jianshu.com/p/874e5152b3c5 Vue移动端框架Mint UI教程-底部导航栏（二）：https://www.jianshu.com.../p/56e887cbb660 然后就是开始写每个页面的代码，Mint UI存在必有道理基于vue2.0mint-ui组件的使用 ?... import { Toast } from 'mint-ui

2K3 0

Vue移动端框架Mint UI教程-底部导航栏（二）

官网：https://mint-ui.github.io/#!.../zh-cn Github: https://github.com/ElemeFE/mint-ui/ 最近一个月的时间，工作上的事情特别多，要同时开发维护三四个项目，让人觉得有些憔悴，也没有时间去学习了...，正好今天要聚餐，趁着下午的时间，把之前没有写完的Mint UI教程继续写一写。...接着上一篇：Vue移动端框架Mint UI教程-搭建环境引入框架（一）：https://www.jianshu.com/p/874e5152b3c5 开始来写代码： 1：在components里面新建一个.../router' import Mint from 'mint-ui' import 'mint-ui/lib/style.css' Vue.config.productionTip = false

5040 0

Vue移动端框架Mint UI教程-组件的使用（三）

官网：https://mint-ui.github.io/#!.../zh-cn Github: https://github.com/ElemeFE/mint-ui/ 前面两节说到，从搭建环境，引入Mint框架，到实现一个页面导航跳转； Vue移动端框架Mint UI...教程-搭建环境引入框架（一）：https://www.jianshu.com/p/874e5152b3c5 Vue移动端框架Mint UI教程-底部导航栏（二）：https://www.jianshu.com.../p/56e887cbb660 然后就是开始写每个页面的代码，Mint UI存在必有道理基于vue2.0mint-ui组件的使用 import { Toast } from 'mint-ui

5070 0

Vue移动端框架Mint UI教程-接口跨域问题

这个时候，是遇到了跨域的问题；由于接口跨域问题，因此不能直接通过ajax请求访问

9742 1

Vue移动端框架Mint UI教程-跳转新页面(四)

前三节写了vue的移动端框架的入门篇章，今天接着写，今天写的教程其实很简单，在之前的基础上，新建一个界面，并且进行跳转新页面。 ---- 官网：https://mint-ui.github.io/#!.../zh-cn Github: https://github.com/ElemeFE/mint-ui/ ---- Vue移动端框架Mint UI教程-搭建环境引入框架（一） https://www.jianshu.com.../p/874e5152b3c5 Vue移动端框架Mint UI教程-底部导航栏（二） https://www.jianshu.com/p/56e887cbb660 Vue移动端框架Mint UI教程-

2.4K3 0

点击加载更多

Vue移动端UI框架

滴滴开源基于 Vue.js 的移动端组件库 cube-ui

码云推荐 | 基于 vue.js 的移动端组件库 mint-ui

基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

Vue PC端框架和Vue移动端UI框架

Vue.js开发移动端经验总结

Vue：移动端 UI 如何做适配？

移动端重构实战系列7——环形UI

移动端重构实战系列7——环形UI

基于cube-ui搭建移动端项目

WebApp移动端前端UI库推荐—Frozen UI、WeUI、SUI Mobile

移动端项目设配UI设计图方法

基于Appium的移动端UI自动化测试

Vue移动端框架Mint UI教程-底部导航栏（二）

Vue移动端框架Mint UI教程-组件的使用（三）

Vue移动端框架Mint UI教程-底部导航栏（二）

推荐一款移动端的web UI控件 -- mobiscroll

Vue移动端框架Mint UI教程-组件的使用（三）

Vue移动端框架Mint UI教程-接口跨域问题

Vue移动端框架Mint UI教程-跳转新页面(四)

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐