前端项目规范

86

结构规范

   ├── index.html                      入口页面
   ├── favicon.ico                     页面图标
   ├── .babelrc                        babel规则
   ├── .editorconfig                   编辑器配置
   ├── .eslintignore                   eslint忽略规律
   ├── .eslintrc.js                    eslint规则
   ├── .gitignore                      git忽略规则
   ├── build                           构建脚本目录
   │   ├── build-server.js                 运行本地构建服务器,可以访问构后的页面
   │   ├── build.js                        生产环境构建脚本
   │   ├── dev-client.js                   开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷新
   │   ├── dev-server.js                   运行本地开发服务器
   │   ├── utils.js                        构建相关工具方法
   │   ├── webpack.base.conf.js            wabpack基础配置
   │   ├── webpack.dev.conf.js             wabpack开发环境配置
   │   └── webpack.prod.conf.js            wabpack生产环境配置
   │   └── webpack.dll.conf.js             wabpack dll配置
   ├── config                          项目配置
   │   ├── dev.env.js                      开发环境变量
   │   ├── index.js                        项目配置文件
   │   ├── prod.env.js                     生产环境变量
   │   └── test.env.js                     测试环境变量
   ├── mock                            mock数据目录
   │   └── hello.js
   ├── package.json                    npm包配置文件,里面定义了项目的npm脚本,依赖包等信息
   ├── ReadMe.md                       项目描述文件
   ├── src                                项目源码目录
   │   ├── main.js                            入口js文件
   │   ├── App.vue                            根组件
   │   ├── common
   │   ├── components                                                 业务组件目录
   │   │   └── Header.vue
   │   ├── assets                         静态资源目录,这里的资源会被webpack构建
   │   │   └── img                            图片存放目录
   │   ├── lib                            外部引用的插件存放及修改文件
   │   ├── data                          模拟数据,临时存放
   │   ├── routes                         前端路由
   │   │   └── index.js
   │   ├── model                        接口,统一管理
   │   │   └── index.js
   │   ├── store                          vuex, 统一管理
   │   │   └── index.js
   │   └── views                          视图模块名
   │   │   ├── home
   │   │   │    ├── business              业务复杂的话,把vue中的复杂逻辑抽离出来
   │   │   │    │   └── traffic.js
   │   │   │    └── Home.vue
   │   │   └── notfound.vue
   ├── static                             纯静态资源,不会被wabpack构建。
   └── test                               测试文件目录(unit&e2e)
       └── unit                               单元测试
           ├── index.js                           入口脚本
           ├── karma.conf.js                      karma配置文件
           └── specs                           单测case目录
               └── Hello.spec.js
​

命名

Pascal Case 大驼峰式命名法:首字母大写。eg:StudentInfo、UserInfo、ProductInfo Camel Case 小驼峰式命名法:首字母小写。eg:studentInfo、userInfo、productInfo

文件资源命名

文件名不得含有空格 文件名建议只使用小写字母,不使用大写字母。( 为了醒目,某些说明文件的文件名,可以使用大写字母,比如 README、LICENSE。 ) 文件名包含多个单词时,单词之间建议使用半角的连词线 ( - ) 分隔。 一个项目中尽量保持一种命名格式,保证项目的统一性。

变量命名

命名方式: 小驼峰式命名方法 命名规范: 类型+对象描述的方式,如果没有明确的类型,就可以使前缀为名词, 请保证变量见名知意 参考:github.com/kettanaito/…

推荐:

let tableTitle = 'LoginTable'
const MAX_COUNT = 10

不推荐:

var getTitle = 'LoginTable'
var max = 10

组件规范

组件尽量创建文件

只要有能够拼接文件的构建系统,就把每个组件单独分成文件。

推荐:

components/
    |- TodoList.vue
    |- TodoItem.vue

不推荐:

Vue.component('TodoList', {
  // ...
})
Vue.component('TodoItem', {
  // ...
})

组件文件的大小写

单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)

推荐:

components/
    |- MyComponent.vue

不推荐:

components/
    |- myComponent.vue
    |- mycomponent.vue

基础组件名

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

推荐:

components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

不推荐:

components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

紧密耦合的组件名

和父组件紧密耦合的子组件应该以父组件名作为前缀命名。 如果一个组件只在某个父组件的场景下有意义,这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件,所以这样做可以把相关联的文件排在一起。

推荐:

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue

不推荐:

components/
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue

组件名中的单词顺序

组件名应该以高级别的 (通常是一般化描述的) 单词开头,以描述性的修饰词结尾。

推荐:

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue

不推荐:

components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue

模板中的组件名大小写

总是 PascalCase 的

推荐:

<!-- 在单文件组件和字符串模板中 -->
<MyComponent />

不推荐:

<!-- 在单文件组件和字符串模板中 -->
<mycomponent />
<!-- 在单文件组件和字符串模板中 -->
<myComponent />

指令缩写

都用指令缩写 (用 : 表示 v-bind: 和用 @ 表示 v-on:)

推荐:

<input @input="onInput" @focus="onFocus" />

不推荐:

<input v-bind:value="newTodoText" :placeholder="newTodoInstructions" />

vscode 使用插件建议

Auto Close Tag Path Intellisense Prettier Vetur

状态管理规范

  1. 当我们项目中复杂程度较低时,建议只用 statedata 就可以了
  2. 如果仅仅因为存在多层传递数据的场景,不建议使用mobxredux,可使用contextprovider解决
  3. 如果仅仅因为夸路由数据共享,不建议使用mobxredux,可使用contextprovider或者路由传参解决
  4. 如果业务复杂,需要使用第三方状态管理解决复杂度,看下一条
  5. 当项目复杂度一般,小规模团队或开发周期较短、要求快速上线时,推荐使用mobx
  6. 当项目复杂度较高,团队规模较大或要求对事件分发处理可监控可回溯时,推荐使用redux,可尝试使用 rematch@reduxjs/toolkit,减少模板代码
  7. 如果后端数据符合REST风格且数据格式统一重复数据较多,推荐使用扁平化处理数据,参考normalizreg: twitter 知乎