曾海沥 / doc-press · 文件

转到一个项目
standard.html 32.1 KB
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>开发规范 | 买买买文档平台</title>
    <meta name="generator" content="VuePress 1.7.1">
    
    <meta name="description" content="买买买文档平台">
    
    <link rel="preload" href="/assets/css/0.styles.d07e157f.css" as="style"><link rel="preload" href="/assets/js/app.7a157e64.js" as="script"><link rel="preload" href="/assets/js/2.ef86ff21.js" as="script"><link rel="preload" href="/assets/js/24.45b4a9ea.js" as="script"><link rel="prefetch" href="/assets/js/10.5819cc99.js"><link rel="prefetch" href="/assets/js/11.fd597b20.js"><link rel="prefetch" href="/assets/js/12.b2402a37.js"><link rel="prefetch" href="/assets/js/13.e003b70f.js"><link rel="prefetch" href="/assets/js/14.00c355b3.js"><link rel="prefetch" href="/assets/js/15.5f87eecb.js"><link rel="prefetch" href="/assets/js/16.1b53dc86.js"><link rel="prefetch" href="/assets/js/17.ab400218.js"><link rel="prefetch" href="/assets/js/18.20932e4d.js"><link rel="prefetch" href="/assets/js/19.f1f008d5.js"><link rel="prefetch" href="/assets/js/20.ecc32992.js"><link rel="prefetch" href="/assets/js/21.86007ef2.js"><link rel="prefetch" href="/assets/js/22.8eb68f06.js"><link rel="prefetch" href="/assets/js/23.f9d43b92.js"><link rel="prefetch" href="/assets/js/25.0458cf97.js"><link rel="prefetch" href="/assets/js/26.28900d1b.js"><link rel="prefetch" href="/assets/js/27.81d86e4f.js"><link rel="prefetch" href="/assets/js/28.1807ea10.js"><link rel="prefetch" href="/assets/js/29.c674570a.js"><link rel="prefetch" href="/assets/js/3.3e1e6257.js"><link rel="prefetch" href="/assets/js/30.d9de9467.js"><link rel="prefetch" href="/assets/js/31.c5b3b33e.js"><link rel="prefetch" href="/assets/js/32.267ac0e0.js"><link rel="prefetch" href="/assets/js/4.cbe5fc7a.js"><link rel="prefetch" href="/assets/js/5.6a270bea.js"><link rel="prefetch" href="/assets/js/6.f72612cc.js"><link rel="prefetch" href="/assets/js/7.94e920fe.js"><link rel="prefetch" href="/assets/js/8.b7861e0c.js"><link rel="prefetch" href="/assets/js/9.e023b86e.js">
    <link rel="stylesheet" href="/assets/css/0.styles.d07e157f.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/logo.png" alt="买买买文档平台" class="logo"> <span class="site-name can-hide">买买买文档平台</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">
  查询导览
</a></div><div class="nav-item"><a href="/product/" class="nav-link">
  项目清单
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="团队文档" class="dropdown-title"><span class="title">团队文档</span> <span class="arrow down"></span></button> <button type="button" aria-label="团队文档" class="mobile-dropdown-title"><span class="title">团队文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/team/design/" class="nav-link">
  产品设计
</a></li><li class="dropdown-item"><!----> <a href="/team/ios/" class="nav-link">
  IOS
</a></li><li class="dropdown-item"><!----> <a href="/team/android/" class="nav-link">
  安卓
</a></li><li class="dropdown-item"><!----> <a href="/team/backend/" class="nav-link">
  服务端
</a></li><li class="dropdown-item"><!----> <a href="/team/quality/" class="nav-link">
  测试
</a></li><li class="dropdown-item"><h4>
          前端
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/team/frontend/overview/" class="nav-link router-link-active">
  概况
</a></li><li class="dropdown-subitem"><a href="/team/frontend/plugins/" class="nav-link">
  插件库
</a></li><li class="dropdown-subitem"><a href="/team/frontend/utils/" class="nav-link">
  工具集
</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/standard/" class="nav-link">
  标准与规范
</a></div><div class="nav-item"><a href="/project/" class="nav-link">
  项目管控
