Vue 项目代码组织和风格约定

2023-12-21 00:29:06

前端小纠结：Vue 项目代码组织和风格约定

面对纷繁复杂的 Vue 项目代码，我们需要一套优雅的组织和风格约定，才能确保项目的可维护性和可读性。

代码模块化与解耦

优雅的代码组织离不开模块化的理念。将不同功能的代码逻辑拆分成独立的模块，可以提升代码的复用性、可读性和可维护性。

在 Vue 项目中，Routes 扮演着模块化路由配置的关键角色。它统一管理路由配置，不同模块可以通过它获取路由信息，从而实现模块间的解耦。

// Routes.js
export default {
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About },
  ]
};

这样，各个模块就可以通过导入 Routes 来获取路由配置，实现路由跳转的解耦。

// App.vue
<template>
  <RouterView />
</template>

<script>
import Routes from './Routes';

export default {
  router: new Router({ routes: Routes.routes })
};
</script>

props 约定

props 是组件间传递数据的有效方式。在 Vue 项目中，需要制定明确的 props 约定，以确保组件间的通信高效且一致。

命名规范： 使用驼峰命名法，避免使用下划线或连字符。
类型标注： 使用 TypeScript 或 PropType 对 props 的类型进行标注，提升代码健壮性。
默认值： 为可选项的 props 设置合理的默认值，提升代码的可读性。

// Component.vue
export default {
  props: {
    text: {
      type: String,
      required: true
    },
    color: {
      type: String,
      default: 'black'
    },
  }
};