Vue前端开发规范

作者: waynian | 来源:发表于2019-07-30 14:29 被阅读8次

引用自:
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"/>

相关文章

  • Vue前端开发规范及代码风格

    Vue.js 开发规范目录及说明 版本v1.0日期2020-02-18 本文档为前端 vue 开发规范 规范目的 ...

  • 移动前端开发规范(一般规范)

    系列目录 移动前端开发规范(一般规范)移动前端开发规范(技术栈规范)移动前端开发规范(HTML规范)移动前端开发规...

  • 前端通用规范文档一

    一.通用规范 这篇文章写的前端通用规则,另一篇文章写了关于react和vue的规范,react和vue开发规范文档...

  • Vue前端开发规范

    引用自:vue官方、腾讯全端AlloyTeam 团队 1 环境 1.1 代码工具 推荐VSCode、webstor...

  • vue前端开发规范

    命名编码规范 驼峰式命名法介绍 -Pascal Case 大驼峰式命名法:首字母大写。eg:StudentInfo...

  • # 前端 Vue 开发规范

    规范目的 为提高团队协作效率便于后期优化维护输出高质量的文档(讨论即文档、注释即文档、代码即文档) 一 命名 1 ...

  • Vue前端开发规范

    概述 如果开发团队就一个人的话,那么自己写的代码就是规范,随着公司业务的扩展,团队不断壮大,这时候就要开始考虑协作...

  • Vue开发规范

    本文为基于vue官方风格整理的一份vue前端开发规范。 此规范主要目的统一团队开发风格,输出高质量的代码便于团队协...

  • 【vue】1.0 前端开发规范

    1.0 概述 为提高团队协作效率,规范文件管理,方便项目后期维护,提高代码质量,特制订此文档,前端开发人员必须遵照...

  • Winning前端Vue开发规范

    [优先级 A:必要的] 这些规则会帮你规避错误,所以学习并接受它们带来的全部代价吧。 [优先级 B:强烈推荐] 这...

网友评论

    本文标题:Vue前端开发规范

    本文链接:https://www.haomeiwen.com/subject/fycnrctx.html