vue3标杆代码规范
在Vue3项目开发中，为了提高代码的可维护性和一致性，我们需要制定一套清晰的代码规范。提供一个解决方案，从组件结构、命名约定、代码风格等方面入手，确保团队协作更加高效。
一、组件结构标准化
我们对Vue3单文件组件（SFC）进行结构化管理。一个标准的Vue3组件应该包含<template>、<script>和<style>三个部分，并且按照以下顺序书写：
vue
<!-- 模板内容 -->
</p>
// 组件逻辑
import { ref, reactive } from 'vue';
const state = reactive({
message: 'Hello Vue3'
});
/* 样式定义 */
.message {
color: blue;
}
<p>这种结构不仅便于阅读，还方便后续维护。
二、命名约定规范化
良好的命名习惯可以提升代码的可读性。对于组件名称，推荐使用PascalCase（大驼峰命名法），例如UserList.vue。而对于props、emits等属性，则采用camelCase（小驼峰命名法）。以下是具体示例：
vue</p>
defineProps({
userName: String // 小驼峰命名
});
const emit = defineEmits(['userClick']); // 小驼峰命名
<p>对于CSS类名，建议使用BEM命名法，以增强样式模块化。
三、代码风格一致化
保持代码风格的一致性至关重要。我们可以借助ESLint和Prettier工具来自动化检查和格式化代码。在.eslintrc.js中配置Vue3规则如下：
javascript
module.exports = {
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended'
],
rules: {
'vue/multi-word-component-names': 'error', // 强制多词组件名
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 生产环境禁用console
}
};
在.prettierrc文件中设置代码格式规则，如使用双引号、缩进为2个空格等。
通过以上三种思路，我们可以构建出符合Vue3实践的代码规范，从而促进项目的长期稳定发展。
