代码风格｜编写 Vue 项目的合理实践——检查一下你中了几枪

2024-02-10 19:49:59

在前端开发中，代码风格至关重要，它不仅可以让代码更加整洁、易于阅读，还能提高代码的可维护性和可读性。作为一名 Vue 开发人员，遵守合理的代码风格尤为重要。本文将介绍编写 Vue 项目的合理实践，并对照官方指南，帮助你审视自己的代码风格，看看你中了几枪。

1. 文件组织

合理的文件组织结构可以使项目更加清晰易于管理。Vue 官方推荐采用基于功能的目录结构，将组件、视图、路由和存储等不同功能模块组织到各自的目录中。

实践：

├── components
│   ├── Header.vue
│   └── Footer.vue
├── views
│   ├── Home.vue
│   └── About.vue
├── router
│   └── index.js
├── store
│   └── index.js

2. 变量命名

变量命名应该遵循驼峰命名法，并且含义明确。Vue 官方建议使用性变量名，避免使用缩写或单字符变量名。

示例：

// good
const userFullName = 'John Doe';
const isLoggedIn = true;

// bad
const u = 'John Doe';
const i = true;

3. 代码格式

代码格式化可以提高代码的可读性和可维护性。Vue 官方推荐使用 prettier 等代码格式化工具，以确保代码符合一致的格式规范。

示例：

// 格式化前
const user = {
  name: 'John Doe',
  age: 30
};

// 格式化后
const user = {
  name: 'John Doe',
  age: 30
};

4. 组件命名

组件命名应该遵循 Pascal 命名法，并且应该反映组件的功能。Vue 官方建议使用 kebab-case（连字符分隔）命名组件文件。

示例：

// good
<MyButton />
<HelloWorld />

// bad
<my-button />
<hello-world />

5. 单文件组件

在 Vue 中，单文件组件（SFC）是一种常见的组织方式，它将 HTML、CSS 和 JavaScript 代码封装在一个文件中。Vue 官方建议遵循以下 SFC 结构：

<template>
  <div>
    <h1>Hello World</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World'
    }
  }
}
</script>

<style>
h1 {
  color: red;
}
</style>