## 前端 Vue 约束

- Vue 自定义组件中，使用模板标签时应该使用全小写，如 <custom-component />- 
- Vue 模板中如果要使用变量则应该使用 v-text 而不是插值符号以避免渲染延时，如果只是纯文本不要使用 v-text
- Vue Composition API 的代码应该按功能模块分组，相同的变量、函数等在一个片段，公共的在脚本头部，不同模块之间变量、函数不穿插
- 样式应该写在 Vue 组建的 style 中，**不要在原生 html 标签使用 style 属性**
- 保持组件小而集中, 提取逻辑的可组合项
  
## 前端 Vue 组件代码风格约束

- 使用 Composition API,
- 使用 setup 语法糖
- 使用 unplugin-auto-import 和 unplugin-vue-components 自动导入
- Composition API 的代码应该按功能分区域，如以下代码示例

```ts

// 引用、公共变量、函数
const common = ref('common');

// ---------- 功能 1 ----------

// 功能 1 变量
// 功能 1 计算属性
// 功能 1 函数
// 功能 1 生命周期
onMounted(() => {});

// ---------- 功能 2 ----------

// 功能 2 变量
// 功能 2 计算属性
// 功能 2 函数
// 功能 2 生命周期
onMounted(() => {});

```