### 1. 命名规范

* ***组件命名***：除了通用命名（例如：`index.vue`，`main.vue`）以外采用单词首字母大写的命名方式，例如：`FileCard`,`TextViewer`等；  
   组件在`html`中的使用采用字母全小写的短横线分割的格式，例如：`file-card`,`text-viewer`;
* ***属性的命名***：采用第一个单词首字母小写的命名方式，例如：`actionUrl`,`watermarkOptions`等；  
   属性在`html`中的使用采用字母全小写的短横线分割的格式，例如：`action-url`,`watermark-options`；

### 2. 数据流

* ***数据的生命周期***：数据从产生到销毁需要清晰明了，特别是一些复用组件、显示/隐藏切换的组件，其绑定的数据若没有设定好生命周期就会导致一些很难发现的问题；
* ***数据的作用域***：数据的作用域有全局、当前页面、当前对话框等多种类型，对于不同类型需要采用最合适的数据维护方式，例如：vuex，缓存，实时，定义为全局变量等等；
* ***数据单向流***：在`vue`,`react`等框架中提到数据单向流主要是指数据只能从父组件传递到子组件，而不能由子组件直接修改父组件的数据。在单个组件中，可能会定义多个属性来对应组件，用户操作、数据加载、组件联动等多种情况下会修改这些属性，数据单向流也适应这些属性的修改。
* ***分层结构***：不要求所有功能都按照标准的MVC,Vuex来实现分层，但是所有和后端的数据交互都需要定义在`apis`中，<span style="color:red">严禁在页面中直接调用后端地址</span>，全局或者多页面/多组件共用的数据必须通过`vuex`管理。

### 3. 自定义组件

* ***组件抽取***：一种复合元素或者逻辑在多个地方多次使用时则需要将其抽取为单独的组件或指令；
* ***组件定义***：组件必须按照高内聚、低耦合的原则开发，功能和逻辑能在内部实现的就不要暴露给外部，组件通过属性、事件、方法和外部交互，而且属性必须提供默认值/默认实现，尽量降低与外部的耦合；
* ***组件拆分***：一个组件有多种模式或有不同的状态并且组件内逻辑很复杂，代码量超过几百行时一定要做拆分，拆分为多个子组件；


### 4. 约定优于配置

如果每个组件都需要设定`header`, `action-url`等属性就会显得很繁琐，所以按照约定优于配置的原则，我们设计组件会按照以下优先级应用相关属性：  
`组件上的属性配置 > 全局属性配置 > 默认属性`
* ***组件上的属性配置***: 组件上配置的属性，例如：`<cl-file type="card" :header="header" :action-url="actionUrl" />`;
* ***全局属性配置***：全局的属性配置，在引入`SwordUi`时可以指定配置项，该配置项会被注册到`Vue`原型链上作为全局配置
```html
Vue.use(SwordUi, {
  requestConfig: {
    header: {
      Authorization: 'Basic YWRtaW46NEFmeTJzNENiKzhEN2RFWFpIc08vdz09',
    },
    uploadUrl: 'http://127.0.0.1:8088/system/file/v1/upload',
  },
})
```
* ***默认属性***：组件定义时给每个属性的默认值。

