37 lines
1.2 KiB
Markdown
37 lines
1.2 KiB
Markdown
## 前端 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(() => {});
|
|
|
|
``` |