面试题：你了解过哪些 Vue 开发规范？

在 Vue 项目开发中，遵循一定的开发规范可以提高代码的可读性、可维护性和团队协作效率。以下是一些常见的 Vue 开发规范：

1. 组件命名规范

PascalCase：组件文件名和组件名使用大驼峰命名法（PascalCase）。

  // 组件文件名
  UserProfile.vue

  // 组件名
  export default {
    name: 'UserProfile',
  };

语义化命名：组件名应具有语义化，能够清晰表达组件的用途。

  // 不推荐
  export default {
    name: 'Button',
  };

  // 推荐
  export default {
    name: 'SubmitButton',
  };

2. 目录结构规范

按功能划分：将组件、路由、状态管理等按功能划分到不同的目录中。

  src/
  ├── assets/          // 静态资源
  ├── components/      // 公共组件
  ├── views/           // 页面组件
  ├── router/          // 路由配置
  ├── store/           // 状态管理
  ├── services/        // API 服务
  ├── utils/           // 工具函数
  └── App.vue          // 根组件

组件分类：将组件分为全局组件和局部组件，全局组件放在 src/components，局部组件放在对应页面目录下。

  src/
  ├── components/      // 全局组件
  │   ├── Button.vue
  │   └── Modal.vue
  ├── views/           // 页面组件
  │   ├── Home/
  │   │   ├── Home.vue
  │   │   └── components/  // 局部组件
  │   │       └── HomeHeader.vue

3. 代码风格规范

单文件组件结构：按照 <template>、<script>、<style> 的顺序组织代码。

  <template>
    <div class="user-profile">
      <p>{{ username }}</p>
    </div>
  </template>

  <script>
  export default {
    name: 'UserProfile',
    data() {
      return {
        username: 'John Doe',
      };
    },
  };
  </script>

  <style scoped>
  .user-profile {
    color: #333;
  }
  </style>

属性顺序：按照一定的顺序定义组件的属性，如 name、components、props、data、computed、methods 等。

  export default {
    name: 'UserProfile',
    components: {},
    props: {},
    data() {},
    computed: {},
    methods: {},
  };

4. Props 规范

类型检查：为 props 定义类型检查，确保传入的数据类型正确。

  export default {
    props: {
      username: {
        type: String,
        required: true,
      },
      age: {
        type: Number,
        default: 18,
      },
    },
  };

命名规范：props 使用 camelCase 命名，模板中使用 kebab-case。

  export default {
    props: {
      userName: String,
    },
  };

  <template>
    <user-profile user-name="John Doe" />
  </template>

5. 事件命名规范

事件命名：自定义事件使用 kebab-case 命名。

  this.$emit('update-user', userData);

  <template>
    <user-profile @update-user="handleUpdateUser" />
  </template>

6. 样式规范

Scoped CSS：使用 scoped 属性限定样式作用域，避免样式污染。

  <style scoped>
  .user-profile {
    color: #333;
  }
  </style>

CSS 预处理器：使用 Sass、Less 等 CSS 预处理器，提高样式编写效率。

  <style lang="scss" scoped>
  .user-profile {
    color: #333;
    .username {
      font-size: 16px;
    }
  }
  </style>

7. 状态管理规范

模块化：将 Vuex 的状态管理模块化，按功能划分模块。

  store/
  ├── index.js          // 主入口
  ├── modules/          // 模块
  │   ├── user.js       // 用户模块
  │   └── product.js    // 商品模块

命名规范：Vuex 的 actions、mutations、getters 使用常量命名。

  // store/types.js
  export const SET_USER = 'SET_USER';

  // store/modules/user.js
  import { SET_USER } from '../types';

  const mutations = {
    [SET_USER](state, user) {
      state.user = user;
    },
  };

8. 路由规范

懒加载：使用懒加载技术，按需加载路由组件。

  const UserProfile = () => import('./views/UserProfile.vue');

  const routes = [
    {
      path: '/profile',
      component: UserProfile,
    },
  ];

路由守卫：使用路由守卫进行权限校验。

  router.beforeEach((to, from, next) => {
    if (to.meta.requiresAuth && !isAuthenticated()) {
      next('/login');
    } else {
      next();
    }
  });

9. 代码提交规范

Git Commit 规范：使用 Conventional Commits 规范提交代码。

  feat: 添加新功能
  fix: 修复 bug
  docs: 更新文档
  style: 代码格式化
  refactor: 代码重构
  test: 添加测试
  chore: 构建过程或辅助工具的变动

10. 工具支持

ESLint：使用 ESLint 检查代码风格，确保代码一致性。
Prettier：使用 Prettier 格式化代码，统一代码风格。
Husky：使用 Husky 在 Git 提交前自动运行代码检查和格式化。

总结

Vue 开发规范包括组件命名、目录结构、代码风格、Props、事件、样式、状态管理、路由、代码提交等方面。遵循这些规范可以提高代码质量、可读性和团队协作效率。同时，结合 ESLint、Prettier、Husky 等工具，可以进一步确保规范的执行。

THE END

Vue 进阶面试题