文件、组件、组件结构命名规范
<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>