当前位置：首页 > VUE

vue 代码规范实现

2026-03-08 03:05:42VUE

Vue 代码规范实现

Vue 代码规范的实现可以通过多种方式，包括使用 ESLint、Prettier 等工具，以及遵循 Vue 官方推荐的代码风格指南。以下是具体的实现方法和建议：

使用 ESLint 和 Prettier

安装 ESLint 和 Prettier 插件，配置 .eslintrc.js 和 .prettierrc 文件。ESLint 用于检查代码质量，Prettier 用于格式化代码。

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    '@vue/prettier',
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
};

// .prettierrc
{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

遵循 Vue 官方风格指南

Vue 官方提供了一套代码风格指南，建议在项目中遵循这些规范。例如：

组件名应该始终是多个单词，避免与 HTML 元素冲突。
组件的 data 必须是一个函数。
Prop 定义应该尽量详细，至少需要指定其类型。

// 组件名示例
export default {
  name: 'TodoItem',
  // ...
}

// Prop 定义示例
props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return ['syncing', 'synced', 'version-conflict', 'error'].indexOf(value) !== -1
    }
  }
}

使用 Vue CLI 创建项目时启用规范

使用 Vue CLI 创建项目时，可以选择启用 ESLint 和 Prettier，自动生成配置文件。

vue create my-project
# 选择 Manually select features
# 勾选 Linter / Formatter
# 选择 ESLint + Prettier

配置 Git Hooks

通过配置 Git Hooks，可以在提交代码前自动运行 ESLint 和 Prettier，确保代码符合规范。

npx mrm lint-staged

在 package.json 中添加以下配置：

"lint-staged": {
  "*.{js,vue}": [
    "eslint --fix",
    "prettier --write",
    "git add"
  ]
}

组件文件结构规范

建议按照以下结构组织组件文件：

components/
  TodoItem/
    index.vue
    TodoItem.spec.js
    TodoItem.scss

单文件组件规范

单文件组件（SFC）应该按照 <template>、<script>、<style> 的顺序组织代码，并遵循以下规范：

vue 代码规范实现

<template>
  <div class="todo-item">
    {{ todo }}
  </div>
</template>

<script>
export default {
  name: 'TodoItem',
  props: {
    todo: {
      type: String,
      required: true,
    },
  },
}
</script>

<style scoped>
.todo-item {
  color: #333;
}
</style>