博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
首次踏入vue坑——阅读zhihudaily-vue源码
阅读量:6988 次
发布时间:2019-06-27

本文共 2134 字,大约阅读时间需要 7 分钟。

之前用的技术栈都是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动作,还解决了点透问题。链接:

项目中的各种小图标是使用阿里巴巴的fonticon解决方案()来实现的,只要在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里的图像都通过一个简单的正则表达式,被重定向到了这一网址,该网址的说明为

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的诉求吧。

转载地址:http://ajzvl.baihongyu.com/

你可能感兴趣的文章
VS预定义宏
查看>>
QtTableView
查看>>
*****运维人员如何最大限度避免误删除文件?
查看>>
Android应用开发基础--Adapter
查看>>
条件随机场
查看>>
别人要访问我的电脑上部署的tomcat,必须关闭防火墙吗?
查看>>
位运算的基本操作【转载】
查看>>
关系型数据库设计——E-R图
查看>>
作业六
查看>>
c++ 二叉树打印节点路径
查看>>
BOS中常用方法和类
查看>>
append的问题
查看>>
git &github 快速入门
查看>>
JS中的几种函数
查看>>
ios--编码规范
查看>>
JsCV Core v0.2发布 & Javascript图像处理系列目录
查看>>
bzoj 2784 [JLOI2012]时间流逝——树上高斯消元
查看>>
SQL优化三板斧:精简之道、驱动为王、集合为本
查看>>
MVC中实现部分内容异步加载
查看>>
PTA编程总结2:
查看>>