```
页面基本结构
<template>
<hd-container></hd-container>
</template>
<script>
export default {
data() {
return {}
},
created() {},
mounted() {},
methods: {}
}
</script>
<style lang="less" scoped>
</style>
```
<br />
```
Vue方法放置顺序
- components
- props
- data
- created
- mounted
- activited
- update
- beforeRouteUpdate
- methods
- filter
- computed
- watch
```
<br />
```
组件 props 原子化
提供默认值
使用 type 属性校验类型
使用 props 之前先检查该 prop 是否存在
命名规范：
对于 props 声明的属性，在父组件的 template 模板中，属性名需要使用中划线写法
子组件 props 属性声明时，使用小驼峰或者中划线写法都可以；
而子组件的模板使用从父组件传来的变量时，需要使用对应的小驼峰写法。
Vue 能够正确识别出小驼峰和下划线命名法混用的变量，如这里的 forChildMsg 和 for-child-msg 是相同的。
```
<br />
```
同一模块有多个导入时一次性写完
import { myFunc1 } from 'module'
import { myFunc2 } from 'module'
import { myFunc1, myFunc2 } from 'module'
```
<br />
```
v-for 应该避免与 v-if 在同一个元素上使用，因为 v-for 的优先级比 v-if 更高，为了避免无效计算和渲染，应该尽量将 v-if 放到容器的父元素之上。
<div v-if="showList">
<div v-for="item in list" :key="item.id"> <div>
</div>
```
<br />
```
在单文件组件 字符串模板和 JSX 中，有内容的组件应该是自闭合的，但在 DOM 模板里永远不要这样做
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>
```
<br />
```
指令缩写 (用 ':' 表示 'v-bind:'，'@' . 表示 'v-on:' 和用 '#' 表示 'v-slot') 应该要么始终使用，要么始终不使用
<input :value="value" @input="onInput" />
<template #header></template>
```
<br />
```
在生命周期 方法 函数建议在属性之间添加一行空行
export default {
computed: {
formattedValue() {},
styles() {}
},
methods: {
onInput() {},
onChange() {}
}
}
```
<br />
> 01\. 增删改查操作建议以父子组件传值或弹层形式实现，并减少 URL 传参。
02\. 项目开发完成后，沉余代码 无用注释代码 调试信息等使用完及时删除。
03\. 开发中通用函数，方法类，组件要统一进行二次封装，集成调用，禁止在项目中组件中反复使用相同代码块。
04\. 确保项目再编译时保持页面代码整洁 逻辑清晰 注释规范，遵循 ECMAScript 6 语法规范，以避免与项目的其他部分构成兼容性和复杂性。
05\. 保证 公共类函数组件化 模块化， 业务层代码原子化， 逻辑层代码简单化， 判断类代码结构化。
06\. 打包 提交 发布代码时，要反复查看是否存在语法以及 eslint 报错，如果存在禁止任何提交操作
