重生之我在学Vue--第19天 Vue 3 团队协作与代码规范

最新推荐文章于 2026-05-17 05:57:05 发布

原创

最新推荐文章于 2026-05-17 05:57:05 发布 · 1.3k 阅读

重生之我在学Vue–第19天 Vue 3 团队协作与代码规范

文章目录

重生之我在学Vue--第19天 Vue 3 团队协作与代码规范

前言

当代码量突破千行大关，团队协作就像在高速公路上开车——没有交通规则就会连环追尾！今天我们将打造工业级代码生产线，用三大神器武装你的项目：ESLint红绿灯、Git Flow交通系统、Swagger导航地图，让你的团队协作像精密机械般运转！

Vue3 官方中文文档传送点：风格指南 | Vue.js

记住：代码规范不是限制，而是让团队写作像交响乐般和谐！

Vue前端成仙之路：Vue 前端成仙之路_野生的程序嫣的博客-CSDN博客

GO后端成神之路：Go 后端成神之路_野生的程序嫣的博客-CSDN博客

一、代码规范：打造工业级代码生产线

1.1 ESLint + Prettier 黄金组合

// .eslintrc.cjs
module.exports = {
   
   
  root: true,
  env: {
   
    browser: true, es2021: true },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'prettier'
  ],
  rules: {
   
   
    'vue/multi-word-component-names': 'off', // 允许单文件组件名
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

// .prettierrc
{
   
   
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "htmlWhitespaceSensitivity": "ignore"
}

1.2 Vue 项目规范要点

规范类型	标准示例	错误示例
组件命名	TodoList.vue	list.vue
属性顺序	v-if > v-for > v-model	v-model写在v-for前面
方法命名	handleSubmit()	submit()
文件结构	script > template > style	template写在最前面

配置自动修复：

// package.json
"scripts": {
   
   
  "lint": "eslint . --ext .vue,.js --fix",
  "format":

标签

#vue.js #代码规范 #前端 #javascript #前端框架

最低0.47元/天解锁文章