前端 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
最简示例
<template> <div class="pipeline-list"> <bk-table :data="pipelines" v-loading="isLoading"> <bk-table-column prop="name" label="名称"></bk-table-column> </bk-table> </div> </template>
<script> export default { data() { return { pipelines: [], isLoading: false } }, created() { this.fetchPipelines() }, methods: { async fetchPipelines() { this.isLoading = true try { const res = await this.$ajax.get('/api/user/pipelines') this.pipelines = res.data || [] } finally { this.isLoading = false } } } } </script>
<style lang="scss" scoped> .pipeline-list { padding: 20px; } </style>
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 样式