代码风格

编辑器代码风格

• 建议遵守prettier风格
• 设置tabsize 为 2
• 每行末尾添加分号
• 双引号包裹字符串
• 函数(名)和后面的括号之间加个空格

组件选项的顺序

• 建议以此排序

export default {
  name: '',
  data() {},
  props: {},
  mixins: [],
  watch: {},
  computed: {},
  onLoad() {},
  created() {},
  onShow() {},
  mounted() {},
  destroyed() {},
  onHide() {},
  methods: {},
  components: {}
};

组件数据

• 组件的 data 必须是一个函数。

export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}

组件方法命名

• 组件的 methods，命名建议为驼峰式命名法，getList(),setList()...
• 命名建议语义化，on开头表示监听，get表示获取，set表示设置...

组件文件名称

• 单文件组件的文件名 (kebab.vue)
• 组合名（横线连接）(kebab-case.vue)
• 组合名（横线连接）(kebab-case-a.vue)

• 组合名组件引用时的命名
• 推荐 <kebab></kebab>
• 推荐 <kebab-case></kebab-case>
• 推荐 <kebab-case-a></kebab-case-a>
• 自闭合组件 <kebab/>

slot内容分发

• slot name值 命名 建议全部使用驼峰式命名 如 headerInfo
• 如果使用header-info 则小程序可能识别不了name值，导致slot失效（可能属于官方框架问题）

<slot name="headerInfo"></slot>

<kebab slot="headerInfo"></kebab>

Prop 名大小写

export default {
  props: {
    greetingText: String
  }
}

<welcome-message greeting-text="hi" />

Props 换行

<welcome
  foo="a"
  bar="b"
  baz="c"
>

Props 顺序

• 标签的 Props 应该有统一的顺序，依次为指令、属性和事件

<my-component
  v-if="if"
  v-show="show"
  v-model="value"
  ref="ref"
  :key="key"
  :text="text"
  @input="onInput"
  @change="onChange"
/>

接口命名

• 建议全部大写，语义化命名开头 以 _ 分隔 ，后面加上该接口名称

export function GET_CONFIG(data = {}, config = {}) {
  return $Request({
    url: "",
    data,
    ...config
  });
}