vum-team/vum

An UI Framework build with Vue.js for mobile webapp

vue-mobile - V2.0.0-rc.1

An UI Framework build with Vue.js

vum is update to [email protected]! checkout to v0.1.1 for [email protected].

Click http://demo.getvum.com/ or scan vcode to see live demos:

What is?

vue-mobile is an UI Framework build with Vue.js for SPA:

• Full Page Structure - header, content, footer
• Page transition support by vue-router
• Bunch of Powerful Components, easy to use and extend
• high performance CSS3 Animation
• 1px border for all components - as well as round border
• Write with Vue - the most important

Love Vue

Vue is the best View Layer Framework I have ever seen:

• Elegant API
• Two way binding, Components
• Easy to build large scale App
• Wonderful Components Organization.

Progress

• Page

• Buttons

• Column

• Grid

• List

• Cards

• Contacts

• Form

• Icons

• Modal

• Preloader

• Tab

• Scroll

• Popup

• Actions

• Toast

• Search Bar

• Calendar

• Photo Browser

• Swiper

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# run unit tests
npm run unit

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

Get Start

Two way to create a project with vum?

clone source code directly

1. Clone this repo to your work dir
2. npm install to install dependences
3. npm run dev to run dev server with hot reload.
4. Open http://localhost:8088 in your browser, then you can see the demos
5. Change to dir src/demos, modify what you want, and remove unused pages

That's all! You can do it :) Do not forget to reinit git.

use npm

1. Create your project, vue-cli is recommend
2. npm install vum in the root of your project
3. Import the components you wanted in src

Thanks

The css style of components comes from:

• Framework7
• Light7
• WeUI
• MSUI
• Ratchet
• vue-strap

And vui-mobile could never be completed without these:

• Vue
• vue-router
• Less
• Webpack

Stay In Touch

Please make sure that you have some knowledge about vue.js before join QQ group:

• QQ Group: 581532614

Screenshot

vum's Issues

记住页面滚动条位置有问题

从主页->list页面正常，然后从list－>detail页面以及返回都会记住list页面滚动的位置，但是从list页面回退到主页之后，继续从主页进list页面就会出现滚动条会出现在detail页面回退到list页面的位置（除非在返回的时候清空相应的session） @lihongxun945

vum 怎么结合jquery weui使用？求入门demo

ui库好看,秀女朋友就是你的不对了啊

http://vuem.io/vue-mobile/contacts

preloader，toast，轮流试用容易会产生一个无法消除的overlay层，挡住了所有的操作

如果作者需要源码，我可以发给你。

浏览器或安卓机的返回时会重复

当按手机的返回键时 页面返回后 又切换返回动画

light7的功能现在是不是比这个vum多啊

我只想专心学一款好的，结果发现了f7,然后又发现了sui,.......最后到这了....

list不能动态渲染

<page-content>
  <list v-for="(item, index) in items" :key="item.id">
    <list-item>
      <div class="item-media"><img src="../assets/images/icon-list.png" width="30"></div>
      <div class="item-content">
        <div class="item-title-row">
          <div class="item-title">{{item.name}}</div>
          <div class="item-after">After</div>
        </div>
      </div>
    </list-item>
  </list>
</page-content>

scroll组件的小问题

当scroll组件的scrollTop>0时，下拉至scrollTop=0的位置时会有个跳动，diff需要扣除初始scrollTop的偏移值才行。

这个项目可以实际投入使用吗？

还是要等vue2的版本出来才能用？

缺少picker组件，可惜

缺少picker组件，可惜，picker在您的JQ那框架里面很有用，vue的加个进去就完美了

vue使用vum中日历组件时,不能多选吗?

如题,jquery-weui的日历是可多选的,但是vum中貌似只能单选.

能否提供直接引入的方式使用？

建议overlay inner在父组件 .touching 生效或失效时的transtion进行css设置

touchend时，inner如果也有.3s感觉会不错。

关于此项目

Hi All，

感谢大家对此项目的支持。

L7 的主要目标是用来做SPA，一般会是一个稍微大型一些的项目，而不是一个简单的类似活动页面之类的小项目。所以除了提供UI控件外，如何解决大型应用开发中遇到的问题其实也是L7应该关注的地方，但是基于 jQuery 这样轻量的库来实现的版本确实比较难完美解决如下的几个问题：

• 模块化，模块间通信，组件化，HTML/CSS/JS之间的依赖关系
• 自动构建，项目结构
• 双向数据绑定，模板等

经过最近的调研，对比 Vue, Angular2, React 三个目前最火的前端框架，决定选用 Vue 来重写 L7 的JS部分，再借鉴 jQuery WeUI, VUX等UI库中的部分组件，完成一套新的UI框架，暂时命名为 VUI。

以后会主要会维护这两个项目：

