第一次使用Vue开发小项目的感想与体会复盘

第一次使用Vue

项目地址：https://github.com/Chacha-Bing/medical-resource

---

本身学Vue就没有多长时间，而且一直没有自己动手去实践过所以一直处于纯小白阶段，刚好这次某门课有个课程设计，那我就顺手揽下了前端开发的活并且兴冲冲地就想开始拿vue来实验一番。
由于还有部分细节问题和首屏优化的性能问题，虽然已经上了云但是就先不放网址了。

我负责的

我在本项目中负责 前端开发和UI/UX设计

UI/UX设计

作为一个需要对产品负责的开发者，首先在确定了产品的需求和主题之后，就要对其整体架构和页面有一个大致的规划，这里说的不是代码级别，而是产品上的层次。很多时候，大家往往就是闷着头搞开发，只有到问题实在是不能解决了再来拉出来讨论，这样做是很不对的一件事，如果不事先把准备工作做好，不去把握整体的方向，不去清晰了解每一个页面的逻辑（包括内部结构和跳转逻辑），那在开发中是很难一路向前的，这就好比我们写代码之前需要对我们要做什么，我们要如何去做有一个清晰的思考之后再去编程是一个道理。
我们小组没有专门的UI设计同学，那就只能由做前端的我兼任了，UI设计是一项很重要的步骤，通常在to C端产品中是非常看重的，因为这是用户直接所能够看到的界面，在保证界面顺畅简洁的情况下同时要把界面做得称得上“漂亮”不是一件容易的事，这其中涉及到心理学、色彩搭配、排版等一系列知识，虽然我没有系统地去学过设计的课程，但是我课余时间也了解过UI这一块的知识，所以在审美这方面我至少可以做到符合大多数审美的要求，至少让用户不会看到界面就想着离开。
UX设计同样不可或缺，只是这一块对于我们理科生来说接触得更少，但是我仍然坚持认为这也是很重要的一环。用户体验对于我们的网站产品来说是提升用户粘度和留存率的，同时用户在使用我们这个界面和网站时也会感受到更多的惊喜和愉悦度。有时候一个小小的细节也会让整个界面的质感有一个很大的提升。在界面的设计中同样是如此，比如我在界面中添加了很多小细节，在医疗主界面中，类似于搜索框的聚焦失焦动画，左拉框箭头的反转动画，点击小点跳出来的详细页面卡的滑动动画，每个细节都是经过设计和不断尝试的，又或是疫情可视化中的滑动效果，每一次的UX设计都让用户得到更好的体验。

前端开发

本项目采用前后端分离的开发模式，而我负责的是前端开发。因为主要做疫情地图结合医疗点，同时会做一些图表的可视化，所以我选择了echarts+D3来制作图表，然后为了降低前后端耦合性，我需要使用框架，这里选择Vue。
我负责前端项目的整体结构搭建，所有页面的布局和跳转逻辑，里面有部分图表不是我自己做的，所以我还需要把这些整合进界面。我和后端同学商量好需要的数据，然后他提供给我数据接口，这样真正做到了前后端代码的低耦合分离开发。
在前端开发完成以后，我需要对整个前端工程文件打包，并且上传至服务器，消除上云带来的bug，同时我发现其实还有很多要补充的地方，比如首屏优化、兼容问题等，这些现在也正在考虑优化和解决方案。

经验和踩坑复盘

