本篇为博主首次参与项目的一些自我总结。博主加入前端工作大半年的时间，如果要算上正式完整的项目流，其实只有上个月刚刚完成的项目才算的上一个完整的项目流，经过了一个月没日没夜的加班，总算是在今天项目上线，所以接下来比较清闲，才能做在这里，分享自己项目中的一些事。
此前其实博主一直没有能完整的接触到一个前后端分离的项目，从项目立案，到开发，测试，部署上线等等这一系列的流程都是比较懵的，半路出家对这些一直不是很了解，能有一个这样的完整的项目经验也是对自己的一个前端生涯的正式开始，当然对于各位资深前端来说，博主也是显得非常稚嫩，希望能够得到指点。
首先先简单收下我们这个项目前端部分的一个工作流，项目也是基于Vue+element+axios+vuex+vue-router的一个前后端分离的项目
- 前端vue项目工作流：
- 作为前端我们首先拿到原型以后简单分析原型页面之间的逻辑关系，以及各个按钮跳转页面的情况，对于可复用的页面写成单独的组件，以便复用，减少代码重复，以及代码复用始终是我们追求的目标，博主每次看到重复的代码怎么看怎么不顺眼，实际除了项目的原型图以外，应该还是有设计稿，但是此次项目比较着急，因此我们就是对着原型来写的页面。
- 分析项目可能用到的插件以及依赖等，设计路由、开发环境、测试环境和生产环境的配置等。如果一开始没有确定好这些的话，后期加上也行，但是你会发现后期要改的地方非常多，所以一开始就要确定好你所需要的插件，依赖，以及一些前端的配置等等。
- 进行页面开发的时候，注意屏幕分辨率的适配问题，以免电脑分辨率不同，导致布局混乱。博主就是没有经验那种，前期一股脑将页面全部都写好了，等到后期调试的时候才发现很多页面适配分辨率问题太多，然后又一一去改，非常耽误开发的效率，另外还要考虑到图片的缩放等等，都是需要特殊布局的，不然屏幕分辨率发生变化的话，图片会被拉伸。
- 不知道大公司的前端是怎么样做的，我们公司一般是写好页面以后，有后端的人来将数据集成到页面上，所以理论来说，我们写完了页面，其实开发就已经完成了，不过对于我来说，如果前端只是单纯写页面的话，那就是浪费资源，又何必弄前后端分离呢，不过这次因为项目开发时间紧，因此也没有接口文档，一般根据后端提供的接口文档，将数据集成展示到页面上。没有接口文档，博主就只能担任辅助位置，告诉后端的小伙伴该怎么请求接口。
- 当我们从后台获取数据以后，一定要写判断防止未获取到数据的情况下捕获错误，切记切记，博主在这上面吃了很大的亏。不要以为捕获错误是后端做的事，前端是不需要的。当我们的代码或者是http请求错误的话，Jin靠页面报错显示是无法定位错误在哪里，并且严重的错误直接导致程序运行不下去，这都不是我们想要看到的，我们需要捕获错误，最好能做出提示信息等等，比如token过期，promise的reject捕获的错误。axios提供了请求和响应的拦截器，我们可以封装一个axios的请求，在请求中去定义拦截器，能够捕获到大部分的http的请求错误。
- 页面完成后，对页面的各个跳转，按钮等功能进行简单初步测试，以免出现一些不应该出现的简单逻辑错误，不要认为页面写完了就完事了，实际上页面写完才是开始，很多简单的逻辑错误都是我们一试就可以试出来的，博主当时就是想当然了，总以为应该可以了，连简单的点点按钮页面跳转都没有自己去测试，结果最后测试的时候，测试的小伙伴一直无奈的看着博主，说你的bug怎么这么多。在没有经历过完整的项目之前，博主对于测试这种事都是一带而过，现在才发现一个有经验的前端还是需要经过一定的测试的，所以博主也考虑接下学习一些单元测试等等的简单测试
- 经过了前面一系列的洗礼之后，我们的项目终于上线了，但是一上线之后，发现首页打开的时候，竟然时间长达30多秒，好了，一看代码，问题又出来了，项目用到的echarts图标是全部引入的，但是实际并没有用到所有的图标，所以最后全部修改为按需引入使用的几个图表，再一打包，果然一下子减了400多k，然后再一看用到的图片都是七八百k的，问了一下公司的前端大神，才知道图片需要压缩一下，虽然像素有所损失，但是大小甚至可以减掉一半（毕竟博主的项目并不是电商什么的，对于图片要求其实并不是很大），这样再一压缩，打包又小了几百k，服务端开了gzip之后，也是可以正常浏览了。
下面也是自己第一次使用vue写前端项目遇到的问题的一些经验之谈吧，了解的同学可以直接跳过了。
- vue知识点集合
- this关键词在vue当中的应用以及何时使用this，怎么去使用this。具体大家可以参考博主之前写的一篇博文
- 生命周期方法的运用，created表示组件创造的时候，DOM元素还未生成，所以此时不要操作DOM元素，一般在mounted方法中DOM元素已经生成了。
- window.open方法打开新页面，如果是在异步请求中打开新页面则会失效，需要赋值给一个变量，然后用变量.location.href = url这样的方法来打开。这个是博主项目需要下载pdf的时候，从后台获取数据，然后直接打开window.open发现没有想过，然后上网搜了一下，发现有这样一个说法，也算是给不知道的同学提个醒。
- Vue.nextTick()用于数据改变后，操作DOM的方法，因为vue是异步执行DOM更新的，在data数据被修改的时，DOM并不会立刻更新，而是更新放入队列中，等到所有的数据更新完毕以后，才会执行队列中的DOM更新，因此要拿到更新后的DOM进行操作，则必须在nextTick()方法中执行回调。这个方法在vue文档的api中就有介绍，不过博主这个项目用到的不多。
- element注意点集合
- 表单的item元素如果需要验证的话，需要添加prop属性，不然验证无效。另外如果是自定义验证的话，验证的方法是写在data函数的前面，因为return就直接返回结果了，需要注意的是因为自定义验证是写在前面，所以data中返回的数据，在验证中都是无法使用的。
- 我们使用element的组件，有的时候可能需要修改一下其中的一些样式，但是我们发现直接给组件赋class是没有用的，这样的话，我们其实可以尝试使用新的css的语法/deep/这样可以将样式穿透到组件内部，使样式生效，当然不是所有的情况都可以，需要根据具体的情况来定。
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
