首次踏入vue坑——阅读zhihudaily-vue源码

2024年2月22日 201次阅读 来源: ______solution

之前用的技术栈都是yeoman上找的webpack+react的脚手架，第一次看vue项目的源码。
感觉一个vue文件里包含html模板、对应JS和样式的组合方式，使得组件化更加明显，也降低了平时项目中的小文件数量。
相比于react的JSX，使用在原生标签里插入属性和一些模板表达式来展示数据，显得简洁了许多。
总体感觉，更小巧，更简洁。
还有跟react有显著不同的是，vue中使用原生js很方便，对dom的操作也很方便，所以在很多react很棘手的问题上，vue明显方便了很多。

此项目的移动设备匹配方案使用的是淘宝的flexible方案，根据设备动态在html加入dpr和font-size属性，并且在webpack里自定义vue作为loader，使用如下的配置

postcss: [require('postcss-px2rem')({
  baseDpr: 1,             // base device pixel ratio (default: 2)
  threeVersion: false,    // whether to generate @1x, @2x and @3x version (default: false)
  remVersion: true,       // whether to generate rem version (default: true)
  remUnit: 37.5,            // rem unit value (default: 75)
  remPrecision: 3         // rem precision (default: 6)
})],

其中dpr和rem是flexible相应的概念，可以参考淘宝出的flexible手册进行了解。
进行了上述配置以后，就可以在css里随意写px，然后会自动转换成rem值并进行多设备的匹配工作了。

项目还依赖了fastclick库，其github说明为
FastClick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers. The aim is to make your application feel less laggy and more responsive while avoiding any interference with your current logic.
总体来说就是让应用在移动端的体验更加优化，让点击从300ms左右的click动作变为50~100ms的touchend动作，还解决了点透问题。链接：http://www.cnblogs.com/yexiao…

项目中的各种小图标是使用阿里巴巴的fonticon解决方案（http://www.iconfont.cn/）来实现的，只要在scss里定义一个font family

font-family: 'iconfont';
src: url('//at.alicdn.com/t/font_1467357626_5109937.eot'); /* IE9*/
src: url('//at.alicdn.com/t/font_1467357626_5109937.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('//at.alicdn.com/t/font_1467357626_5109937.woff') format('woff'), /* chrome、firefox */
url('//at.alicdn.com/t/font_1467357626_5109937.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('//at.alicdn.com/t/font_1467357626_5109937.svg#iconfont') format('svg'); /* iOS 4.1- */

载入阿里CDS下的各个字体，就可以使用类似的方式来调用一个个小图标了。

项目首页展示的swiper里的图像都通过一个简单的正则表达式，被重定向到了https://images.weserv.nl/?url=这一网址，该网址的说明为
Images.weserv.nl is an image cache & resize proxy. Our servers resize your image, cache it worldwide, and display it.
不是特别懂这一步的意义在哪。缓存图像？统一大小？

整个通篇看下来是个各组件各自为战的小型webapp，很多功能都缺打磨，组件之间很少看到数据传递，都是自己调用ajax来获取自己所需要的数据并展示出来，通过vue-router构建单页应用，也没有统一的状态管理和单向数据流（类似redux），不过小而美本来就是vue的诉求吧。

    原文作者：______solution
    原文地址: https://segmentfault.com/a/1190000007701482
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