cube-ui 重构饿了吗Webapp的 scroll-nav域名插槽问题

Vue2.6 将 slot-scope 废弃了. 推荐使用 v-slot: 其使用方法大致如下: 注意多个插槽的情况下,最好都基于 <template> default插槽用法还是一样的,v-slot主要针对的是具名插槽和作用域插槽:当然你也可以像这样将 default写出来 <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template> 1.具名插槽:…

Hybrid框架UI重构之路：六、前端那点事儿（Javascript）

上文回顾 :Hybird框架UI重构之路:五.前端那点事儿(HTML.CSS) 这里讲述在开发的过程中,一些JS的关键点. 换肤对于终端的换肤,我之前一篇文章有说了我的想法. 请查看:http://www.cnblogs.com/lovesong/p/4122262.html iscroll的问题 1.使用iscroll的页面里面有表单元素,当键盘弹出再缩回后,页面拖不到最顶地方. 这个在android上总出现,使用的iscroll版本是4.2.5. 这原来是个很棘手的问题,导致了有inp…

Hybrid框架UI重构之路：五、前端那点事儿（HTML、CSS）

上文回顾 :Hybird框架UI重构之路:四.分而治之这里讲述在开发的过程中,一些HTML.CSS的关键点. 单页模式的页面结构在单页模式中,弱化HTML的概念,把HTML当成一个容器,BODY中显示的主体内容才是页面,一个HTML容器中可以存放1个或者多个页面,每个页面放置于section中.而一个页面(section)中必有主体内容(content),也有可能包含头部内容.底部内容,甚至一些侧滑菜单等. 所以,以我们通常看到的一个移动应用的界面中包含了顶部Title和主体内容的页面代码如…

Hybrid框架UI重构之路：四、分而治之

