vue命名规范

1. 文件和文件夹的命名：

   • 文件夹命名： Vue 项目中通常可以根据功能或页面来划分文件夹。例如，您可以为每个页面创建一个文件夹，并将相关的组件、样式和资源文件放在其中。文件夹的命名最好使用短横线分隔的小写字母（kebab case）命名，例如：user-profile。
   • Vue 单文件组件命名： 组件的命名最好使用 PascalCase（首字母大写驼峰命名法），并以 .vue 结尾。例如：UserProfile.vue。
   • 普通 JavaScript 文件命名： 如果是工具函数、配置文件等普通的 JavaScript 文件，命名可以使用 camelCase（驼峰命名法），例如：apiUtils.js。

2. 文件和文件夹的组织：

   • 布局和菜单： 通常，布局文件和菜单相关的组件可以放在一个专门的文件夹中，例如 layouts。您可以在其中创建一个名为 DefaultLayout.vue 的布局组件，然后在其他页面中引用它。
   • 页面组件： 每个页面应该有一个单独的文件夹，并在其中放置页面的 Vue 单文件组件，以及可能的样式、图片等资源。这有助于将每个页面的相关内容分组在一起，便于维护和查找。例如：views/UserProfile/UserProfile.vue。
   • 共享组件： 如果某个组件会在多个页面或布局中重复使用，可以将其放在一个 components 文件夹中，并在需要的地方引用。例如：components/Button/Button.vue。
   • 路由配置： 将路由配置文件（通常是一个名为 router.js 或类似的文件）放在项目的根目录下。

3. 页面组件 vs. 共享组件：

   • 页面组件： 页面组件是特定页面的一部分，通常包含与该页面直接相关的业务逻辑和视图。它们可能会引用共享组件来构建页面的不同部分。
   • 共享组件： 共享组件是可以在多个页面中重复使用的组件，例如按钮、表单字段、模态框等。它们通常比较通用，独立于特定页面的业务逻辑。

4. 模块化和命名空间：

   • 在组件的 data、methods 等属性中，尽量使用命名空间来防止命名冲突。例如，在 data 中使用 userProfile 而不是 user，以避免与其他组件中的相同名称产生冲突。

5. 样式：

   • 每个页面或组件的样式文件可以放在相应的文件夹内，或者与组件文件放在同一目录下。这可以根据个人和项目的偏好来决定。最重要的是保持一致性。
   • 使用合理的样式命名和组织，例如 BEM（块、元素、修饰符）命名法，以提高可读性和维护性。

6. 公共资源：

   • 公共资源如全局样式、字体、图标等可以放在公共目录下，以便整个项目共享。

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

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

1. 头部栏：

   • 创建一个名为 layouts 的文件夹，用于存放布局相关的组件。
   • 在 layouts 文件夹中创建一个名为 Header.vue 的组件文件，用于定义头部栏的内容和样式。

2. 菜单：

   • 在 layouts 文件夹中，创建一个名为 Sidebar.vue 的组件文件，用于定义菜单栏的内容和样式。

3. 内容区域：

   • 在 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、避免嵌套选择器的过度深度： 避免使用过深的选择器嵌套，以减少样式耦合和维护难度。

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