</a></div><div class="nav-item"><a href="/adm/" class="nav-link">
  行政管理
</a></div><div class="nav-item"><a href="/util/" class="nav-link">
  协作工具
</a></div><div class="nav-item"><a href="/guide/" class="nav-link">
  文档写作平台入门
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">
  查询导览
</a></div><div class="nav-item"><a href="/product/" class="nav-link">
  项目清单
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="团队文档" class="dropdown-title"><span class="title">团队文档</span> <span class="arrow down"></span></button> <button type="button" aria-label="团队文档" class="mobile-dropdown-title"><span class="title">团队文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/team/design/" class="nav-link">
  产品设计
</a></li><li class="dropdown-item"><!----> <a href="/team/ios/" class="nav-link">
  IOS
</a></li><li class="dropdown-item"><!----> <a href="/team/android/" class="nav-link">
  安卓
</a></li><li class="dropdown-item"><!----> <a href="/team/backend/" class="nav-link">
  服务端
</a></li><li class="dropdown-item"><!----> <a href="/team/quality/" class="nav-link">
  测试
</a></li><li class="dropdown-item"><h4>
          前端
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/team/frontend/overview/" class="nav-link router-link-active">
  概况
</a></li><li class="dropdown-subitem"><a href="/team/frontend/plugins/" class="nav-link">
  插件库
</a></li><li class="dropdown-subitem"><a href="/team/frontend/utils/" class="nav-link">
  工具集
</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/standard/" class="nav-link">
  标准与规范
</a></div><div class="nav-item"><a href="/project/" class="nav-link">
  项目管控
</a></div><div class="nav-item"><a href="/adm/" class="nav-link">
  行政管理
</a></div><div class="nav-item"><a href="/util/" class="nav-link">
  协作工具
</a></div><div class="nav-item"><a href="/guide/" class="nav-link">
  文档写作平台入门
