腾讯 QMUI 团队 Web 前端框架正式发布
<p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">来源：http://div.io/topic/1807</p><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;"><img src="http://divio.qiniudn.com/Fh0zJ1V7y5EwGkSQA5yGvxVkPZGt" alt="" style="max-width: 50em; margin-top: 1em; margin-bottom: 1em;"></p><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">QMUI Web</p><blockquote style="margin: 32px 28px; padding-left: 14px; border-left-width: 3px; border-left-style: solid; border-left-color: rgb(204, 204, 204); line-height: 1.6; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px;"><p style="margin-top: 18px; margin-bottom: 18px;">一个旨在提高 UI 开发效率、快速产生项目 UI 的前端工作流</p><p style="margin-top: 18px; margin-bottom: 18px;">Github：<a href="https://github.com/QMUI/qmui" target="_blank" style="text-decoration: none; color: rgb(49, 135, 219);">https://github.com/QMUI/qmuiweb</a></p><p style="margin-top: 18px; margin-bottom: 18px;"><a href="https://github.com/QMUI/qmui_web/tree/master/docs-translations/en-US" target="_blank" style="text-decoration: none; color: rgb(49, 135, 219);">Quick Start document for English</a></p></blockquote><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;"> QMUI Web 是一个专注 Web UI 开发，由 <a href="https://github.com/QMUI" target="_blank" style="text-decoration: none; color: rgb(49, 135, 219);">QMUI 团队</a>出品，帮助开发者快速实现特定的一整套设计的框架。通过 QMUI Web，开发者可以很轻松地提高 Web UI 开发的效率，同时保持了项目的高可维护性与稳健。如果你的项目需要有一套完整的设计，并且可能有频繁的变动，那么 QMUI Web 框架将会是你最好的解决方案。</p><h2 style="font-size: 26px; margin-top: 20px; margin-bottom: 20px; counter-reset: section 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">功能特性</h2><h3 style="font-size: 20px; counter-reset: subsection 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">基础配置与组件</h3><ul style="padding-left: 30px; margin-top: 14px; margin-bottom: 14px; list-style-type: square; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;"><li>通过预设的 SASS 配置表和公共</li><li>组件快速实现项目的基本样式</li></ul><h3 style="font-size: 20px; counter-reset: subsection 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">SASS 与 Compass 支持</h3><ul style="padding-left: 30px; margin-top: 14px; margin-bottom: 14px; list-style-type: square; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;"><li>CSS Reset</li><li>大量封装处理好浏览器兼容的原生 SASS 方法</li><li>各种数值计算和获取方法，方便约束 UI 统一</li><li>实现如 border 三角形等效果的各种方法</li><li>工具类（清除浮动，多行省略号等）</li></ul><h3 style="font-size: 20px; counter-reset: subsection 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">脚手架</h3><ul style="padding-left: 30px; margin-top: 14px; margin-bottom: 14px; list-style-type: square; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;"><li>利用 gulp 监控代替不稳定的 Compass Watch</li><li>模板引擎，强化 html 能力</li><li>图片集中管理与图片压缩</li><li>文件清理</li><li>静态资源文件合并与自动变更</li></ul><h3 style="font-size: 20px; counter-reset: subsection 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">扩展组件</h3><ul style="padding-left: 30px; margin-top: 14px; margin-bottom: 14px; list-style-type: square; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;"><li>雪碧图组件</li><li>等高左右双栏</li><li>文件上传按钮</li><li>树状选择菜单</li></ul><h2 style="font-size: 26px; margin-top: 20px; margin-bottom: 20px; counter-reset: section 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">环境配置</h2><pre style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; padding: 6px 10px; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">#安装 gulpnpm install --global gulp#安装 SASS gem install sass
#安装 Compassgem update --systemgem install compass
</code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;"><a href="https://github.com/QMUI/qmui_web/wiki/Q&A#%E4%B8%BA%E4%BB%80%E4%B9%88%E9%87%87%E7%94%A8%E5%8E%9F%E7%94%9F-sass-%E5%92%8C-compass" target="_blank" style="text-decoration: none; color: rgb(49, 135, 219);">为什么采用原生 SASS 和 Compass？</a></p><h2 style="font-size: 26px; margin-top: 20px; margin-bottom: 20px; counter-reset: section 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">快速开始</h2><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">推荐使用 <a href="http://yeoman.io/" target="_blank" style="text-decoration: none; color: rgb(49, 135, 219);">Yeoman</a> 脚手架 <a href="https://github.com/QMUI/generator-qmui" target="_blank" style="text-decoration: none; color: rgb(49, 135, 219); margin-left: 0.25em;">generator-qmui</a> 安装和配置 QMUI Web。该工具可以帮助你完成 QMUI Web 的所有安装和配置。</p><pre style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; padding: 6px 10px; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">#安装 Yeoman，如果本地已安装可以忽略npm install -g yo
#安装 QMUI 的模板npm install -g generator-qmui
#在项目根目录执行以下命令yo qmui
</code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;"><img src="https://raw.githubusercontent.com/QMUI/qmuidemo_web/master/public/style/images/independent/Generator.gif" alt="效果预览" style="max-width: 50em; margin-top: 1em; margin-bottom: 1em;"></p><h3 style="font-size: 20px; counter-reset: subsection 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">完成后生成的项目目录结构</h3><pre style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; padding: 6px 10px; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">项目根目录
├─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 处理后的版本，用于前端拼接最终的模板
</code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">对于需要有更强定制性的开发者，请参考<a href="http://qmuiteam.com/web/start.html#qui_createProject" target="_blank" style="text-decoration: none; color: rgb(49, 135, 219);">创建新项目（高级）</a></p><h2 style="font-size: 26px; margin-top: 20px; margin-bottom: 20px; counter-reset: section 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">其他说明</h2><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">推荐配合桌面 App：<a href="http://qmuiteam.com/web/app.html" target="_blank" style="text-decoration: none; color: rgb(49, 135, 219);">QMUI Web Desktop</a>。它可以管理基于 QMUI Web 进行开发的项目，并提供了编译提醒，出错提醒，进程关闭提醒等额外的功能。</p><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;"><img src="https://raw.githubusercontent.com/QMUI/qmuidemo_web/master/public/style/images/independent/App.png" alt="QMUI Web Desktop" style="max-width: 50em; margin-top: 1em; margin-bottom: 1em;"></p><h2 style="font-size: 26px; margin-top: 20px; margin-bottom: 20px; counter-reset: section 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">意见反馈</h2><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">如果有意见反馈或者功能建议，欢迎创建 <a href="https://github.com/QMUI/qmui_web/issues" target="_blank" style="text-decoration: none; color: rgb(49, 135, 219);">Issue</a> 或发送 <a href="https://github.com/QMUI/qmui_web/pulls" target="_blank" style="text-decoration: none; color: rgb(49, 135, 219); margin-left: 0.25em;">Pull Request</a>，感谢你的支持和贡献。</p><p></p>
页:
[1]