开发规范
项目开发规范
这个文档主要提供项目规范的文档
工程目录规范
├─.babelrc #babel配置
├─.eslintrc.js #eslint规范
├─faceConfig.json #开发相关的配置项
├─net.js #mockServer监听文件
├─package.json #包管理文件
├─README.md #项目介绍
│
├─build #打包配置目录
│ build.js #打包生产页面的脚本
│ check-versions.js #检测版本
│ utils.js #构建工具类
│ vue-loader.conf.js #vue-loader配置
│ webpack.base.conf.js #webpack基础配置
│ webpack.dev.conf.js #webpack开发环境配置
│ webpack.prod.conf.js #webpack生产环境配置
│
├─config #打包环境配置
│ dev.env.js #开发环境变量配置
│ index.js #项目打包配置
│ prod.env.js #生产环境配置
│
├─devGuide #开发指引
│
├─src #项目资源主目录
│ ├─common #公共文件
│ │ ├─css #公用css文档
│ │ ├─js #公用js文档
│ │ ├─scss #公用scss文档
│ │ └─store #store文档
│ │
│ ├─corePage #框架基础页面文件
│ │ │
│ │ ├─index #首页
│ │ │
│ │ ├─login #登陆页
│ │ │
│ │ └─worktable #工作台页面
│ │
│ ├─demoPage #框架提供的示例页面目录
│ │
│ ├─projectCommon #预留的项目公共资源目录,包括公用的js、scss、components等
│ │
│ └─scopes #功能模块顶层目录
│ │
│ ├─core #框架模块的顶层目录
│ │
│ └─project #预留的项目开发的顶层目录
│
└─static #静态依赖的主目录，打包时，该目录下资源会不做特殊处理，copy到输出目录
模块搭建规范
模块分类
项目上需要按业务进行模块分类, 在project 下建立项目的分类目录。
比如框架这里, 将所有功能分为两类:
* 组织管理相关（orgModules）;
* 系统管理相关（systemModules）;
如下所示结构:
├─src #项目资源主目录
│ │
│ └─scopes #功能模块顶层目录
│ │
│ ├─core #框架模块的顶层目录
│ │ │
│ │ ├─ orgModules #模块分类: 组织管理相关
│ │ │
│ │ └─ systemModules #模块分类: 系统管理相关
│ │
│ └─project #预留的项目开发的顶层目录
添加模块
在分类目录下就可以添加相应的模块了，模块按复杂程度可分为单功能模块和多功能模块，不同类型模块目录结构有所不同。
单功能模块
单功能模块的完整目录结构很简单, 如下所示:
├─simpleDemoModule #模块: 简单模块实例
│ │
│ ├─part #页内组件目录（非必须,视情况存在）
│ │
│ ├─route.js #入口路由（非必须,视情况存在）
│ │
│ ├─simpleDemoModule.html #入口html
│ │
│ ├─simpleDemoModule.js #入口js
│ │
│ └─simpleDemoModule.vue #入口vue
其中 part 目录，route.js都不是必须的。
多功能模块
通常情况下，模块都不是单独的功能，比如框架的资源权限管理模块（authority），模块下有四个相关功能：
* 角色权限管理(roleAuthorityManagement)
* 管理员权限(adminAuthority)
* 权限代理(authorityAgent)
* 相识权限管理(similarAuthority)
多功能模块的完整目录结构, 如下所示:
├─orgModules #模块分类: 组织管理相关
│ │
│ └─authority #模块: 资源权限管理
│ │
│ ├─modulePart #模块的功能目录,四个功能的实现都在这个目录下
│ │ │
│ │ ├─ roleAuthorityManagement #功能: 角色权限管理
│ │ │
│ │ ├─ adminAuthority #功能: 管理员权限
│ │ │
│ │ ├─ authorityAgent #功能: 权限代理
│ │ │
│ │ └─ similarAuthority #功能: 相识权限管理
│ │
│ ├─router #模块的路由配置目录，新增功能后都需要到该目录注册功能路由，这点后面还会提到
│ │ │
│ │ ├─ index.js #路由入口文件
│ │ │
│ │ └─ routes.js #模块下功能的路由加载
│ │
│ ├─authority.html #入口html, 要求跟模块同名
│ │
│ └─authority.js #入口js, 要求跟模块同名 (模块内插件声明也在该入口js中)
在模块的功能目录下, 要求创建一个跟功能同名的vue文件, 作为功能入口, 创建 routes.js 作为功能的路由声明, 简单功能只需要一个功能路由指向入口vue文件即可。
功能的完整目录结构，如下所示:
├─adminAuthority #功能: 管理员权限
│ │
│ ├─api #后台请求代码目录
│ │
│ ├─part #页内组件目录（非必须,视情况存在）
│ │
│ ├─adminAuthority.vue #功能入口vue
│ │
│ └─routes.js #功能路由声明
模块路由
单功能模块路由
没有多余的规范要求，按vue官网实现即可。
多功能模块路由
功能路由声明
模块中每个功能都需要声明自己的路由, 最简单的路由声明就是一个路由直接指向功能的入口vue。典型的路由声明参考,如下所示:
//导出该功能路由
export default [
{
title:"管理员权限",
name: "adminAuthority",
path: 'adminAuthority',
component: ()=>import("./adminAuthority.vue"),
children: [
{
name:'xxxxx',
path:'xxxxx',
component:()=>import("./part/xxxxx.vue")
},
...
]
},
...
];
模块路由导入
添加一个功能后，需要在模块路由中注册该功能路由， 在 routes.js 中添加引入代码, 如下所示:
import roleAuthorityManagement from '../modulePart/roleAuthorityManagement/routes'
import authorityAgent from '../modulePart/authorityAgent/routes'
import adminAuthority from '../modulePart/adminAuthority/routes'
import similarAuthority from '../modulePart/similarAuthority/routes'
const innerRoutes = [
...roleAuthorityManagement,
...authorityAgent,
...similarAuthority,
...adminAuthority
]
模块注入
添加一个模块后, 需要到 faceConfig 配置中新增模块寻址入口，
// 项目文件打包寻址地址
'docModule': ['corePage/*', 'demoPage/*'],
'coreModules': [
'orgModules/authority',
'orgModules/orguser',
'systemModules/sysmg',
'systemModules/logmg'
],
'projectModules': [
'demoModules/projectModuleOne',
'demoModules/projectModuleTwo'
]
在创建对应的功能菜单时, 功能路径配置格式为 [模块入口].html#/[功能名]
组件命名规范
- 文件名、组件名、引入名保持一致 (强制)
- 名称不能重复 (强制)
- 使用驼峰命名,名称开头小写 (强制)
- 名称要有意义,做到见名知意 (强制)
- 不能使用拼音命名 (建议)
data命名规范
data 属性名应该尽量能够做到见名知意，一般来说需要突出两到三个重点：
- 这个变量是关于什么业务行为的？
- 这个变量是关于什么组件的？
- 这个变量是关于组件什么特性的？
比如关于资源管理的model的显示隐藏控制属性，错误示例visable ,正确示例resourceMgModelVisible。
方法命名规范
事件方法命名格式 handleXxxxx, 其他方法命名格式 fnXxx
码值使用规范
码值写法标准化， 引入store ，使用CollectionData、CollectionLabel
<template>
<div>
<ta-select v-model="sex" style="width: 120px">
<ta-select-option v-for="item in CollectionData('SEX')"
:key="item.value"
:value="item.value">
{{item.label}}
</ta-select-option>
</ta-select>
<ta-table :columns="columns" :dataSource="data" rowKey="id" :pagination="{ pageSize: 5 }" >
<a slot="name" slot-scope="text" href="javascript:;">{{text}}</a>
<span slot="customTitle"><ta-icon type="smile-o" /> 名称</span>
<span slot="sex" slot-scope="text">{{CollectionLabel('SEX',text)}}</span>
<span slot="isOn" slot-scope="text">{{CollectionLabel('YESORNO',text)}}</span>
</ta-table>
</div>
</template>
<script>
const columns = [{
dataIndex: 'name',
slots: { title: 'customTitle' },
scopedSlots: { customRender: 'name' },
}, {
title: '年龄',
dataIndex: 'age',
}, {
title: '性别(码值)',
dataIndex: 'sex',
scopedSlots: { customRender: 'sex' },
},{
title: '是否在职(码值)',
dataIndex: 'isOn',
scopedSlots: { customRender: 'isOn' },
}];
const data = [];
for (let i = 0; i < 100; i++) {
data.push({
id: i,
name: `Name ${i}`,
age: i,
sex: i%2 + 1,
isOn: i%2,
description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.'
})
}
export default {
name:"collectionExample",
data(){
return {
data,
columns,
sex:''
}
}
}
</script>
样式规范
组件样式强烈建议指明作用域与模块内有效，否则可能出现样式混乱
且，样式选择器应避免使用元素选择器, 推荐类选择器
<style scoped lang="scss" type="text/scss">
#app { padding: 20px }
</style>
页面开发规范
项目书写包括vue模板书写,js书写,样式书写几部分.涉及到vue,js,html,css,es6,scss的书写.