</a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/team/frontend/overview/" aria-current="page" class="sidebar-link">前端 Frontend</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/overview/#能力输出" class="sidebar-link">能力输出</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/#项目构建及发布" class="sidebar-link">项目构建及发布</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/#浏览器支持情况" class="sidebar-link">浏览器支持情况</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/#项目技术组成" class="sidebar-link">项目技术组成</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/#代码版本控制位置" class="sidebar-link">代码版本控制位置</a></li></ul></li><li><a href="/team/frontend/overview/showcase.html" class="sidebar-link">陈列柜</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/overview/showcase.html#网站" class="sidebar-link">网站</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/showcase.html#微信小程序" class="sidebar-link">微信小程序</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/showcase.html#桌面客户端" class="sidebar-link">桌面客户端</a></li></ul></li><li><a href="/team/frontend/overview/standard.html" aria-current="page" class="active sidebar-link">开发规范</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/overview/standard.html#vscode-插件" class="sidebar-link">VSCode 插件</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/standard.html#文件与目录命名规范" class="sidebar-link">文件与目录命名规范</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/standard.html#css-样式预处理" class="sidebar-link">CSS 样式预处理</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/standard.html#路由命名规则" class="sidebar-link">路由命名规则</a></li></ul></li><li><a href="/team/frontend/overview/http.html" class="sidebar-link">数据交互格式标准</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/overview/http.html#数据格式样例" class="sidebar-link">数据格式样例</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/http.html#api-交互规则" class="sidebar-link">API 交互规则</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/http.html#跨域与重复请求" class="sidebar-link">跨域与重复请求</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/http.html#数据表格" class="sidebar-link">数据表格</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/http.html#登录授权" class="sidebar-link">登录授权</a></li></ul></li><li><a href="/team/frontend/overview/system-model.html" class="sidebar-link">系统交互模型</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/overview/system-model.html#基础原则" class="sidebar-link">基础原则</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/system-model.html#流程示意" class="sidebar-link">流程示意</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/system-model.html#数据模型" class="sidebar-link">数据模型</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/system-model.html#api-接口" class="sidebar-link">API 接口</a></li></ul></li><li><a href="/team/frontend/overview/framework.html" class="sidebar-link">系统框架</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/overview/framework.html#目录结构描述" class="sidebar-link">目录结构描述</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/framework.html#api" class="sidebar-link">API</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/framework.html#自定义指令集-directive" class="sidebar-link">自定义指令集 directive</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/framework.html#表单校验规则" class="sidebar-link">表单校验规则</a></li></ul></li><li><a href="/team/frontend/overview/web-open-platform.html" class="sidebar-link">网页能力开放平台</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/overview/web-open-platform.html#平台介绍及使用规范" class="sidebar-link">平台介绍及使用规范</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/web-open-platform.html#现有项目-模块" class="sidebar-link">现有项目/模块</a></li></ul></li><li><a href="/team/frontend/overview/quality.html" class="sidebar-link">质量保证体系</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/overview/quality.html#团队应用现状" class="sidebar-link">团队应用现状</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/quality.html#语法检查" class="sidebar-link">语法检查</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/quality.html#单元测试" class="sidebar-link">单元测试</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/quality.html#端对端测试-end-to-end" class="sidebar-link">端对端测试（End-to-end）</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="开发规范"><a href="#开发规范" class="header-anchor">#</a> 开发规范</h1> <p>编码规范好比协议，有了 <code>Http</code>、<code>TCP</code> 等各种协议，计算机之间才能有效地通信，同样的，有了一致的编码规范，开发人员之间才能有效地合作</p> <p>为提高软件开发质量，降低开发周期，增强代码的可重用性和易读性，使软件便于维护及移交，开发人员间便于交流和协作，本规范适用于前端团队，以作参考。</p> <div class="custom-block danger"><p class="custom-block-title">注意</p> <p>开发规范执行情况将会不定期进行 <strong>Code Review</strong>，不符合规范的内容必须进行整改。</p></div> <h2 id="vscode-插件"><a href="#vscode-插件" class="header-anchor">#</a> VSCode 插件</h2> <p>为了使开发过程控制，错误提醒以及语法规范在代码编写过程中得到有效提醒及控制，要求使用 <strong>VSCode</strong> 必须安装以下插件</p> <ul><li>ESLint</li> <li>HTML Snippets</li> <li>IntelliSense for CSS class names in HTML</li> <li>JavaScript (ES6) code snippets</li> <li>JavaScript standardjs styled snippets</li> <li>language-stylus</li> <li>npm</li> <li>npm Intellisense</li> <li>Prettier - Code formatter</li> <li>Sass</li> <li>StandardJS - JavaScript Standard Style</li> <li>Todo Tree</li> <li>Vetur</li> <li>Vue 2 Snippets</li></ul> <h2 id="文件与目录命名规范"><a href="#文件与目录命名规范" class="header-anchor">#</a> 文件与目录命名规范</h2> <p>前端开发规范应用于 Web 网站、管理平台、移动端内嵌、微信小程序等范围，即使是本文档项目（<code>doc-press</code>）中的文件命名，依然建议应用本规范</p> <p>命名规范优秀的行业范例可参考 <a href="https://github.com/vuejs/vue" target="_blank" rel="noopener noreferrer">Vuejs<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 和 <a href="https://github.com/facebook/react" target="_blank" rel="noopener noreferrer">Reactjs<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 的源码</p> <h3 id="目录命名"><a href="#目录命名" class="header-anchor">#</a> 目录命名</h3> <p>业务功能结构示例</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>├─用户管理
  └─授权管理
      ├─角色管理
      └─用户角色绑定
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>目录命名示例</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>✖
├─userManage
   └─userAuthManage
      ├─RoleManage
      └─userRoleBind

