| 文档名称 |
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文件中。