锐客网

  1. 首页 > it技术 > >

三个月vue项目工作总结及不足

前言
也是在掘金的网站上第一次写文章，写的水平一般，望各位看官提出建议或者意见（我属于小白）(项目中的代码不共享，总结下我3个月的VUE之旅)
3个月中参与了2个vue的项目（部分）模块的开发，
1：项目名称《小蜜云织造》
2：项目名称《移动端季度考核》（第一部分）
3：项目名称《终端打卷机》（界面及组件的构建）（相关界面中的功能写完了，未截图，请见谅）
这3个项目由均mvvm(前端框架VUE)编写，从中获取到如下的结构内容
1).使用token的调用
2).能编写和使用vuex相关
3).将数据上传以(*.json格式)方式打包到远程服务器上
4).vue项目使用了计算属性(computed),组件化(components),路由(router)等
5).es6的部分使用(如let,for in,for of)等
6).使用了vue常用的官方推荐的插件(axios)
7).vue项目打包上线
4项目部分截图（我做的页面模块我进行截图如下）
4.1(季度考核)
1:介绍
给公司内部的员工进行（由领导进行评分）一个在微信端运行的VUE应用程序
2:截图
MBO

（后台配置领导）进行对领导下面的员工进行评价

进入某一个员工
（此页面是这个MBO的核心地方）
制作了以下几个功能
1：计算对应（由后台传递给我的相关能力）
2：让用户在input输入框中输入相关分数
2.1要求几点
2.1.1根据用户输入的分数（不能小于0，也不能大于后台传递给前端的标准分值）
2.1.2也不能出现为空的情况
2.1.3 计算出来的结果会和比重进行计算，得到对应能力当前总分
2.1.4 当输入的分数如果是OK的，就会更新对应能力和总分的分数，让用户马上能够看到结果


扣分类型
2.1.5 当用户选择如下截图中的扣分项时，点提交后（此处做了个本地缓存），将选择的数据保存到本地中去，


扣分和对应分数的数据展示在页面中


将显示在上面的截图中

3：页面中的token,axios(接口)请求均在vuex中完成的，因为当状态有多个时候，直接通过vuex来处理会更方便
4：当点上图时，会将上面的分数，评价，扣分json类型都保存到远程服务器
5:总结mbo项目和不足
5.1在ios系统下面（新版本微信出现滚动问题，安卓下面正常）
5.2采用的是VUE 的muse ui框架来开发MBO业务
6 小蜜云织造(终端)
1:介绍
给工厂开发的一款运行在终端机上的VUE应用程序
2:截图
这个VUE应用程序主要使用的是vux(这个ui框架)进行开发的
主要开发如下图

产量查询（显示全部和关闭显示的功能）
有不足的地方（当数据大量时，查询的结果时间会变长，让用户等待）
原因请大家查看


计算总米数和品种合计的功能

vue路由权限的设置（使用的是内置方式进行处理）


当前系统时，显示在（如下背景灰色的坐标上面）
这个坐标方式使用的代码在下面


核心代码如下（只能截图了）（有简称的代码，可以留言，谢谢哦）
7：总结小蜂云织造项目和不足
7.1当数据大量时，查询出来的数据会很慢（原因上面已经给出连接，或者有相关的经验的朋友给出相关的建议）
7.2如果出现扩展情况，可能模块需要重写（或者重构）
7.3会出现部分兼容性的问题（如页面出现 空白的）
8：终端打卷机中的键盘输入，清除，退后的功能将有 我实现（说明思路，代码太多了）
1（页面是由我同事写的，功能是我编写的）
页面如下（使用的是table表格方式完成的）
思路是使用vue提供的refs方式遍历table(中每一个元素)，使用es6的array.from()将每一个遍历的节点，变成真的数组，判断如果不是退格字符串或者清除字符串，就将字母或者数字写入到一个input(v-model='keyworkd')使用拼接方式处理，如果是退格（使用的是substring()方法处理的），清除的这边就不说了
因为此处（如果有多个input时，就需要使用vue的@focus='xxx(int)'）来判断用户点击的是那个input输入框(这个和切换tab的代码是类似的)
总结：
1：通过上面3个项目的开发和上线（对我在vue方面（如vuex,vue-router等）有了很大的提升）
2：也对es6的部分语法,api之类的在项目中使用了
3 : 对于未在项目中使用的技术，请见谅
4：如果有什么建议或者意见的，请留言










【三个月vue项目工作总结及不足】转载于:https://juejin.im/post/5b10d840e51d4506b26e88c1

    推荐阅读


    上一篇：关于PostgreSQL同步复制下主从切换时的数据丢失问题

    下一篇：Android|Android startActivity()和onActivityResult()使用总结