初次踏入vue坑——浏览zhihudaily-vue源码

2019年8月31日 187次阅读 来源: ______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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