2 文件规范
2.1文件结构
├── public
│ └── logo.png # LOGO
│ └── index.html # Vue 入口模板
├── config #项目配置
│ └── index.js # 主配置文件
├── node_modules #项目依赖模块
├── mock #mock数据目录,用于本地数据模拟
├── src
│ ├── api # Api ajax 等
│ ├── assets # 本地静态资源,保函公共js 样式 图片
│ ├── config # 项目基础配置,包含路由,全局设置
│ ├── components # 业务通用组件
│ ├── core # 项目引导, 全局配置初始化,依赖包引入等
│ ├── router # Vue-Router
│ ├── store # Vuex
│ ├── utils # 工具库
│ ├── locales # 国际化资源
│ ├── views # 业务页面入口和常用模板
│ ├── App.vue # Vue 模板入口
│ └── main.js # Vue 入口 JS
│ └── permission.js # 路由守卫(路由权限控制)
│ └── global.less # 全局样式
├── tests # 测试工具
├── README.md #项目介绍
└── package.json #npm包配置管理,依赖包信息
此结构适只用于vue项目,不适用于uniapp、H5项目。
2.2.编码规范
2.2.1编码遵循W3C标准,参考遵循html编码规范、css编码规范、javascript编码规范
2.2.2 Vue编码要使用Eslint 语法规则和代码风格的检查,保证写出语法正确、风格统一的代码。
2.3组件规范
2.3.1 单文件组件大小写
全部采用大驼峰命名方式
例: MyComponent.vue
2.3.2 基础、公共组件命名
组件名应该始终是多个单词组成(大于等于 2),且命名规范为 KebabCase格式(避免与html元素冲突)
和父组件紧密耦合的子组件应该以父组件名作为前缀命名
2.3.3 模板中组件名大小写
例:
2.3.4 组件/实例顺序(常用属性)
name
components
props
data
computed
watch
mixins
created ( 生命周期钩子函数(按其执行顺序))
methods
2.3.5 单文件元素和实例顺序:
<template>...</template>
<script>/* ... /</script>
<style>/ ... */</style>
例
2.4 接口联调
2.4.1 统一采用axios方式
2.4.2 接口请求要定义环境变量区分development 、test 、production 环境
2.4.3 注明参数 用途
例
/**
* 登录
* parameter: {
* @param [String] username 账号
* @param [String] password 密码
* }
*/
export function login (parameter) {
return request({
url: userApi.Login,
method: 'post',
data: parameter
})
}
2.4.4 .请求方法名尽量与后端api url保持一致,使用驼峰命名
2.4.5 项目较大时要按照业务划分子目录,公共接口要建立公共请求 方法,供全局调用
2.5路由规范
2.5.1 页面跳转数据传递使用路由参数
2.5.2使用路由懒加载(延迟加载)机制(component: () => import(‘XXX.vue’))
2.5.3 path、children命名规范采用kebab-case命名规范。与vue文件的目录结构保持一致,方便找到对应的文件
2.5.4 name 命名规范采用KebabCase命名规范且和component组件名保持一致!(保持keep-alive特性,keep-alive按照component的name进行缓存,两者必须高度保持一致)
2.6资源路径的配置、引入规则
2.6.1路径配置
在build/webpack.base.conf.js文件中配置。
alias: {
‘@’: resolve(‘src’), // 默认配置,设置src目录别名
‘childRouter’: resolve(‘src/pages/menuRouter’), // 子路由路径配置
‘#’: resolve(‘src/assets’) // 配置assets文件夹路径
}
2.6.2路径导入
Js文件中导入实例:
导入node_modules模块中的文件,直接引入即可,不需要加文件后缀名。
导入自定义文件的时候,使用相对路径或者使用路径配置别名,不许要加文件后缀名。
导入node_modules模块:
import Vue from ‘vue’
导入自定义文件:
import router from ‘./router’
import scrollConfig from ‘#/js/vuescroll.config’
css或者stylus样式导入需要使用 ~@ 开头
@import ‘~common/stylus/variable’