文档名称 | Vue开发规范 | ||
保密级别 |
| 文档版本编号 | 1.0.1 |
制作人 | 庞贤和 | 制作日期 | 2018.8.13 |
复审人 |
| 复审日期 |
|
时间 | 版本 | 说明 | 修改人 |
|
|
|
|
|
|
|
|
├── build // 构建相关
├── config // 配置相关
├── src // 源代码
│ ├── api // 所有请求
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件
│ ├── directive // 全局指令
│ ├── filtres // 全局 filter
│ ├── icons // 项目所有 svg icons
│ ├── lang // 国际化 language
│ ├── mock // 项目mock 模拟数据
│ ├── router // 路由
│ ├── store // 全局 store管理
│ ├── styles // 全局样式
│ ├── utils // 全局公用方法
│ ├── vendor // 公用vendor
│ ├── views // view
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
│ └── permission.js // 权限管理
├── static // 第三方不打包资源
│ └── Tinymce // 富文本
├── .babelrc // babel-loader 配置
├── eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── favicon.ico // favicon图标
├── index.html // html模板
└── package.json // package.json
文件名以小写开头,取有意义的英文名字,H5文件名与对应的JS文件名相同,命名以模块名开头加数字(该模块第几个文件),加一杠,以内容名结尾,如live1-ctrol.vue。
2、文件格式
UTF-8格式
3、页面中id命名要求
除入口页外,一个页面就是一个Page,每个Page有唯一ID,该ID命名以模块名开头加一杠,以内容名结尾,如login-wrap
4、H5文件内容要求
1)、功能模块的入口页,需要包含基本类库,以及入口页对应的JS脚本,其他子页面只有一个Page内容。
2)、对没有任何业务逻辑控制的页面,可以直接跳转。
3)、对于有业务逻辑控制的页面,应绑定链接事件方式,在事件中需要显示loading层,转到目标页面后,再隐藏loading层。
4)、弹框、select等需要大量代码去实现,要以组件的方式引入。
5、JS内容要求
1)、需要用请求和公共方法的文件,要用import引入:
import store from '@/store'
import { login, logout, getInfo } from '@/api/login'
2)、子组件引入方式:
公共组件经常使用如: header,footer等会一起打包到公共js文件。
先import LoginComponent from './login.vue'
再暴露 components: {
/* 引入登陆组件*/
'v_loginComponent': LoginComponent
};
3)、暴露出去的部分,要按顺序:
export default {
name: 'index', 名称
components: {}, 组件
data() {return{}}, 数据
methods: {}, 操作方法
watch: {'checkboxModel': {}}, 监听
computed : {"val" : function() {return "123";}} 计算属性
beforeCreate: function () {}, 创建之前
created: function () {}, 创建完成
beforeMount: function () {}, 挂载之前
mounted: function () {}, 挂载完成
beforeUpdate: function () {}, 更新之前
updated: function () {}, 更新完成
beforeDestroy: function () {}, 销毁之前
destroyed: function () {} 销毁完成
}
4、Css要求
1)、vue以局部css来写<style lang="less" scoped></style>只作用于当前vue文件。
2)、公共使用的css要单独放在一个文件夹里(less.css)。
5、接口请求
1)、请求用Axios ,Axios 的所有请求请使用公共的request.js的方法,配合编辑api接口文件。
2)、看后台需要配置post、get请求,所有的请求均会自动带上token(登陆api除外),后台需要校验token的失效性。另外put(PUT 往服务器上上传文件),或者其他个性化请求另外处理。
代码注释在一个项目的后期维护中显的尤为重要,所以我们要为每一个被复用的组件编写组件使用说明,为组件中每一个方法编写方法说明。
以下情况,务必添加注释:
1)、公共组件使用说明
2)、各组件中重要函数或者类说明
3)、复杂的业务逻辑处理说明
4)、特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的hack、使用了某种算法或思路等需要进行注释描述
5)、注释块必须以/**(至少两个星号)开头**/;
6)、单行注释使用//;
单行注释
普通方法一般使用单行注释// 来说明该方法主要作用
多行注释
组件使用说明,和调用说明
<!--公用组件:数据表格
/**
* 组件名称
* @module 组件存放位置
* @desc 组件描述
* @author 组件作者
* @date 2018年8月13日17:22:43
* @param {Object} [title] - 参数说明
* @param {String} [columns] - 参数说明
* @example 调用示例
* <hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable>
*/
-->
在vuex中,多个组件或者模块共享的数据,能用local storage的就不要用vuex;引入模块或者组件进行npm安装的时候,请不要漏掉--save,避免漏掉注册进package.json文件中。