个人项目技术总结--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 代理服务器设置
在项目开发过程中,由于需要调试接口,在刚开始因为跨域的问题,只能将项目打包后,放到服务器上调试接口,但是太麻烦了,而且在打包后,出现问题很难定位,就想办法在本地调试接口。设置代理服务器,解决了跨域的问题,可以在本地调用服务器上的接口,调试起来方便了很多。
- 首先要安装插件 http-proxy-middleware
2. 按照以下网址设置即可
链接: https://www.geek-share.com/detail/2717480951.html
附上截图以防链接失效:
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.geek-share.com/detail/2720634920.html
以上内容仅为项目开发时遇到的一些问题和解决办法,其实在开发过程中需求的理解才是一大难点,只有很了解业务流程才会理解需求吧。希望产品提需求时能讲解清楚,原型图看不懂只能靠猜靠问,开发起来很费劲。
- 浅谈vue项目重构技术要点和总结
- 使用Vue框架开发商城mall项目中所遇到的问题及技术点总结
- 基于springboot+vue等技术栈的个人项目
- Vue个人项目的总结以及注意的地方
- 项目管理心得:一个项目经理的个人体会、经验总结
- 团队项目个人工作总结(4月18日)
- 公司做项目的几点经验总结(个人经验)
- 项目管理心得:一个项目经理的个人体会、经验总结
- 个人项目-密码管理-总结二(常用SQL语句汇总)
- 项目经验 技术功底 个人潜力 为人处世风格
- 个人总结一些关于需要学习的技术
- vue项目中总结用到的方法。
- 项目中使用前端技术总结一(Sea.js)
- 项目管理心得:一个项目经理的个人体会、经验总结
- 团队项目:个人工作总结05
- 自己项目经历的技术总结
- 团队项目个人工作总结(4.24)
- 项目技术总结三之分布与集群的区别
- 总结一下现在这个项目用到的技术