✔
├─user
   └─auth
      ├─role
      └─user<span class="token operator">-</span>role
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>目录的命名，应尽可能结合上下、父子结构进行上下文信息描述，目录名自身应尽可能简洁直观。文本上使用全小写字母，有词组的情况使用 “-” 符号隔开</p> <h4 id="为什么要使用小写"><a href="#为什么要使用小写" class="header-anchor">#</a> 为什么要使用小写？</h4> <ul><li><p>易用性/可读性<br>
小写文件名通常比大写文件名更易读，比如 <code>accessibility.txt</code> 就比 <code>ACCESSIBILITY.TXT</code> 易读。即使使用驼峰命名法，如 <code>UserRoleBind</code> 或 <code>userRoleBind</code> 不如 <code>user-role-bind</code> 的可读性高</p></li> <li><p>兼容性<br>
不同操作系统对于大小兼容程度不一样，为了保证编译、部署后的内容在所有平台上顺利部署，目录名也应当使用小写</p></li> <li><p>行业惯例<br>
诸如 <code>Java</code>、<code>.net</code>、<code>C</code> 等著名语言的包路径均为小写，行业巨头的良好规范也逐渐成为行业里约定俗成的规范</p></li></ul> <h3 id="文件命名"><a href="#文件命名" class="header-anchor">#</a> 文件命名</h3> <p>文件名的规则在遵循目录命名的规则作为基础规则，但文件名的命名规则相比目录，略有不同</p> <h4 id="插件-组件-页面"><a href="#插件-组件-页面" class="header-anchor">#</a> 插件/组件/页面</h4> <p>单文件组件、插件/组件主体、页面的文件名应该始终是单词大写开头 (PascalCase)</p> <p>单词大写开头对于代码编辑器的自动补全最为友好，因为这使得我们在 JS(X) 和模板中引用组件的方式尽可能的一致。然而，混用文件命名方式有的时候会导致大小写不敏感的文件系统的问题。</p> <p><strong>Vuejs</strong> 官方文档中，对于文件命名也有相应的 <a href="https://cn.vuejs.org/v2/style-guide/#%E5%8D%95%E6%96%87%E4%BB%B6%E7%BB%84%E4%BB%B6%E6%96%87%E4%BB%B6%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%86%99-%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90" target="_blank" rel="noopener noreferrer">指导规范<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>文件命名示例</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>✖
components
  └─grid
    ├─grid<span class="token punctuation">.</span>sass
    ├─headRow<span class="token punctuation">.</span>vue
    ├─bodyrow<span class="token punctuation">.</span>vue
    ├─grid<span class="token punctuation">.</span>vue
    └─index<span class="token punctuation">.</span>js

✔
components
  └─grid
    ├─grid<span class="token punctuation">.</span>sass
    ├─HeadRow<span class="token punctuation">.</span>vue
    ├─BodyRow<span class="token punctuation">.</span>vue
    ├─Grid<span class="token punctuation">.</span>vue
    └─index<span class="token punctuation">.</span>js
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h2 id="css-样式预处理"><a href="#css-样式预处理" class="header-anchor">#</a> CSS 样式预处理</h2> <p>对于 CSS 样式预处理方案，比较流行的有 <code>SASS/SCSS</code>、<code>LESS</code> 和 <code>Stylus</code>，大体上的使用方式类似，区别在于功能的多少与扩展的能力。</p> <p>综合各方面考虑，开发规范如下（微信小程序不在讨论范围）</p> <ul><li>前端项目统一使用 <code>SASS/SCSS</code> 开发样式预处理内容</li> <li><code>web-open-platform</code> 项目使用 <code>Stylus</code></li></ul> <p>关于文件及目录的命名遵循 <a href="#%E6%96%87%E4%BB%B6%E4%B8%8E%E7%9B%AE%E5%BD%95%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83">文件与目录命名</a> 规则</p> <h3 id="class-命名"><a href="#class-命名" class="header-anchor">#</a> class 命名</h3> <p>对于 class name 的命名同样遵循全小写与单词间使用 &quot;-&quot; 隔开原则</p> <p>命名示例</p> <div class="language-scss line-numbers-mode"><pre class="language-scss"><code><span class="token selector">.user-container </span><span class="token punctuation">{</span>
  <span class="token selector">width: 100vw
  .user-header </span><span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> #eee
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="样式抽象"><a href="#样式抽象" class="header-anchor">#</a> 样式抽象</h3> <p>一个工程通常会有大量的页面、组件和插件，功能虽不同，但风格必须统一。对于主题风格部分的内容，必须提取到专用样式文件中进行维护。类似的功能或结构的样式内容在多处独立维护，是冗余且低效的，多人协同开发时须杜绝该现象发生，在进行样式定义之前应互相询问是否存在重复定义的情况。</p> <p><strong>BTW</strong><br>
CSS 样式预处理，只使用最基本的结构嵌套功能是不够的，了解和使用高级特性才是提高效率和效果的最佳实践</p> <h2 id="路由命名规则"><a href="#路由命名规则" class="header-anchor">#</a> 路由命名规则</h2> <p>在路由（Vue Router）的命名中，依然遵循 <a href="#%E6%96%87%E4%BB%B6%E4%B8%8E%E7%9B%AE%E5%BD%95%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83">文件与目录命名</a> 规则；因为路由命名的结果最终会体现在浏览器的地址栏中，所以在路由的命名过程中依然是推荐结合业务结构的上下文级进行组合命名，内容必须做到精简、简洁，不要让最终呈现出来的地址链接过于冗长。</p> <p>一个网站的路由结构通常两层就可以完全满足需求，所以除去页面布局结构外，大量的业务页面的路由均为同级，既然是同级，就需要通过路由的路径（path）来声明功能的业务结构</p> <p>业务功能结构示例</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>├─系统管理
  └─用户管理
      └─角色授权管理
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>路由命名示例</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>✖
<span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'/systemManage/userManage/roleAuth'</span> <span class="token punctuation">}</span>

