vue命名规范 - 技术栈

文件和文件夹的命名：
- 文件夹命名： Vue 项目中通常可以根据功能或页面来划分文件夹。例如，您可以为每个页面创建一个文件夹，并将相关的组件、样式和资源文件放在其中。文件夹的命名最好使用短横线分隔的小写字母（kebab case）命名，例如：user-profile。
- Vue 单文件组件命名： 组件的命名最好使用 PascalCase（首字母大写驼峰命名法），并以 .vue 结尾。例如：UserProfile.vue。
- 普通 JavaScript 文件命名： 如果是工具函数、配置文件等普通的 JavaScript 文件，命名可以使用 camelCase（驼峰命名法），例如：apiUtils.js。
文件和文件夹的组织：
- 布局和菜单： 通常，布局文件和菜单相关的组件可以放在一个专门的文件夹中，例如 layouts。您可以在其中创建一个名为 DefaultLayout.vue 的布局组件，然后在其他页面中引用它。
- 页面组件： 每个页面应该有一个单独的文件夹，并在其中放置页面的 Vue 单文件组件，以及可能的样式、图片等资源。这有助于将每个页面的相关内容分组在一起，便于维护和查找。例如：views/UserProfile/UserProfile.vue。
- 共享组件： 如果某个组件会在多个页面或布局中重复使用，可以将其放在一个 components 文件夹中，并在需要的地方引用。例如：components/Button/Button.vue。
- 路由配置： 将路由配置文件（通常是一个名为 router.js 或类似的文件）放在项目的根目录下。
页面组件 vs. 共享组件：
- 页面组件： 页面组件是特定页面的一部分，通常包含与该页面直接相关的业务逻辑和视图。它们可能会引用共享组件来构建页面的不同部分。
- 共享组件： 共享组件是可以在多个页面中重复使用的组件，例如按钮、表单字段、模态框等。它们通常比较通用，独立于特定页面的业务逻辑。
模块化和命名空间：
- 在组件的 data、methods 等属性中，尽量使用命名空间来防止命名冲突。例如，在 data 中使用 userProfile 而不是 user，以避免与其他组件中的相同名称产生冲突。
样式：
- 每个页面或组件的样式文件可以放在相应的文件夹内，或者与组件文件放在同一目录下。这可以根据个人和项目的偏好来决定。最重要的是保持一致性。
- 使用合理的样式命名和组织，例如 BEM（块、元素、修饰符）命名法，以提高可读性和维护性。
公共资源：
- 公共资源如全局样式、字体、图标等可以放在公共目录下，以便整个项目共享。

例子：比如我有整个页面的布局为三个容器上面一个最上面的头部栏左侧是菜单右边内容那么这三个页面应该放在哪个文件夹里呢

对于这种整体页面布局，您可以将不同部分的容器分别放在不同的文件夹中，以便更好地组织和管理。以下是一个建议的布局：

头部栏：
- 创建一个名为 layouts 的文件夹，用于存放布局相关的组件。
- 在 layouts 文件夹中创建一个名为 Header.vue 的组件文件，用于定义头部栏的内容和样式。
菜单：
- 在 layouts 文件夹中，创建一个名为 Sidebar.vue 的组件文件，用于定义菜单栏的内容和样式。
内容区域：
- 在 views 文件夹中，创建一个名为 Dashboard 的文件夹，用于存放整体页面的内容区域。
- 在 Dashboard 文件夹中，创建一个名为 Dashboard.vue 的组件文件，用于定义整体页面的内容部分。

最终的项目目录结构可能如下所示：

src/
|-- components/
|   |-- ...
|-- layouts/
|   |-- Header.vue
|   |-- Sidebar.vue
|-- views/
|   |-- Dashboard/
|       |-- Dashboard.vue
|       |-- ...
|-- App.vue
|-- main.js
|-- ...

在上述结构中，Header.vue 负责头部栏的内容，Sidebar.vue 负责菜单栏的内容，Dashboard.vue 负责整体页面的内容。这种结构使得不同部分的代码更容易维护，并且可以在需要的地方引用这些布局和页面组件。

在 App.vue 中，您可以组合这些组件，构建整体的页面布局。例如

<template>
  <div>
    <Header />
    <div class="main-content">
      <Sidebar />
      <Dashboard />
    </div>
  </div>
</template>

<script>
import Header from '@/layouts/Header.vue';
import Sidebar from '@/layouts/Sidebar.vue';
import Dashboard from '@/views/Dashboard/Dashboard.vue';

export default {
  components: {
    Header,
    Sidebar,
    Dashboard
  }
};
</script>

<style>
.main-content {
  display: flex;
}
</style>

这样，您可以在 App.vue 中组合头部栏、菜单和内容区域，创建整体页面布局。整个项目的结构更清晰，各部分的功能和样式相互隔离，更易于维护和扩展。

常见的HTML和CSS命名规范

HTML Class 命名规范：

1、BEM (Block Element Modifier) 命名法： BEM是一种流行的HTML和CSS命名约定，它通过明确的命名约定来定义块（Block）、元素（Element）和修饰符（Modifier）。这有助于创建自解释且高度可重用的代码。例如：

<div class="header">
  <div class="header__logo"></div>
  <div class="header__menu"></div>
  <div class="header__menu--active"></div>
</div>

2、命名约定： 使用有意义的名词或形容词来描述元素的功能或外观。避免使用单词缩写、不清晰的名字或过于简单的名字。

3、避免样式与功能的混淆： 尽量避免使用表示样式的类名，而应该关注于元素的功能。例如，不要使用 red-text，而是使用 error-message。

4、可读性： 使用连接符（短划线或下划线）将多个单词组合，以提高可读性。例如，header-section 或 header_section。

CSS 命名规范：

1、类名前缀： 在类名前加上适当的前缀，以避免类名冲突。例如，可以使用项目的缩写或者模块名称作为前缀。

2、避免具体样式： 类名应该描述元素的功能或用途，而不是具体的样式。例如，不要使用 big-red-button，而是使用 cta-button。

3、语义化： 使用有意义的类名，以便在不查看样式的情况下也能理解其含义。

4、避免嵌套选择器的过度深度： 避免使用过深的选择器嵌套，以减少样式耦合和维护难度。

重用： 尽量设计可重用的类名，以减少重复的样式定义。