Ant Design Pro基本开发规范

• 持续更新，大家有好的建议也可以提出来
• 20210508 1-14点

1、文件/文件夹命名规范

1、components、views下文件夹/文件命名
2、文件夹命名使用大写字母开头PascalBase风格
3、必须包含index.vue
4、其他文件名以大写开头PascalBase风格

components/Breadcrumb/index.vue
components/Hamburage/ItemDetail.vue
viwes/Home/index.vue
viwes/Article/index.vue
viwes/Article/ArticleDetail.vue

2、*.js文件命名规范

1、属于类的.js文件,除了index.js,其他使用PascalBase风格
2、属于其他类型的.js文件,使用kebab-case风格
3、属于Api的, 统一加上Api后辍

index.js
ParentChidren.js
HomeApi.js

3、*.vue文件命名规范

除index.vue外，其他vue文件统一使用PascalBase风格
eg:
index.vue
ArticleDetail.vue

4、*.less/.scss文件命名规范

统一使用kebab-case命名风格
eg:
article-detail.less / article-detail.scss

5、*.css类名命名规范

统一使用 kebab-case命名风格
eg: .article-container

6、方法命名（采用动词+名词），驼峰式划分语义

eg: doSomething(){}

7、变量命名，驼峰式命名

eg: let myName = 'ken'

8、api信息存放位置

src/api/xxx/xxx
src/api/Admin/UserApi.js 跟菜单一一对应，方便查找

9、公共图片、样式文件存放位置

src/assets

10、自定义图标加载

src/core/icons.js

11、通用全局控件加载

src/core/lazy_use.js

12、通用工具类方法

src/utils/Validation/InputValidation.js 工具类/验证/输入验证
方法必须写清楚注释，最好搭配.md文件说明

13、全局用户业务缓存代码存放位置

src/store/modules/

参考写法跟着写即可，比如字典表缓存，固定常用缓存
src/store/modules/user.js

公共的方法也可以放进来，比如地区选择，很多页面用到，没有必要每个页面都写一个完整的actions方法

14、vue文件书写顺序

- vue 标签内容
- script 
--  import 引入组件、库
-- export default 实例化
--- name 为组件选项时起作用
--- components  组件使用
--- props  标签化赋值
--- data 初始化数据，方便渲染
--- created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
--- mounted 在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
--- methods 定义方法
--- computed 用来监控自己定义的变量，该变量不在data里面声明
--- watch 只能监控整个对象或单个变量
--- destroyed 实例销毁后调用。
- style

https://cn.vuejs.org/v2/api/#beforeCreate
https://www.cnblogs.com/gunelark/p/8492468.html
不管用不用都要声明出来，固定顺序

image.png

<template>
  <div>
    ${COMPONENT_NAME} page
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data () {},
  created: {},
  methods: {},
  mounted: {},
  computed: {},
  watch: {},
  destroyed: {}
}
</script>

<style lang="less" scoped>

</style>