守望者--AIR技术交流

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: ANE FlasCC 炼金术
查看: 485|回复: 0

[开源分享] 腾讯 QMUI 团队 Web 前端框架正式发布

[复制链接]
  • TA的每日心情
    擦汗
    2018-4-10 15:18
  • 签到天数: 447 天

    [LV.9]以坛为家II

    1742

    主题

    2094

    帖子

    13万

    积分

    超级版主

    Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18

    威望
    562
    贡献
    29
    金币
    51756
    钢镚
    1422

    开源英雄守望者

    发表于 2016-8-10 10:11:39 | 显示全部楼层 |阅读模式

    来源:http://div.io/topic/1807

    QMUI Web

    一个旨在提高 UI 开发效率、快速产生项目 UI 的前端工作流

    Github:https://github.com/QMUI/qmuiweb

    Quick Start document for English

     QMUI Web 是一个专注 Web UI 开发,由 QMUI 团队出品,帮助开发者快速实现特定的一整套设计的框架。通过 QMUI Web,开发者可以很轻松地提高 Web UI 开发的效率,同时保持了项目的高可维护性与稳健。如果你的项目需要有一套完整的设计,并且可能有频繁的变动,那么 QMUI Web 框架将会是你最好的解决方案。

    功能特性

    基础配置与组件

    • 通过预设的 SASS 配置表和公共
    • 组件快速实现项目的基本样式

    SASS 与 Compass 支持

    • CSS Reset
    • 大量封装处理好浏览器兼容的原生 SASS 方法
    • 各种数值计算和获取方法,方便约束 UI 统一
    • 实现如 border 三角形等效果的各种方法
    • 工具类(清除浮动,多行省略号等)

    脚手架

    • 利用 gulp 监控代替不稳定的 Compass Watch
    • 模板引擎,强化 html 能力
    • 图片集中管理与图片压缩
    • 文件清理
    • 静态资源文件合并与自动变更

    扩展组件

    • 雪碧图组件
    • 等高左右双栏
    • 文件上传按钮
    • 树状选择菜单

    环境配置

    #安装 gulpnpm install --global gulp
    #安装 SASS gem install sass
    #安装 Compassgem update --systemgem install compass
    

    为什么采用原生 SASS 和 Compass?

    快速开始

    推荐使用 Yeoman 脚手架 generator-qmui 安装和配置 QMUI Web。该工具可以帮助你完成 QMUI Web 的所有安装和配置。

    #安装 Yeoman,如果本地已安装可以忽略npm install -g yo
    #安装 QMUI 的模板npm install -g generator-qmui
    #在项目根目录执行以下命令yo qmui
    

    效果预览

    完成后生成的项目目录结构

    项目根目录
    ├─public          // 静态资源目录,由 Compass 和 gulp 生成
    │  ├─js           // 静态资源 js 文件
    │  └─style        // 静态资源 UI 文件
    │     ├─css       // 静态资源 css 文件
    │     └─images    // 静态资源 images 文件
    ├─UI_dev          // 实际进行开发的样式目录
    │  ├─project      // 项目相关 SASS 与 images 文件,由 gulp 生成
    │  │  ├─images    // 项目相关图片文件
    │  │  ├─logic     // 项目相关逻辑样式
    │  │  └─widget    // 项目相关公共组件样式
    │  └─qmui_web     // QMUI Web 主源码应放置在这一层目录
    ├─UI_html         // 静态模板目录,用于 UI 工程师开发
    └─UI_html_result  // 静态模板 gulp 处理后的版本,用于前端拼接最终的模板
    

    对于需要有更强定制性的开发者,请参考创建新项目(高级)

    其他说明

    推荐配合桌面 App:QMUI Web Desktop。它可以管理基于 QMUI Web 进行开发的项目,并提供了编译提醒,出错提醒,进程关闭提醒等额外的功能。

    QMUI Web Desktop

    意见反馈

    如果有意见反馈或者功能建议,欢迎创建 Issue 或发送 Pull Request,感谢你的支持和贡献。

    守望者AIR技术交流社区(www.airmyth.com)
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    
    关闭

    站长推荐上一条 /4 下一条

    QQ|手机版|Archiver|网站地图|小黑屋|守望者 ( 京ICP备14061876号

    GMT+8, 2019-10-23 01:02 , Processed in 0.041223 second(s), 35 queries .

    守望者AIR

    守望者AIR技术交流社区

    本站成立于 2014年12月31日

    快速回复 返回顶部 返回列表