✔
<span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'/system/user/role-auth'</span> <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><strong>现有项目命名情况改造实例</strong></p> <p>以现有素+管理平台的路由设置情况进行举例</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>✖ 不推荐
<span class="token punctuation">[</span>
  <span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'/workbench/stockManager/stockType'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>     <span class="token comment">// 存货类别</span>
  <span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'/workbench/stockManager/goodsClassify'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 存货分类</span>
  <span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'/workbench/stockManager/goodsSeries'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>   <span class="token comment">// 存货系列</span>
  <span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'/workbench/stockManager/goodsUnit'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>     <span class="token comment">// 计量组单位</span>
  <span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'/workbench/stockManager/stockBrands'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>   <span class="token comment">// 存货品牌</span>
  <span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'/workbench/stockManager/stockForm'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>     <span class="token comment">// 存货形态</span>
  <span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'/workbench/stockManager/stockArchives'</span> <span class="token punctuation">}</span>  <span class="token comment">// 存货档案</span>
<span class="token punctuation">]</span>

✔ 推荐设置
<span class="token punctuation">[</span>
  <span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'/workbench/stock/type'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>       <span class="token comment">// 存货类别</span>
  <span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'/workbench/stock/category'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>   <span class="token comment">// 存货分类</span>
  <span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'/workbench/stock/series'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>     <span class="token comment">// 存货系列</span>
  <span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'/workbench/stock/goods-unit'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 计量组单位</span>
  <span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'/workbench/stock/brand'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>      <span class="token comment">// 存货品牌</span>
  <span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'/workbench/stock/form'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>       <span class="token comment">// 存货形态</span>
  <span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'/workbench/stock/file'</span> <span class="token punctuation">}</span>        <span class="token comment">// 存货档案</span>
<span class="token punctuation">]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><p>通常情况下，对于路由的定义，不设置 <code>name</code> 属性，推荐仅对于使用频率较高的功能模块设置，例如登录、首页等最经常被使用的模块，另外就是业务中也经常会被多个场景中使用的情况</p> <h3 id="异步加载页面-组件"><a href="#异步加载页面-组件" class="header-anchor">#</a> 异步加载页面/组件</h3> <p>对于路由的定义推荐使用以下模式</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">[</span><span class="token punctuation">{</span>
  path<span class="token operator">:</span> <span class="token string">'/aaa/bbb'</span><span class="token punctuation">,</span>
  <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/abc'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">最后更新时间:</span> <span class="time">10/13/2020, 10:23:58 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/team/frontend/overview/showcase.html" class="prev">
        陈列柜
      </a></span> <span class="next"><a href="/team/frontend/overview/http.html">
        数据交互格式标准
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/assets/js/app.7a157e64.js" defer></script><script src="/assets/js/2.ef86ff21.js" defer></script><script src="/assets/js/24.45b4a9ea.js" defer></script>
  </body>
</html>