前端 Vue 开发 Quick Reference 技术栈：Vue 2.7 + Vuex 3.6 + Vue Router 3.6 + bk-magic-vue 2.5 文件命名：kebab-case.vue（如 group-table.vue） 缩进：4 空格 | 无分号 | 无拖尾逗号 | HTML 双引号 API 调用：vue.$ajax.get/post/put/delete
最简示例
When to Use 开发 Vue 组件 管理 Vuex 状态 调用后端 API 处理页面交互 When NOT to Use 后端 API 开发 → 使用 01-backend-microservice-development 构建机 Agent → 使用 05-go-agent-development 前端应用结构 src/frontend/ ├── devops-pipeline/ # 流水线应用 ├── devops-atomstore/ # 研发商店应用 ├── devops-manage/ # 管理应用 ├── bk-pipeline/ # 流水线组件库 └── bk-permission/ # 权限组件库
ESLint 核心规则 { 'indent': ['error', 4], // 4 空格缩进 'semi': ['error', 'never'], // 禁用分号 'comma-dangle': ['error', 'never'], // 禁用拖尾逗号 'vue/html-quotes': ['error', 'double'],// HTML 双引号 'vue/no-v-html': 'error', // 禁止 v-html（防 XSS） 'no-console': 'error' // 禁止 console }
组件选项顺序 export default { components: { }, // 1. 组件注册 mixins: [ ], // 2. 混入 props: { }, // 3. Props data() { }, // 4. 响应式数据 computed: { }, // 5. 计算属性 watch: { }, // 6. 侦听器 created() { }, // 7. 生命周期钩子 mounted() { }, methods: { } // 8. 方法 }
Props 定义 props: { resourceType: { type: String, default: '' }, options: { type: Array, default: () => [] // 对象/数组使用工厂函数 } }
API 调用模式
// GET
this.$ajax.get(${prefix}/user/pipelines)
// POST
this.$ajax.post(${prefix}/user/pipelines, data)
// 错误处理 this.$ajax.get(url) .then(res => this.data = res.data) .catch(err => { if ([404, 403].includes(err.code)) { this.errorCode = err.code } }) .finally(() => this.isLoading = false)
Vuex 使用
// store/pipeline.js
export const actions = {
getPipelineList({ commit }, { projectId }) {
return vue.$ajax.get(/api/user/projects/${projectId}/pipelines)
}
}
// 组件中使用 import { mapActions } from 'vuex'
methods: { ...mapActions('pipeline', ['getPipelineList']), async fetchData() { this.list = await this.getPipelineList({ projectId: this.projectId }) } }
方法命名约定 类型 命名模式 示例 事件处理 handle handleClick() 初始化 init initData() 格式化 *Formatter statusFormatter() Checklist
开发组件前确认：
文件命名使用 kebab-case 遵循 ESLint 规则（4 空格、无分号） Props 使用完整定义（type + default） 对象/数组 Props 使用工厂函数 禁止使用 v-html 使用 scoped 样式