Files
AIAgentPrompt/WebVue.md
2026-01-15 15:33:39 +08:00

1.2 KiB

前端 Vue 约束

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

前端 Vue 组件代码风格约束

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

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

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

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

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

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