-<!DOCTYPE html><html lang="zh-cmn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=Edge"><meta content="no-siteapp" http-equiv="Cache-Control"><meta name="description" content="一个旨在提高 UI 开发效率，快速产生项目 UI 的前端框架"><meta name="keywords" content="QMUI Web,QMUI,UI 开发,QMUI Web 官网,前端工作流,UI 开发框架"><title>开始使用 - QMUI Web</title><link rel="icon" type="image/png" sizes="16x16" href="../public/style/images/independent/favicon/favicon_16h.png"><link rel="icon" type="image/png" sizes="32x32" href="../public/style/images/independent/favicon/favicon_32h.png"><link rel="icon" type="image/png" sizes="48x48" href="../public/style/images/independent/favicon/favicon_48h.png"><link rel="stylesheet" href="../public/style/css/main_release.css"></head><body class="frame_wrap"><div style="position: absolute; opacity: 0; z-index: -1;"><img src="../public/style/images/independent/share/ShareLogo.png" alt="微信分享 Logo"></div><header id="head" class="frame_head"><div class="frame_head_title"><a class="dm_icon dm_icon_TopLogo frame_head_title_link" href="./index.html">QMUI Web</a></div><a class="frame_head_showMenuBtn" id="showMenuBtn" href="javascript:;"><span class="dm_icon dm_icon_Menu"></span> </a><a class="frame_head_closeMenuBtn" id="closeMenuBtn" href="javascript:;"><span class="dm_icon dm_icon_CloseMenu"></span></a><nav class="frame_nav"><a class="frame_nav_item frame_nav_item_Curr" href="start.html">开始使用</a> <a class="frame_nav_item" href="tools.html">工具方法</a> <a class="frame_nav_item" href="scaffold.html">内置工作流</a> <a class="frame_nav_item" href="widget.html">组件</a> <a class="frame_nav_item" href="codeNorm.html">编码规范</a> <a class="frame_nav_item" href="app.html">QMUI Web Desktop</a></nav></header><div class="frame_sidebar" id="frame_sidebar"><div class="frame_sidebar_inner"><ul class="frame_sidebar_nav"><li class="frame_sidebar_nav_item js_sidebar_group"><a class="frame_sidebar_nav_link" href="#qui_upgrade">更新</a></li><li class="frame_sidebar_nav_item js_sidebar_group"><a class="frame_sidebar_nav_link" href="#qui_overview">概况</a></li><li class="frame_sidebar_nav_item js_sidebar_group"><a class="frame_sidebar_nav_link" href="#qui_environment">环境配置</a></li><li class="frame_sidebar_nav_item js_sidebar_group"><a class="frame_sidebar_nav_link" href="#qui_projectStructure">项目结构</a><ul class="frame_sidebar_nav frame_sidebar_nav_Children"><li class="frame_sidebar_nav_item js_sidebar_item"><a class="frame_sidebar_nav_link" href="#qui_imagesManage">图片文件管理</a></li></ul></li><li class="frame_sidebar_nav_item js_sidebar_group"><a class="frame_sidebar_nav_link" href="#qui_quickStart">快速开始</a></li><li class="frame_sidebar_nav_item js_sidebar_group"><a class="frame_sidebar_nav_link" href="#qui_useFramework">框架的使用</a><ul class="frame_sidebar_nav frame_sidebar_nav_Children"><li class="frame_sidebar_nav_item js_sidebar_item"><a class="frame_sidebar_nav_link" href="#qui_configAndWidget">基础配置与组件</a></li><li class="frame_sidebar_nav_item js_sidebar_item"><a class="frame_sidebar_nav_link" href="#qui_scaffold">内置工作流</a></li><li class="frame_sidebar_nav_item js_sidebar_item"><a class="frame_sidebar_nav_link" href="#qui_SassSupport">Sass 支持</a></li><li class="frame_sidebar_nav_item js_sidebar_item"><a class="frame_sidebar_nav_link" href="#qui_expandWidget">扩展组件</a></li></ul></li><li class="frame_sidebar_nav_item js_sidebar_group"><a class="frame_sidebar_nav_link" href="#qui_browserCompatibility">兼容性策略</a></li><li class="frame_sidebar_nav_item js_sidebar_group"><a class="frame_sidebar_nav_link" href="#qui_frameworkImprove">完善框架</a><ul class="frame_sidebar_nav frame_sidebar_nav_Children"><li class="frame_sidebar_nav_item js_sidebar_item"><a class="frame_sidebar_nav_link" href="#qui_workflowDebug">内置工作流调试辅助</a></li><li class="frame_sidebar_nav_item js_sidebar_item"><a class="frame_sidebar_nav_link" href="#qui_workflowLog">日志方法</a></li></ul></li><li class="frame_sidebar_nav_item js_sidebar_group"><a class="frame_sidebar_nav_link" href="#qui_createProject">创建新项目（高级）</a><ul class="frame_sidebar_nav frame_sidebar_nav_Children"><li class="frame_sidebar_nav_item js_sidebar_item"><a class="frame_sidebar_nav_link" href="#qui_mountFramework">挂载 QMUI 为 SVN 外部库</a></li><li class="frame_sidebar_nav_item js_sidebar_item"><a class="frame_sidebar_nav_link" href="#qui_useConfig">使用配置文件</a></li><li class="frame_sidebar_nav_item js_sidebar_item"><a class="frame_sidebar_nav_link" href="#qui_createCommand">执行创建新项目命令</a></li><li class="frame_sidebar_nav_item js_sidebar_item"><a class="frame_sidebar_nav_link" href="#qui_configUser">用户个人配置</a></li></ul></li><li class="frame_sidebar_nav_item js_sidebar_group"><a class="frame_sidebar_nav_link" href="#qui_customTask">创建自定义任务（高级）</a><ul class="frame_sidebar_nav frame_sidebar_nav_Children"><li class="frame_sidebar_nav_item js_sidebar_item"><a class="frame_sidebar_nav_link" href="#qui_createTask">如何创建自定义任务</a></li></ul></li></ul></div></div><div class="frame_cnt"><div class="dm_column"><h2 id="qui_upgrade" class="dm_column_title">更新</h2><p class="dm_column_tip">QMUI Web 目前以 Github Release 管理版本，使用<a href="#qui_quickStart">快速开始</a>安装 QMUI Web 的用户只需进入项目 UI_dev/qmui 目录执行 git pull 即可更新至最新版本。通过其他方式安装的用户可以直接在 <a href="https://github.com/Tencent/QMUI_Web/releases" target="_blank">Github</a> 中下载最新版本来进行更新。</p><p class="dm_column_tip">QMUI 框架目前推出 3.0.0 版本，基于 Gulp 4 进行开发，重新梳理了框架的依赖包，能提供更稳定以及高效的工作流，并且集成了一套完整的 SVG Sprite 解决方案，可以方便地处理 SVG Sprite 的场景，同时对组件和工具方法也作出了一些优化。另外由于新版作出了大量的结构上的修改，因此与旧版本并不兼容，从旧版本升级到新版请浏览<a href="https://github.com/Tencent/QMUI_Web/releases/tag/3.0.0" target="_blank">这里</a>。</p></div><div class="dm_column"><h2 id="qui_overview" class="dm_column_title">概况</h2><p class="dm_column_tip">QMUI Web 主要分为 project 和 qmui 两个文件夹，project 是我们实际编写项目内容的文件夹，分为 logic（业务代码） 和 widget（公共组件），为了保持 QMUI 的独立性，project 文件夹会被基于 Gulp 的工具复制一份到外层目录中使用，而不是直接修改 QMUI 目录中的版本。这个工具实际上也是 QMUI 提供的脚手架，会提供如雪碧图处理、include 模板功能、清理文件、压缩功能等便捷功能。</p><p class="dm_column_tip">QMUI Web 遵循 <a href="./codeNorm.html" target="_blank" title="QMUI 编码规范">QMUI 编码规范</a>，因此框架中提供的样式除 Reset 外都以 qui_ 作开头，以充当框架的命名空间。业务上的样式也应该有自己的命名空间，例如本 Demo 中的样式的公共部分都以 dm_ 开头，各细致的业务就以业务的功能作开头（例如组件页面的非公共代码都以 widget_ 开头），从而以不同的命名空间划分不同的样式，避免样式的互相干扰。</p><p class="dm_column_tip">除此以外，QMUI 封装了大量 Sass 方法供使用，另外还在 Demo 中以参考组件的形式收录了一些结构较复杂的扩展组件，供使用者参考。</p></div><div class="dm_column"><h2 id="qui_environment" class="dm_column_title">环境配置</h2><p class="dm_column_tip">QMUI Web 基于 Gulp 和 Node.js，请确保安装 <a href="https://nodejs.org/" target="_blank">Node.js</a>（建议 10.0 或以上版本），并用以下命令全局安装 Gulp：</p><div class="dm_column_item"><div class="dm_column_item_info dm_column_item_info_Single"><div class="dm_column_item_info_code"><pre><code class="bash">#全局安装 Gulp
0 commit comments