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

Vue前端开发规范_第1张图片

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






或者


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


你可能感兴趣的:(vue,前端,Vue,CSS,Html,JavaScript,规范)