上文回顾:Hybird框架UI重构之路:三.工欲善其事,必先利其器上一篇文章有说到less.grunt这两个工具,是为了css.js分模块使用的.UI框架提供给使用者的时候,是一个大的xxx.js.xxx.css,但在开发时候,必须划分模块. CSS模块划分 1.variables.less 这里面是一些样式的变量.函数例: 字体: @baseFontSize: 20px; 圆角: .rounded-corners (@radius: 5px) { border-radius: @radiu…

Hybrid框架UI重构之路：三、工欲善其事，必先利其器

上文回顾:Hybird框架UI重构之路:二.事出有因工欲善其事,必先利其器,事是重构的目标,器是开发环境. 这篇文章将讲述重构时的UI框架的目录结构,且需要使用的开发工具. 目录结构 demo : 开发框架的模板(单页模式) demo-muti : 开发框架的模板(多页模式) demo-scene : 示例模板.一个完整的示例,目的是给使用者稍作修改就可以使用在项目上. demo-template : 给使用者使用的开发模板. demo-whole : 可在PC上演示的示例模板 dist :…

Hybrid框架UI重构之路：二、事出有因

上文回顾:Hybird框架UI重构之路:一.师其长技以自强一切的重构都是有原因的,或许为了更快速度.更好体验.更快捷开发等,于是就有了自己的开发目标,简单看看未重构前UI("中国移动式"风格). 上一篇文章说明调查了这么多类似框架,对比了他们的特点,而比对自身UI,也是存在可优化的地方,于是有了下面几点目标(仅仅UI框架方面,不涉及原生部分). (1)规范开发 1.SVN版本控制.之前的UI框架部分是没有进行svn版本控制的,于是会导致个问题——有些文件在多次修改后,连当初的开发者都…

Vue2.0仿饿了么webapp单页面应用

Vue2.0仿饿了么webapp单页面应用声明: 代码源于黄轶老师在慕课网上的教学视频,我自己用vue2.0重写了该项目,喜欢的同学可以去支持老师的课程:http://coding.imooc.com/class/74.html 源代码地址:https://github.com/ColinScales/shell 演示地址:https://colinscales.github.io/scale 手机扫码查看效果: ## 技术栈:vue-cli webpack axios vue…

Hybrid框架UI重构之路：一、师其长技以自强

这两年在支撑公司的Hybrid框架的运维发展,让人确认这种移动开发方式确实是一条不错的路.混合应用这种开发方式降低开发难度,极大的提高开发效率,最重要的一点效果可以接近原生应用.框架的本身是需要持续不断发展的,这里开始我讲述我重构Hybird框架的UI的这三个月(2014-11——2015-1),而在重构之前,预先调查了目前所了解的几个混合应用的框架,师其长技以自强. PS:Hybrid应用是web页面与原生壳(Android.IOS)的结合最后打成安装包的应用. 重构的前奏曲: ApiCl…

Vue.js高仿饿了么WebApp

介绍学习Vue.js也有一阵子了,为了加深对Vue的理解及运用,做了一个小项目.这是一个高仿饿了么外卖WebApp,现已完成商品预览.商品详情.商家预览.添加购物.查看评论等功能. 部分截图项目预览源码地址点击预览(请尽量使用手机预览) 移动端也可扫描以下二维码预览技术栈虽然项目较小,但常用的技术工具均有使用,本项目对于vue初学者来说,难度适宜,可以从中学到各种工具的运用,若能独立完成此项目,对自动化构建vue项目将有很大帮助.正在学习Vue的同学,不妨亲手试试吧.本项目使用到的技…

RookeyFrame2.0发布，UI重构

RookeyFrame2.0在原来1.0的基础上进行了UI的重构,设计了扁平化的样式风格,看起来更清爽,更赏心阅目,由于之前工作比较忙升级比较慢,后续会投入比较多时间来更新维护,同时针对二次开发项目做了一个简单demo项目,model建好初始化,进行一些简单的配置就可以实现基础功能,直接上图主界面: 列表页面: 编辑表单: 查看表单: 列表页面2: demo的git地址,有兴趣的同学可以看下: https://gitee.com/rookey/Rookey.FrameDemo…

本地运行github上的vue2.0仿饿了么webapp项目

在vue刚刚开始流行的时候,大多数人学习大概都见到过这样的一个项目吧,可以作为学习此框架的一个模板了 github源码地址:https://github.com/RegToss/Vue-SPA 课程教程:http://coding.imooc.com/class/74.html 首先搭建好vue的运行环境 1:安装node 端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,vue的运行是要依赖于node的npm的管理工具来实现,下载https://nodejs.org/e…

Vue.js2.5+cube-ui重构饿了么App*下载

第1章课程导学第2章项目准备工作第3章头部组件开发第4章 Tab 组件开发第5章商品页面开发第6章商品详情页开发第7章评价和商家页面开发第8章 create-api 原理分析第9章打包构建和项目部署第10章课程总结第11章课程简介第12章 Vuejs介绍第13章 Vue-cli 开启 Vuejs 项目第14章项目实战-准备工作第15章项目实战-页面骨架开发第16章项目实战-header组件开发第17章项目实战-goods 商品列表页开发…

UI事件之unload、resize和scroll

unload事件当页面卸载或用户从当前页面换到其他页面上时,会在window上触发unload事件.根据DOM2级规范规定,unload应该在body上触发,但所有浏览器都实现了在window上触发unload,以保证向后兼容. 与load事件相同,也有两种绑定方式,推荐使用JavaScript方式:  <html> <head></head> <body unload="alert(unloaded!)&…

【分享】Vue 资源典藏（UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例）

Vue 资源典藏,包括:UI组件开发框架服务端辅助工具应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 iview ★5801 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★5517 - Vue 2的移动UI元素 vue-material ★2790 - 通过Vue Material和Vue 2建立精美的app应用 muse-ui ★2611 - 三端样式一致的响应式…

vue UI框架

一.pc端 element UI 饿了么UI支持vue2.x80分优点:组件的API方法.属性等封装的较为完善缺点:样式有些生硬,不够炫酷美观 N3 N3支持vue2.x70分优点:组件操作几乎都有动画效果,组件较为丰富,比饿了么的操作更为人性化,比如表单部分,相较于elementUI可以直接自定义组件大小缺点:封装的方法.属性都是基本需求的,不够丰富 Vue Antd Antd支持vue1.x,据说不再有人维护70分优点:和elementUI很像,像的不像话,方法属性封装度较高缺点:不支持vu…

vue 专题 vue2.0各大前端移动端ui框架组件展示

Vue 专题一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建多个轻量库搭配使用请访问链接: https://www.awesomes.cn/subject/vue#%E5%BA%94%E7%94%A8-%E6%A1%86%E6%9E%B6 UI组件开发框架实用库服务端辅助工具应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★81…

Vue UI组件开发框架服务端辅助工具应用实例 Demo示例

Vue UI组件开发框架服务端辅助工具应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 iview ★5801 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★5517 - Vue 2的移动UI元素 vue-material ★2790 - 通过Vue Material和Vue 2建立精美的app应用 muse-ui ★2611 - 三端样式一致的响应式 UI 库 Ke…

vue统计组件库和ui框架

UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★6253 - Vue 2的移动UI元素 muse-ui ★3705 - 三端样式一致的响应式 UI 库 vue-material ★3328 - 通过Vue Material和Vue 2建立精美的app应用 vuetify ★2925 - 为移动而生的Vue JS 2组件…

前端UI框架小汇总

前言: 近期,小弟根据GitHub.前端社区.掘金等平台对当前流行的前端UI框架的进行了小小的整理和汇总(ps:前端UI框架的应用是通过GitHub star数,社区热度和使用范围等进行的粗略的汇总[不分先后]).希望对寻找UI框架的小伙伴们提供点帮助. 以下对前端UI框架的移动端.PC端和混合APP的应用进行了列举. 移动端UI框架 Mint UI(饿了么团队) 中文官网:http://mint-ui.github.io/#!/zh-cn 描述:基于vue的移动端UI框架基于vue 组件库:…

前端常用UI框架

移动端UI框架 Mint UI(饿了么团队) 中文官网:http://mint-ui.github.io/#!/en 饿了么前端团队推出的基于Vue.js的移动端组件库 GitHub地址:https://github.com/ElemeFE/mint-ui/ We UI(微信官方设计团队) 中文官网:https://weui.io/ WeUI 为微信 Web 服务量身设计,由微信官方设计团队为微信 Web 开发量身设计的一套同微信原生视觉体验一致的基础样式库 GitHub地址:https://g…

前端UI框架选择区别对比推荐

UI选择务必慎重,货比三家. 弱水三千只取一瓢:弱水三千只取一瓢,源起佛经中的一则故事,警醒人们在一生中可能会遇到很多美好的东西,但只要用心好好把握住其中的一样就足够了老牌构建于jQuery框架之上的UI外, 新锐UI派系: 基于Vue: ELementUI, iViewui 基于React: AntDesign, Amaze UI React 根据GitHub.前端社区.掘金等平台对当前流行的前端UI框架的进行了小小的整理和汇总(ps:前端UI框架的应用是通过GitHub star数,社区热…

vue.js相关UI组件收集

内容 UI组件开发框架实用库服务端辅助工具应用实例 Demo示例 ###UI组件 element ★9689 - 饿了么出品的Vue2的web UI工具套件 Vux ★6927 - 基于Vue和WeUI的组件库 mint-ui ★4870 - Vue 2的移动UI元素 iview ★4782 - 基于 Vuejs 的开源 UI 组件库 Keen-UI ★2401 - 轻量级的基本UI组件合集 vue-material ★2294 - 通过Vue Material和Vue 2建立精美的a…

[转载]前端——实用UI组件库

https://www.cnblogs.com/xuepei/p/7920888.html Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件官网:https://valor-software.com/ngx-bootstrap/#/ github: https://github.com/valor-software/ngx-bootstrap NG-bootstrap bootstrap4组件官网:https://ng-bootstrap.github.…

【转】前端——实用UI组件库

Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件官网:https://valor-software.com/ngx-bootstrap/#/ github: https://github.com/valor-software/ngx-bootstrap NG-bootstrap bootstrap4组件官网:https://ng-bootstrap.github.io/#/home NG-ZORRO 0.5,0.6两个版本分别支持angular4.x和5…

前端——实用UI组件库

vuetify，vux，Mint UI 等框架的选择

vuetify: https://vuetifyjs.com/zh-Hans/getting-started/quick-start NutUI:https://github.com/jdf2e/nutui/ 1. vonic vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约. 中文文档 | github地址 | 在线预览 vonic 2. vux vux 基于WeUI和Vue(2.x)开发的移动端UI组件库.基于webpack+vue-…