文件、组件、组件结构命名规范
<h3>基本命名规范</h3>
<p>(1）命名要用能<code>说明功能的英文单词，做到简洁，尽量不要出现一段文字进行命名，禁止进行拼音进行变量命名。</code></p>
<p>(2）views 下的<code>文件夹命名</code>规则如下，这里指大的模块：比如文档中心： doc：</p>
<ul>
<li>由名词组成（car、order、cart）</li>
<li>单词推荐一个（good: car order cart）（bad: carInfo carpage）（注：多个单词以‘-’链接）</li>
<li>尽量是名词（good: car）（bad: greet good）</li>
<li>以小写开头（good: car）（bad: Car）</li>
</ul>
<p>> views 下面的文件夹代表模块的名字</p>
<p>(3) views下的<code>vue文件命名</code>和组件名的文件夹规则如下：</p>
<ul>
<li>views 下面的 vue 文件代表着页面的名字，且路由名字与之一致</li>
<li>尽量是名词</li>
<li>常用结尾单词有（detail、edit、list、info、report）</li>
<li>多个单词以中划线链接</li>
</ul>
<p>> 遵循URL规范（<code>1.URL中字母全部小写，2.如果有单词拼接，使用中划线‘-’，不使用下划线‘-’</code>）、vue建议命名规范、后续代码维护的方便</p>
<p>（4）样式类选择器 必须以<code>中划线连接</code>
（5）其他命名（除了相应技术推荐命名推荐外）<code>遵循驼峰命名</code></p>
<h3>1. 文件命名规范</h3>
<p>页面文件名：以-进行连接
vue组件 : 大驼峰命名规则
css文件： 小驼峰命名规则</p>
<h3>2.前端ClassName命名规范</h3>
<p>ClassName 的命名应该尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线 “-” 连接</p>
<h4>命名原则</h4>
<p>基于姓氏命名法（继承 + 外来），祖先模块可以出现中划线，当目前业务需要索格单词描述时，用下划线链接，除了是全站公用模块，且在组件的第一层加上微前端的前端项目名如 </p>
<pre><code class="language-html">1. 推荐
2. &lt;div class=&quot;model-modulename&quot;&gt;
3. &lt;div class=&quot;modulename-info&quot;&gt;
4. &lt;div class=&quot;modulename-son&quot;&gt;&lt;/div&gt;
5. &lt;div class=&quot;modulename-son&quot;&gt;&lt;/div&gt;
6. ...
7. &lt;/div&gt;
8. &lt;/div&gt;
9.
10. &lt;style&gt;
11. .model-modulename {
12. .modulename-info{
13. .modulename-son{...}
14. }
15. }
16. &lt;/style&gt;
</code></pre>
<p>在子孙模块数量可预测的情况下，严格继承祖先模块的命名前缀</p>
<pre><code class="language-html">1. &lt;div class=&quot;model-modulename&quot;&gt;
2. &lt;div class=&quot;modulename-cover&quot;&gt;&lt;/div&gt;
3. &lt;div class=&quot;modulename-info&quot;&gt;&lt;/div&gt;
4. &lt;/div&gt;
</code></pre>
<p>当子孙模块超过 4级或以上的时候，可以考虑在祖先模块内具有识辨性的独立缩写作为新的子孙模块</p>
<pre><code class="language-html">1. 推荐：
2.
3. &lt;div class=&quot;model-modulename&quot;&gt;
4. &lt;div class=&quot;modulename-cover&quot;&gt;&lt;/div&gt;
5. &lt;div class=&quot;modulename-info&quot;&gt;
6. &lt;div class=&quot;modulename-info-user&quot;&gt;
7. &lt;div class=&quot;modulename-info-user-img&quot;&gt;
8. &lt;img src=&quot;&quot; alt=&quot;&quot;&gt;
9. &lt;!-- 这个时候 miui 为 modulename-info-user-img 首字母缩写--&gt;
10. &lt;div class=&quot;miui-tit&quot;&gt;&lt;/div&gt;
11. &lt;div class=&quot;miui-txt&quot;&gt;&lt;/div&gt;
12. ...
13. &lt;/div&gt;
14. &lt;/div&gt;
15. &lt;div class=&quot;modulename-info-list&quot;&gt;&lt;/div&gt;
16. &lt;/div&gt;
17. &lt;/div&gt;
18. 不推荐：
19.
20. &lt;div class=&quot;model-modulename&quot;&gt;
21. &lt;div class=&quot;modulename-cover&quot;&gt;&lt;/div&gt;
22. &lt;div class=&quot;modulename-info&quot;&gt;
23. &lt;div class=&quot;modulename-info-user&quot;&gt;
24. &lt;div class=&quot;modulename-info-user-img&quot;&gt;
25. &lt;img src=&quot;&quot; alt=&quot;&quot;&gt;
26. &lt;div class=&quot;modulename-info-user-img-tit&quot;&gt;&lt;/div&gt;
27. &lt;div class=&quot;modulename-info-user-img-txt&quot;&gt;&lt;/div&gt;
28. ...
29. &lt;/div&gt;
30. &lt;/div&gt;
31. &lt;div class=&quot;modulename-info-list&quot;&gt;&lt;/div&gt;
32. &lt;/div&gt;
33. &lt;/div&gt;
</code></pre>
<p>模块命名</p>
<pre><code class="language-html">1. 全站公共模块：以 dee- 开头
2.
3. &lt;div class=&quot;dee-yours&quot;&gt;&lt;/div&gt;
4. 业务公共模块：以 业务名-mod- 开头
5.
6. &lt;div class=&quot;doc-dee-yours&quot;&gt;&lt;/div&gt;
</code></pre>