Vue开发规范

文件命名规范

components / layouts

componentslayouts下的文件夹名以及.vue文件统一使用大驼峰的形式命名,如SideMenuSideMenu.vue

.js / .scss / 图片

所有的.js.scss和图片文件都使用短横线连接的形式命名,比如init-dialog.jselement-variables.scsslogo-bg.png

views

views下的文件夹名以及.vue文件统一使用短横线连接的形式命名,比如page-onepage-one.vue

文件结构规范

components

components下的组件,建议用一个文件夹来承载,形式如下:

|-src
| |-components
| | |-TheHeader
| | | |-index.js
| | | |-TheHeader.vue
  • TheHeader/index.js:至少有一个index.js文件,用来暴露组件;
import TheHeader from './TheHeader'
export default TheHeader
  • TheHeader/TheHeader.vue:至少有一个TheHeader.vue文件,用来编写组件。

views

views下的路由页面,建议用一个文件夹来承载,形式如下:

|-src
| |-views
| | |-salary
| | | |-components
| | | | |-log.vue
| | | |-bonus.vue
| | | |-config.vue
  • components:属于这个页面的组件。

router

|-src
| |-router
| | |-modules
| | | |-index.js
| | | |-org.router.js
| | |-index.js
  • modules/org.js:路由模块按功能划分,比如org.router.js中存放关于org模块的路由;
  • modules/index.js:实现了modules中路由模块的自动合并,无需手动合并;
  • index.jsvue-router的相关配置以及权限设置。

api

|-src
| |-api
| | |-menu
| | | |-index.js
| | |-base.js
| | |-config.js
| | |-index.js
| | |-install.js
  • menu/index.js:请求接口模块按照职责功能划分,比如user文件夹中存放关于用户信息的接口export const API_MENU = '/flux/menu'
  • base.jsaxios的封装;
  • config.jsaxios的一些配置和拦截器;
  • index.js:暴露所有的api接口;
  • install.js:请求方法的全局安装。

使用:

import { API_MENU } from '@/api'

mounted () {
  this.$_get(API_MENU)
}

代码编写规范

  • 始终在v-for中使用:key

  • 在事件中使用短横线命名
this.$emit('close-window')


  • 使用驼峰式声明props,并在模板中使用短横线命名来访问props

 
props: { 'title-text': String }


 
props: { titleText: String }
  • 不要在同个元素上同时使用v-ifv-for指令

  • 大于等于五个attribute元素应该分多行撰写





  • 保持指令简写的一致性
  • 模板表达式应该只有基本的JS表达式
  • template中,没有内容的组件,使用自闭合的形式
  • 按照Vue官方推荐的组件/实例的选项的顺序来进行编写
  • ...

内置了eslint-plugin-vue对代码进行检查,提供了三种不同的校验机制供选择:

  1. plugin:vue/recommended
  2. plugin:vue/strongly-recommended
  3. plugin:vue/essential

所有的配置文件都在.eslintrc.js中,可以按照自己的需求进行配置。

推荐阅读:Vue 官方风格指南

前后端联调规范

前后端联调使用node proxy代理的方式来实现。

Git 规范

分支规范

遵循gitflow的开发方式

代码提交规范

采取angular团队的代码提交规范,使用npm run commit来代替git commit,按照约束一步步填写commitcommit编写完成以后会对commit的格式进行校验,以及对在暂存区的.js/.vue文件进行lint校验。

初始化

模板内置了是否将本地项目初始化为一个git仓库的选项,选择初始化即可

初始化成功以后,依次执行如下命令就能将本地仓库关联到远程仓库:

  • git add .
  • npm run commit
  • git remote add origin https://github.com/xxx/xxx.git
  • git push origin master

fly启动项目修改

1、安装依赖 npm install moc-mocui --save
2、将项目中所有@ehr/ease-element 替换为 moc-mocui
3、解决报错:在 package.json 文件中 scripts 下的 lint 内容替换为 eslint --fix --ext .js,.vue src
4、解决报错:在.eslintrc.js 文件中注释掉 extends 中的@vue/standard

你可能感兴趣的:(Vue开发规范)