vue项目规范

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.3.6 props传递要加类型判断，不能数组接收必须保函 Type 组件传参类型 default 组件默认值 2.3.7 组件样式基本上处于scoped 私有域开发 2.3.8 公共自定义组件要形成文档，便于开发者使用，要遵循以下标准 组件名、参数、说明、类型、默认值、事件名称、回调参数要有说明文档 例：

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’