前端 Vue 开发规范，涵盖 Vue 2/3 组件开发、Vuex 状态管理、路由配置、组件通信、样式规范、国际化。当用户进行前端开发、编写 Vue 组件、处理状态管理或实现页面交互时使用。
技术栈：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>
01-backend-microservice-development05-go-agent-developmentsrc/frontend/
├── devops-pipeline/ # 流水线应用
├── devops-atomstore/ # 研发商店应用
├── devops-manage/ # 管理应用
├── bk-pipeline/ # 流水线组件库
└── bk-permission/ # 权限组件库
{
'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. 方法
}