Vue前端开发规范

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

1 环境

1.1 代码工具

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

1.2 工具插件（VSCode）

Vue开发插件：eslint、HTML CSS Support、HTML Snippets、Live Server、Vetur、Vue 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 目录(文件夹)命名

参照项目命名规则；
有复数结构时，要采用复数命名法。
例：scripts、styles、images、data_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', {
  // ...
})

• 基础组件名 应用特定样式和约定的基础组件(也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。

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 的。

或者

• 完整单词的组件名

components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

• Prop 名大小写 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。

props: {
  greetingText: String
}