腾讯蓝鲸CI前端Vue开发指南：Vue 2.7 + Vuex + Vue Router + bk-magic-vue最佳实践

frontend-vue-development by tencentblueking/bk-ci

120 周安装量

2,500 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/tencentblueking/bk-ci --skill frontend-vue-development

Vue 代码规范前端架构

🇨🇳中文介绍

前端 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>

使用场景

开发 Vue 组件

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

网页可访问性（A11y）开发指南：实现WCAG合规、键盘导航与屏幕阅读器支持

12,600 周安装

代码审查最佳实践指南：完整流程、安全与性能审查清单

12,400 周安装

代码安全审查清单：最佳实践与漏洞防范指南（含密钥管理、SQL注入防护）

1,700 周安装

Android 整洁架构指南：模块化设计、依赖注入与数据层实现

1,400 周安装

后端 API 开发 → 使用 01-backend-microservice-development
构建机 Agent → 使用 05-go-agent-development

src/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. 方法
}

props: {
    resourceType: {
        type: String,
        default: ''
    },
    options: {
        type: Array,
        default: () => []  // 对象/数组使用工厂函数
    }
}

// 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)

// 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()`

开发组件前确认：

文件命名使用 kebab-case
遵循 ESLint 规则（4 空格、无分号）
Props 使用完整定义（type + default）
对象/数组 Props 使用工厂函数
禁止使用 v-html
使用 scoped 样式

Perl 5.36+ 现代开发模式与最佳实践 | 构建健壮可维护应用程序指南

1,200 周安装

腾讯蓝鲸CI前端Vue开发指南：Vue 2.7 + Vuex + Vue Router + bk-magic-vue最佳实践

🇨🇳中文介绍

前端 Vue 开发

快速参考

最简示例

使用场景

相关 Skills

非使用场景

前端应用结构

ESLint 核心规则

组件选项顺序

Props 定义

API 调用模式

Vuex 使用

方法命名约定

检查清单

最新 Skills