update

WebVue.md

@@ -1,5 +1,37 @@
 ## 前端 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(() => {});
+
+```