# SmartUI 开发者须知

## 关于编码规范

### 文件创建规则

* 如果是.VUE文件，请在对应的模块下创建，文件结构如下：
```
-  button文件夹
│  index.js       // 组件导出
│
└─src             // 资源文件夹
        main.vue  // 组件文件
```

* 如果是工具类文件，请在 `src/components/utils` 目录下完成。

## 基础组件桥接方法

1、在指定的目录下创建文件夹，比如pc端基础组件 `/src/components/pc/element/dialog`

2、在以上文件下创建 `index.js` 文件和 `src` 文件夹，`src` 文件夹下面创建 `*.vue` 组件文件

```js
// index.js

import aspDialog from './src/dialog.js'

/* istanbul ignore next */
aspDialog.install = function (Vue) {
  Vue.component(aspDialog.name, aspDialog)
}

export default aspDialog


// dialog.vue
import { PC_PREFIX, getPCComponentClass } from '@/components/utils'  // 获取命名前缀以及主题方法类
const name = PC_PREFIX + '-dialog' // 当前组件命名 eg: asp-dialog

export default {
  name, 
  functional: true,
  render (h, self) {
    self.data.class = getPCComponentClass(self, name) // 定以主题class
    return self.parent.$createElement('el-dialog', self.data, self.children)
  }
}
```

## 关于组件开发后的配置

基础组件统一打进一个包里面，其他高阶组件可分别独自打包。

分包最重要的一步，我们需要在 `components.json` 里面配置组件的包名以及对应的路径。

## 工具类开发方法

首先需要协商改类是否需要集成进 `SmartUI` 工具类库，以及其方法归属哪个大类中。然后在 `src/utils/utils` 文件夹内找到归属类文件进行编码：

```js
// common.js

export const XX = () => {
  return XX
}

export default {
  XX
}
```

**如何测试：npm run serve 然后再main.js 验证是否可用**

## 提交代码说明

```bash
feat 新功能（feature）
fix 修补bug
docs 文档（documentation）
style 格式（不影响代码运行的变动）
refactor 重构（即不是新增功能，也不是修改bug的代码变动）
test 增加测试
chore 构建过程、辅助工具的变动
perf 提高性能
```