前言
这段时间初步学习了vue2，完成了团队的二轮考核任务，记录一下期间遇到的各个问题和解决方法。
任务要求
任务：在线账单本
-
项目要求：使用npm方法安装vue脚手架并生成项目
-
完整功能：增删改查（ CRUD ）
-
对接后台：学会使用接口文档，安装使用axios库发送请求，安装接口测试工具进行接口调试（ 如 postman等）
-
响应式布局：不同屏幕大小有不同的展现方式
-
界面友好：使用第三方组件库（ iView或Element），样式统一，良好观感
-
其它要求：不能使用jQuery与bootstrap，尽量发挥你的想象力
-
额外挑战：（ 尽量尝试去完成 ）
- 多页面：使用哈希路由，增加第二个页面用于展示统计信息，例如已完成与未完成的数量展示，占比，图例等
- 版本控制：学会使用git，上传你的代码至github，交任务可以直接将仓库链接发给我
一、初次接触接口文档
一、什么是接口文档？
在项目开发中，web项目的前后端分离开发，APP开发，需要由前后端工程师共同定义接口，编写接口文档，之后大家都根据这个接口文档进行开发，到项目结束前都要一直维护
二、为什么要写接口文档？
1、项目开发过程中前后端工程师有一个统一的文件进行沟通交流开发 2、项目维护中或者项目人员更迭，方便后期人员查看、维护
三、接口规范是什么？
首先接口分为四部分：方法、url、请求参数、返回参数 1、方法:新增(post) 修改(put) 删除(delete) 获取(get)
2、url：以/a开头，如果需要登录才能调用的接口(如新增、修改；前台的用户个人信息，资金信息等)后面需要加/u，即：/a/u；中间一般放表名或者能表达这个接口的单词；get方法，如果是后台通过搜索查询列表，那么以/search结尾，如果是前台的查询列表，以/list结尾；url参数就不说了。
3、请求参数和返回参数，都分为5列：字段、说明、类型、备注、是否必填字段是类的属性；说明是中文释义；类型是属性类型，只有String、Number、Object、Array四种类型；备注是一些解释，或者可以写一下例子，比如负责json结构的情况，最好写上例子，好让前端能更好理解；是否必填是字段的是否必填。
4、返回参数结构有几种情况：1、如果只返回接口调用成功还是失败（如新增、删除、修改等），则只有一个结构体：code和message两个参数；2、如果要返回某些参数，则有两个结构体：1是code/mesage/data，2是data里写返回的参数,data是object类型；3、如果要返回列表，那么有三个结构体，1是code/mesage/data,data是object，里面放置page/size/total/totalPage/list 5个参数，其中list是Arrary类型，list里放object 注意：uri地址里不允许出现大写字母，如果是两个单词拼接，用/分开
四、使用中遇到的问题
1.post传参
考核中我是使用axios发送请求的，一开始看到下图url的时候
还以为发送请求的url要用转义符把参数加在’?‘后面，后来才发现传参会自动处理
2.配置代理
后台没有处理接口文档的跨域问题，用vue内置的代理解决了
需要注意的是，如果配置多个代理可能会出现模糊相似规则问题，可通过下文的方式处理
二、关于element-ui
1.引入问题
一开始因为仅引入了部分组件，出现了各种各样的bug，折腾几个小时才发现是引入问题
2.dialog 对话框
dialog中内置的属性destroy-on-close=“ture”无作用，最后的处理方式是在关闭dialog时触发自定义函数，代码如下：
@close="handleClose"
...
handleClose() {
Object.assign(this.$data, this.$options.data());
}3.table 表格
table内置的求和可能会将我们并不需要求和的列也进行求和，解决方法参考该文章
三.关于Vue与JS
1.遇到的问题
1.在creatd、mounted等钩子函数处调用methods的方法需要在前加 this.
2.仅通过 scope.$index获取当前列的id在表单排序后会保留原始数据，应通过 scope.row获取当前列属性值
3.在标签中添加包含布尔值的属性时要在前加 ：，否则会被识别为字符串，如
<el-dialog
:close-on-click-modal="false"
:close-on-press-escape="false"
></el-dialog>4.on和emit通信的函数名注意不要写错，写错了没有报错和警告
5.阻止form表单的默认提交事件
总结
其实有许多问题都是可以避免出现的，希望接下来的学习能继续积累经验，减少低质问题的出现。