组件代码结构
<h3>代码文件组织</h3>
<h4>1.自定义组件</h4>
<pre><code>自定义的业务组件（复杂表单中的自定义组件），都应该放在asyncCompontents文件目录下
自定义的简单表单组件，都应该放在
customCompontents文件目录下，如果需要在表单配置支持可配置需要在customCompontents/lists.js注册.</code></pre>
<h4>2.页面组件路径</h4>
<pre><code> 页面文件都放在src/views
页面文件路径、页面路由、菜单要对应起来
页面与模型？
例如：
菜单： 数字体验/ 文档中心
文件路径：digital-experience/doc-center/index.vue
页面路由：digital-experience/doc-center</code></pre>
<h3>组件结构规范</h3>
<pre><code>在开发一个组件过程中，需要将试图和逻辑分开，开发一个组件的同时，需要同时新建一个view.js，并将其以混入方式引入
例如我们开发一个名叫demo的组件：
Demo ----------------------------------------文件名
------ index.vue----------------------------------------vue组件
------ view.js---------------------------------------- 视图文件
------ base.js-----------------------------------------方法文件（按需添加）
------ data.js-----------------------------------------数据文件（按需添加）</code></pre>
<h4>1.当我们在组件中引用的是一个基础组件时，比如deetable</h4>
<pre><code>在index.vue中，我们引入deetable组件，绑定的属性，如colums、options、pagination都属于视图信息，这些都应该放在view.js中去配置,如果后续逻辑中有对视图的操作都应该在该文件下完成
所有的监听事件的都应该放在index.vue文件中，当当前文件中的逻辑超过四百行时，就需要新建一个新的文件，base.js，将其以混入的方式引入；在base.js文件中,可以将事件中复杂逻辑封装成的方法和处理重复逻辑封装额方法在这个文件中。当一个组件逻辑非常复杂的时候，也就需要在新建一个data.js文件，将数据对象和处理数据的方法放在这个文件中。</code></pre>
<h4>2.当我们在组件中引用的是一个装配组件时,布局配置和对外暴露自定义布局的方法都应该放在view.js中去配置</h4>
<h3>布局组件维护</h3>
<pre><code>布局的组件都维护在applications\architecture-dee\src\layoutTemplates下，组件的名称必须以dee-layout-布局 为名，框架会自动将这些通用的布局加载。
写完布局组件之后，需要在applications\architecture-dee\public\images\pageLayout维护以组件名称的图片名，此图片为改布局的缩略图
```javascript
name: 'DeeLayoutFullPage', // 组件名称
slots: ['fullPage'], // 布局拥有的插槽
description: '整页', // 布局名称
```
在开发手写一个自定义页面时，必须先查找当前布局的布局是否能查找到</code></pre>
<h3>接口请求</h3>
<p>接口请求必须统一维护，除了调用通用的增删改查等接口外，其他的接口请求方法都应放在src/api文件下，进行统一维护， 坚决禁止在组件中直接调用http.js分钟的请求方法和直接调用axios</p>
<h4>Vue文件一般结构</h4>
<pre><code class="language-html"> /**
* @Description: 备注
* @author cxg
* @date 2021/12/20
*/
&lt;template&gt;
&lt;div class=&quot;demo-page&quot;&gt;
组件
&lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
name: '' // name写在组件的最前方,自定义组件为比谈
components: {},
data() {
return {
}
},
computed: {},
created() {
初始化数据
},
methods: {
// 封装的方法 （复杂组件时，该模块放到base.js）
…
// 处理和获取数据的方法（复杂组件时，该模块放到data.js）
/**
* 数据结构的操作
* 数据提交的操作
* 数据的验证
*/
…
// 监听组件的事件
…
}
}
&lt;/script&gt;
&lt;style lang='scss'&gt;
&lt;/style&gt;
</code></pre>
<h4>当实现一个非常复杂的业务时就需要将组建进行拆分</h4>
<p>例如我们开发一个名叫demo的组件时，拆分出来的组件我们需要放在当前组件的文件夹下，结构与普通组件的结构一致：</p>
<pre><code class="language-js"> Demo ----------------------------------------文件名
------ index.vue----------------------------------------vue组件
------ view.js---------------------------------------- 视图文件
------ base.js-----------------------------------------方法文件（按需添加）
------ data.js-----------------------------------------数据文件（按需添加）
------ Demo1-------------------------------------------组件1
---------------- index.vue----------------------------------------vue组件
---------------- view.js------------------------------------------视图文件
---------------- base.js-----------------------------------------方法文件（按需添加）
---------------- data.js-----------------------------------------数据文件（按需添加）</code></pre>
<p>(1)每个文件都要有描述</p>
<pre><code class="language-javascript"> /**
* @Description: 文件描述
* @author 开发人员
* @date 创建日期
*/</code></pre>
<p>(2) Vue文件最外层的标签必须包含类名</p>
<ol>
<li>如果是页面 类名为：页面+ <code>-page</code></li>
<li>如果是组件 类名为：组件+<code>-com</code></li>
</ol>
<p>> 例如：首页：<code>&lt;div class=”home-page”&gt;</code> table组件 <code>&lt;div class=”table-com”&gt;</code></p>
<p>(3) Vue内的<code>style标签禁止添加scope</code>，所有的样式必须<code>包含在包含组外层的类选择器内</code></p>
<pre><code> &lt;Style lang=”scss”&gt;
. home-page{
.a{
….
}
.b{
….
}
}
&lt;style&gt;</code></pre>
<p>(4) 公用多的样式在<code>style文件内新建样式文件进行抽取</code>
(5) 能用选择器修改的样式禁止在标签上添加样式</p>
<pre><code> // 错误
&lt;div style=”….”&gt;&lt;/div&gt;
// 正确
&lt;div class=”info-box”&gt;&lt;/div&gt;</code></pre>
<p>(6) 每个方法及参数要<code>有注释</code>，涉及业务的地方都要<code>有逻辑描述</code>，关键的逻辑进行注释，但是<code>避免过量的代码注释</code>，简洁和清晰的代码，应该使用较少的注释。</p>