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. 模块化和命名空间:

    • 在组件的 datamethods 等属性中,尽量使用命名空间来防止命名冲突。例如,在 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 中,您可以组合这些组件,构建整体的页面布局。例如






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

常见的HTML和CSS命名规范

HTML Class 命名规范:

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

   
 

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

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

4、可读性: 使用连接符(短划线或下划线)将多个单词组合,以提高可读性。例如,header-sectionheader_section

CSS 命名规范:

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

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

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

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

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

你可能感兴趣的:(vue.js,javascript,前端)