个人项目技术总结--Vue

1. 项目的搭建：

        刚开始接触vue时，习惯了单页面应用，不了解项目的搭建与打包，通过vue官网学习，试着搭建项目，后来发现很简单。

        附上链接：https://cn.vuejs.org/v2/guide/installation.html

        步骤大致如下：

                    # 全局安装 vue-cli

                    $ npm install --global vue-cli

                    # 创建一个基于 webpack 模板的新项目

                    $ vue init webpack my-project

                    # 安装依赖，走你

                    $ cd my-project

                    $ npm run dev

       打包用： npm run build ,打包后的文件在output 目录下

2.Vue 代理服务器设置

           在项目开发过程中，由于需要调试接口，在刚开始因为跨域的问题，只能将项目打包后，放到服务器上调试接口，但是太麻烦了，而且在打包后，出现问题很难定位，就想办法在本地调试接口。设置代理服务器，解决了跨域的问题，可以在本地调用服务器上的接口，调试起来方便了很多。            

1. 首先要安装插件 http-proxy-middleware

            使用npm 安装

            npm install http-proxy-middleware

   

     2. 按照以下网址设置即可

            链接： http://www.jb51.net/article/124700.htm

            附上截图以防链接失效：

               

3. vue数组中数据变化但是视图没有更新解决方案

       在开发过程中，经常会遇到数据变化了但是视图没有更新的问题，在网上搜了搜发现，数组比较特殊需要使用与他匹配的变异方法变化数据才能被检测到。比如：        

        //ts.mainTab[i].value = result.fields[x].code; 这种写法数据渲染不了，没有变化

        ts.$set(ts.mainTab[i], "value" , result.fields[x].code)//这种可以

        附上详细说明：

        

4. vue 大型表单项目,input 输入数据时卡顿

        在表单项目中，input输入框在多次输入后延迟非常的高，这对客户来说体验肯定不好，但当时一直找不到症结所在，后来在网上发现了同样的问题，才知道是 Vue.prototype._update这个触发的太频繁了。

        Vue.prototype._update这函数里触发的是VNode虚拟节点的比对更新，打断点调试后发现实际上这是一个循环，在控制台里输出this.$el的时候能得到正在深度遍历中的节点，沿着根结点App（也是formConfig数据绑定的作用域）开始直到具体触发输入的那个表单元素。在本项目里是使用了遍历输出所有的表单元素，并且当前组件的作用域是直接挂在根结点上的，就是这个遍历引发了如此高的延时。

       循环中的this.$el从当前组件的根部开始深度遍历，遍历了太多次，那么只要想办法缩小当前组件所绑定的数据量就解决了。

        附上链接：https://wenku.baidu.com/view/42caaaa2f9c75fbfc77da26925c52cc58ad69072.html

5. 项目中找了一些方便好用的方法

            千分位方法：                   

              toThousands: function(s, n) {//s代表数值，n代表保留位数

               if(s == "") {

                    return s;

               }

               if(n || n === 0) {

                    s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(n) + '';

               } else {

                    s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(2) + '';

               }

               var l = s.split('.')[0].split('').reverse();

               var r = s.split('.')[1];

               var t = '';

               for(var i = 0; i < l.length; i++) {

                    t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length && l[i + 1] != '.' && l[i] != '.' && l[i + 1] != "-" ? ',' : '');

               }

               if(r == undefined) {

                    return t.split('').reverse().join('');

               } else {

                    return t.split('').reverse().join('') + '.' + r;

               }

          }

        js 客户端打印html 并且去掉页眉、页脚：    

             链接：https://www.cnblogs.com/CandyManPing/p/7775083.html

        以上内容仅为项目开发时遇到的一些问题和解决办法，其实在开发过程中需求的理解才是一大难点，只有很了解业务流程才会理解需求吧。希望产品提需求时能讲解清楚，原型图看不懂只能靠猜靠问，开发起来很费劲。