• VUI，基于Vue, 重量级的UI框架，针对SPA大型项目，样式主要来源于 L7(F7)，以及一些优秀的其他开源项目。
• jQuery WeUI, 基于 jQuery开发，轻量的UI库，主要针对微信公众账号，样式大部分来自官方 WeUI 以及 L7，有不少其他库没有的新组件。

因为精力所限，L7 会逐步减少更新的次数，望大家谅解，但是此项目并不会关闭，所以已经用的童鞋也不必有太大担心。

肯定会有很多人问会jQuery用的好好的为什么要这么折腾？

jQuery 可能未来十年内都不会落伍，但是前端技术日新月异，无论 Vue, Angular, React 是不是未来的趋势，至少本阶段他们可以解决很多以前很难解决的问题，也很大程度上推进了前端的技术发展&开发效率。一个好的程序员应该能紧跟技术的发展，不能在一棵树上吊一辈子。我也在不断的摸索中，Vue 也许不是最佳选择，但至少是一个对大多数项目来说都非常棒的选择。

至少现在来看， Vue能明显提升开发效率，在开发大型应用的时候也能很好地通过模块化组织来保证代码的可维护性。现在的前端开发重点已经不是样式和兼容性，而是如何构建大型的、高效的、可维护的应用。传统后端开发已经在这方面做得非常好了，前端还处在探索阶段，而 Vue 这一类的框架目前是做得最好的。

可能这类框架再过五年就会销声匿迹，被更新更好的框架取代，但是并不妨碍我们去研究和使用它。

为什么要重复造轮子？

可能还会有人问，已经有 Vux 这样的库了，为什么还要再造轮子呢？大概有以下几个原因：

• 丰富 Vue 生态圈，多一种选择
• 我个人可以更好的掌控整个项目
• VUI 会有一些你在其它任何框架中都找不到的有点
• 个人对 Vue 的爱

VUI 地址： https://github.com/lihongxun945/vui

更新：
因为已经有一个项目叫 VUI了，为了避免重名的麻烦，所以这个项目改名叫 vue-mobile

希望Slide支持动态更新

Slide控件初始化必须有至少一个slide节点, 同时, 如果希望动态变更(包括增加slide个数)的情况下, 只能显示初始化时的数目.

searchbar的问题共有以下几种问题

1）页面同时有searchbar和scroll的时候，searchbar会挡住第一条数据，必须加个div的高度是1rem的时候，才会把数据顶下来；希望有searchbar的时候，整个searchbar是block的，scroll只会从searchbar的下边框开始显示，而不是从页面的顶部开始显示。

2）页面同时有searchbar和menu的时候，searchbar会挡住弹出menu的内容；我现在是弹出menu的时候，先隐藏searchbar，客户表示可以接受。

3）页面有searchbar和popup的时候，searchbar会干扰popup的显示，特别是全屏的时候；

searchbar不会影响slidepanel的弹出。

vum 安装时，eslint报错呀

ERROR Failed to compile with 1 errors 08:51:05

Module build failed: Error: No ESLint configuration found.
at getLocalConfig (/www/vum/node_modules/_eslint@3.19.0@eslint/lib/config.js:162:35)
at Config.getConfig (/www/vum/node_modules/_eslint@3.19.0@eslint/lib/config.js:260:26)
at processText (/www/vum/node_modules/_eslint@3.19.0@eslint/lib/cli-engine.js:224:33)
at CLIEngine.executeOnText (/www/vum/node_modules/_eslint@3.19.0@eslint/lib/cli-engine.js:754:26)
at lint (/www/vum/node_modules/_eslint-loader@1.9.0@eslint-loader/index.js:218:17)
at Object.module.exports (/www/vum/node_modules/_eslint-loader@1.9.0@eslint-loader/index.js:213:21)

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

Listening at http://localhost:8080

报错呀。 这个怎么处理呀。

overlay v-if需要改成v-show

side-panel组件测试，生成了多个overlay dom

"style" is a reserved attribute and cannot be used as component prop

vue.esm.js?101b:476 [Vue warn]: "style" is a reserved attribute and cannot be used as component prop.
found in
vum/src/components/tab/Tab.vue

非常棒的项目

试试看能不能在项目里用的上，主要是混合开发内嵌页面用

vum 目前是否支持vue2.0

vue2.0出来了，vum当前版本是否支持，或有开发vum2.0版本不？

现在可以用到项目里吗？

手机浏览器页面渲染不正常

底部home等变成竖的了，list里面图片跟文字也是歪的

希望增加聊天界面

希望增加和微信一样的聊天界面和公众号聊天界面！
模仿微信，聊天是必须的
唉，我一直都是写代码的，不会美工，网上也找不到类似的界面啊！希望可以增加！

这个项目组件能不能全局引入？

用到每个组件都需要单独引入一次，很不方便
如何在main.js引入一次，各个组件都可以使用？

directives/swipe.js，鼠标不支持的处理

