Vue前端开发规范

引用自:
vue官方
腾讯全端AlloyTeam 团队

1 环境

1.1 代码工具

推荐VSCode、webstorm、sublime、Atom
统一开发,尽量使用VSCode,轻量、插件多,免费

1.2 工具插件(VSCode)

Vue开发插件:eslintHTML CSS SupportHTML SnippetsLive ServerVeturVue VSCode Snippets

1.3 VSCode设置

保存时自动按照eslint规则格式化代码

{
     "eslint.validate": [{
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    }
  ],
  "eslint.autoFixOnSave": true,
}

2 命名

2.1 项目命名

全部采用小写方式, 以下划线分隔。 例:my_project_name

2.2 目录(文件夹)命名

参照项目命名规则;
有复数结构时,要采用复数命名法。
例:scriptsstylesimagesdata_models

image

2.2 文件命名

2.2.1 components

组件命名使用大驼峰(KebabCase)TodoItem.vue

2.2.2 views(pages)

页面命名使用连接符(kebab-case)user-info.vue
如果views下的文件件只有一个文件,命名使用index.vue

│── views
│   └── user_info       
│         ├── index.vue

引用例子:
// 引用到  文件夹 + '/'即可
import("../views/user_info/")

2.2.3 JS文件命名

名使用分隔符线resize-event.js

如果为单个单词,使用小写md5.js

2.2.3 CSS, SCSS文件命名

  • css使用下划线
jdc.scss
jdc_list.scss
jdc_detail.scss
  • scss使用下划线开头,
    @import 引入的文件不需要开头的'_'和结尾的'.scss';
/* not good */
@import "_dialog.scss";

/* good */
@import "dialog";

2.2.4 HTML文件命名

使用下划线

jdc.html
jdc_list.html
jdc_detail.html

2.3 组件

  • 组件名为多个单词 (这样做可以避免跟现有的以及未来的 HTML 元素相冲突,因为所有的 HTML 元素名称都是单个单词的。)
  • 组件使用大驼峰
export default {
  name: 'TodoItem',
  // ...
}

Vue.component('todo-item', {
  // ...
})
  • 基础组件名 应用特定样式和约定的基础组件(也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头,比如 BaseAppV
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue


components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue

components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue
  • 单例组件名 只应该拥有单个活跃实例的组件应该以 The 前缀命名,以示其唯一性。
components/
|- TheHeading.vue
|- TheSidebar.vue
  • 紧密耦合的组件名 和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue

components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue
  • 组件名中的单词顺序
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue
  • 模板中的组件名大小写 对于绝大多数项目来说,在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。
<!-- 在单文件组件和字符串模板中 -->
<MyComponent/>

<!-- 在 DOM 模板中 -->
<my-component></my-component>

或者
<!-- 在所有地方 -->
<my-component></my-component>
  • 完整单词的组件名
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue
  • Prop 名大小写 在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板和 JSX 中应该始终使用 kebab-case。
props: {
  greetingText: String
}

<WelcomeMessage greeting-text="hi"/>

推荐阅读更多精彩内容

  • 命名编码规范 驼峰式命名法介绍 -Pascal Case 大驼峰式命名法:首字母大写。eg:StudentInfo...
    莫言默言阅读 2,678评论 0 4
  • 一、命名规范 1、文件命名 文件夹/文件的命名统一用小写,使用短横线命名 (kebab-case),包括js、cs...
    tony_better阅读 2,947评论 0 2
  • 这里是官方的 Vue 特有代码的风格指南。如果在工程中使用 Vue,为了回避错误、小纠结和反模式,该指南是份不错的...
    IMUKL阅读 3,915评论 0 5
  • 前几日听到一句生猛与激励并存,可怕与尴尬同在,最无奈也无解的话:“90后,你的中年危机已经杀到”。这令我很受触动。...
    王钰峰阅读 2,957评论 1 22
  • 此文基于官方文档,里面部分例子有改动,加上了一些自己的理解 什么是组件? 组件(Component)是 Vue.j...
    陆志均阅读 2,409评论 5 15