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

2,189 阅读5分钟

前言

   也是在掘金的网站上第一次写文章,写的水平一般,望各位看官提出建议或者意见(我属于小白)(项目中的代码不共享,总结下我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:如果有什么建议或者意见的,请留言