• 1.为了不用每次重新进入前面的路由都重新加载地图和点数（损耗性能），所以使用keep-alive组件包裹router-view，但是根据后面的需求来看，有一个页面除了用户点击进入，还有一个入口在另一个页面的对话框中，这个时候还得通过vue.$router.push（query/params模式）来传参，这时肯定进入后需要刷新页面，至少得根据传进来的参数来响应，所以做keep-alive的时候可以使用exclude属性去掉这个界面，当然这里采用了更好的办法，也就是使用了activated这个钩子函数，在keep-alive的组件中每次重新被激活时都会触发这个钩子，然后里面的逻辑是去检查有没有传递参数进来，如果没有则说明用户是直接进入这个界面，如果有这说明是从另一个入口进入的，而这两套后续的展示逻辑都是不一样的。
• 2.整个页面中多个函数都会用到的变量或数据尽量放在data中，除非是echarts框架+大数据（请允许我把几万个点以上称为大数据哈哈哈），这个你放在data中反而可能影响性能所以需要放在外面，参见我的另一篇博客vue+echarts展示大量点数据的踩坑和思考
• 3.index.html中的<%= BASE_URL %>路径就是public下的路径，同时，在vue-cli3搭建的项目中，由于vue@cli3没有static文件夹，所以自己的静态数据比如图片、json文件啥的都需要放在public文件夹下，里面也可以再建文件夹，到时候用绝对路径来引用；另外，咱就把echarts带ak的脚本放在这个主页面吧。
• 4.在router.js即配置路由的文件中，name这个属性还是有很多地方可以用上的，比如在keep-alive中的include属性和exclude属性需要用到，或者是向vue.$router传入params形式的参数需要用到，这个name的用处就和vue文件中的name属性一样经常被忽略。同时import了vue-router请一定记住Vue.use()。
• 5.所有的异步请求都可以再封装一下，我选择把所有的异步请求都放在一个js文件中，然后其他页面需要异步调用这个请求就只需要用这个文件暴露出来的一个函数即可；这里的异步库使用的是vue官方推荐的axios，采用链式调用，同时把结果封装一层，也就是说需要用data.data才是你想要的数据；另外，既然是异步调用回调函数，请注意this问题，要么保存上级作用域的this，要么使用箭头函数，总有一款让你得心应手。
• 6.百度部分服务接口需跨域，且只支持jsonp跨域，在vue中做jsonp跨域参见写的另一篇博客调用百度地图服务API的跨域问题 Vue+jsonp
• 7.关于组件间的数据传递：父传子props，子传父$emit，父组件改变子组件状态可以从ref中取得实例，不建议在子组件中改变父组件状态。vuex本项目尚未用到就不说了。
• 8.组件复用真香，同时也请提前准备好可能的slot插槽以及你希望可以复用传递的属性比如color等，同时注意slot全替代问题，如果想在插槽位置对其进行某些动作，最好在这个插槽外包裹一层并把动作附加在这个父元素上。
• 9.当你发现你的百度服务出错了，比如提示你ak文件出错Bmap未定义啥的，你应该在认为是调用百度接口达到上限先先check一下是不是自己家里的网断了。事实上百度地图调用是无限次的，除非你使用他们的服务比如路径规划、正负地理编码服务等会有上限，不过免费次数也很多，有些几千次/AK/天也足够你开发用的了。
• 10.跳转路由可以使用router-link，也可以自己写点击事件，总之自己写vue.$route/vue.$router也是很好的体验。
• 11.有时候需要把组件往下拆分，特别是一个组件中有好几个功能相同的小组件，拆分往往能够实现复用，这里不仅仅可以少些代码，而且可以少使用很多关联性变量，使得代码更加优雅。
• 12.利用vue.config.js配置一些alias假名还是很方便的，内置的alias名为@，即src/文件夹，以后写文件夹路径可以直接用alias名，当然在html标签中使用需要在最前面加个‘~’。
• 13.为了满足首屏体验和前端性能优化，可以使用按需加载的手段，参见我的另一篇博客优化加载百度地图中的各种省份的js文件
• 14.在Chrome下开发放在其他浏览器打开肯定会有各种兼容性问题，比如在火狐里面滚动不了（火狐中的滚动应该用DOMMouseScroll，而且判断上下滚动的属性在event下的detail中），比如在旧版edge中会有flex的布局问题，又比如在IE浏览器中根本直接大块地不显示，而且还一个错都不报真是令人绝望，估计也是布局的问题，但是我真的无力去兼容IE了。
• 15.疫情可视化中的数据会实时更新，数据的爬取由python文件完成，实时更新由定时任务命令完成，具体参见写的另一篇博客Linux下计划任务的crontab命令以及无法执行shell脚本的原因
• 16.打包npm run build上云后会有路由问题，需要在router-link和router.js中重新改一下路由，在判断路由的时候也不要用route本身去判断，而是应该用includes去判断这样会更具拓展性。
• 17.上云后，由于是单页面应用+history模式，所以在入口处通过vue-router跳转后，再次刷新会404，这是因为物理服务器的这个位置并不存在真实的文件，这些路由都是前端路由。那该怎么解决这个问题呢？第一，hash模式下不论是在逻辑还是在前端路由上都只存在一个页面，所以hash模式不会有这种情况；第二，根据官网的说法，我们可以配置服务器，使得不管请求前端路由下哪个路径的页面，都返回最初的那个主页index，但是我如果就是想把中途某个页面分享出去该怎么办呢，我就是想被分享者打开一看就是我的页面而不是直接被返回至入口处怎么办呢？这个问题还没有解决，不过有位大佬说的我觉得很在理可以一试：即配置服务器，对于每个前端路由的页面都返回入口处的index文件（注意这里不是重定向），然后在这个index文件中的created函数中来判断路由到了哪个层级，然后根据判断结果去跳转到相应的界面。

---

so本菜鸡的复盘笔记到此结束~

---

几天后

解决了一下第16点和第17点的问题：

16

官网的vue-router的API介绍中有个base属性，这是指应用的基路径。例如，如果整个单页应用服务在/medical-resource/下，然后 base 就应该设为 "/medical-resource/"。然后其余的不用动，该什么路径就什么路径，和medical-resource已经没关系了。

17

当时只是猜测hash模式下可以，毕竟整个页面是不刷新的，而且都是在一个实际的物理文件下所以不存在刷新问题。试了一下确实是可以的哈哈哈。

然后就是解决history模式下的问题，仿照上次的思路，我们先要实现URL重写，我用的是Apache服务器，所以应该是在Apache中使用mod_rewrite模块重写URL，如何配置和使用已经有很多现成的教程，比如这一篇。
官网上关于Apache的配置其实是里面.htaccess文件的内容，你需要把这个文件放在你的目录下，同时要根据你的实际目录更改路径，比如根据我的路径就需要把最后一句RewriteRule . /index.html [L]改为RewriteRule . /medical-resource/index.html [L]
配置好之后也不需要像之前17条中猜想的一样还要在什么created中再判断路由再手动跳转，这些估计vue都自动帮你做好了。

完结撒花~