原代码在chrome及chrome模拟器中均对鼠标无效，鼠标支持可以改用以下代码，e = e.changedTouches ? e.changedTouches[0] : e，直接使用e.pageX/e.pageY，另外鼠标还需要做mouseleave处理, 与mouseup相同

希望此项目能考虑从中间页面进入时的情况

light7项目，从首页进入到子页面没问题，如果直接通过url进入到子页面，就会显示不正常。希望VUI能考虑到这方面的处理。

日历切换年月日

日历弹出的选择上点击星期会触发上边年的切换，周一触发年减少，周三触发增加，周四会触发年月，周五周日触发的是月份。看了下应该是设置了height:100%导致的，去掉这个高度100%就ok了应该

images问题

在assets/images文件夹下新建图片文件夹 服务器报错 说不能处理 .//vue-loader/lib/template-compiler?{"id":"data-v-57330856"}!.//vue-loader/lib/selector.js?type=template&index=0!./src/views/flight/flight_cities.vue
Module not found: Error: Can't resolve '../../assets/images/tul/search.png' in 'E:\demo\VUE\vum-master\src\views\flight'
@ .//vue-loader/lib/template-compiler?{"id":"data-v-57330856"}!.//vue-loader/lib/selector.js?type=template&index=0!./src/views/flight/flight_cities.vue 40:13-58
@ ./src/views/flight/flight_cities.vue
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js

请问大神 这怎么解决？

在手机浏览器中没有反应！

我在android UC 和自带的浏览器中，按下inco没有任何反应

有没有类似light7的Swipeout?

有没有类似light7的Swipeout?

Upgrade to vue2.0 in progress

more info in branch upgrade-vue2

有没有中文api文档啊

component tab 中的$broadcast方法2.0已经取消了

ios9.3.5 safari 点击首页图标，没有反应

scroll组件中 当开始没有内容,依然会显示loading

scroll组件，首次进入，内容区无内容, 底部loading依然显示

demo还原:
你的demo/scroll 把#list元素中所有的p删除，可复现bug

main.js中的拼写错误

import './demos/result' 其中 result 应该大写 Result

提个布局问题

整体高度固定为窗口高度的话，在移动浏览器端不是很友好 ，像iphone safari浏览器 往下滚的时候不会隐藏浏览器的操作栏，顶部也不会变小~

在微信中使用sample网址的问题

使用微信扫一扫二维码，进入示例网址后，点击Form，点击Textarea弹出输入法后，快速上下拖动界面，可以看到switch控件有滞后的bug。请了解

import { Header, HeaderLink, HeaderTitle, SecondHeader } from '../components/header' 用不了

在demos中， babel 6版本下， Header 为 undefined? 不能用了吧
前提：
在component中

export default {
  Header,
  SecondHeader,
  HeaderLink: Link,
  HeaderTitle: Title,
  SimpleHeader,

  // for old version
  Link,
  Title
}

Demo中的List和Menu的问题

1. Demo中的List界面, 在Android下页面无法上下滚动, iOS的可以.
2. Menu界面在iOS下,点击右上角Edit, 容易出现击穿,导致Title对应的Menu出现.

Android设备: 小米3
iOS设备: iphone6s

router问题

把router路由页面 抽出来一个文件router.js 总是出现符号 空格等报错问题 请问大神在哪里改

npm上的版本需要上传一下啊，目前版本latest: '0.1.1'

如题，不更新的话就只能自己git checkout，另外，对应的分支里面的package.json里面缺main入口属性

能否让list组件的图标尺寸响应屏幕尺寸变化?

当list在手机上显示时.图片大小和PC上显示时大小是一样的,而且右侧的Title,SubTitle,Text内容没有垂直居中,界面效果不是很美观,大神能否优化一下

页面滑动回弹问题

当页面滑动到最底部或者最上方，会有页面回弹效果，但是当回弹结束，急速滑动页面或者拉动页面使得浏览器的底部出现（如QQ浏览器出现已启用x5浏览服务），会使得整个浏览器的主体跟着滑动，而不是页面滑动，等待一会儿然后再轻轻的滑动页面，就可以正常了。
（使用的是iPhone测试的，手机上的浏览器都会有这个情况，特别是qq浏览器和微信）

Form示例页中邮箱的验证显示不全

Form示例页中邮箱的验证按钮文字显示不全, 只显示一个验

Vum能否像JQuery-WeUI一样，直接从cdn引用过来？

我平时都是这样用的

<link href="http://cdn.bootcss.com/weui/0.4.3/style/weui.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/jquery-weui/0.8.2/css/jquery-weui.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/jquery-weui/0.8.2/js/jquery-weui.min.js"></script>

Vum能这样直接使用么？

何时发布呢？现在有文档地址么？thanks

何时发布呢？现在有文档地址么

vum啥时候有picker组件呀

可以和jquery weui 混用吗

这个项目和vux好类似

都是Vue + Weui
不知道和vux有什么区别和发展侧重点呢？