脚本宝典收集整理的这篇文章主要介绍了首次踏入vue坑——阅读zhihudaily-vue源码，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
之前用的技术栈都是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的诉求吧。
以上是脚本宝典为你收集整理的首次踏入vue坑——阅读zhihudaily-vue源码全部内容，希望文章能够帮你解决首次踏入vue坑——阅读zhihudaily-vue源码所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。