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