脚本宝典收集整理的这篇文章主要介绍了

Vant 1.0 发布:轻量、可靠的移动端 Vue 组件库

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <blockquote><p>Vant 是有赞前端团队维护的移动端 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> 组件库,提供了一整套 UI 基础组件和业务组件。通过 Vant 可以快速搭建出风格统一的页面,提升开发效率。</p></blockquote> <p><span class="img-wrap"><img data-src="/img/bV6iec?w=1392&amp;h=428" src="/img/bV6iec?w=1392&amp;h=428" alt="图片描述" title="图片描述" style="cursor: pointer; display: inline;"></span></p> <h2 id="articleHeader0">一、关于 1.0</h2> <p>距离 Vant <a href="https://juejin.im/post/59cb19d95188257e84671938" rel="nofollow noreferrer" target="_blank">首次发布</a>刚好过去了半年时间,在这半年时间里 Vant 团队广泛吸纳社区的反馈和建议,持续对组件进行打磨、优化,使得 Vant 逐渐成长为一个轻量、可靠的移动端 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> 组件库。</p> <p>在这个时间点上我们决定发布 Vant 的 1.0 正式版,希望未来有更多小伙伴能够参与到 Vant 的开发和使用中来。</p> <p>GitHub 地址:<a href="https://github.com/youzan/vant" rel="nofollow noreferrer" target="_blank">github.com/youzan/vant</a></p> <h2 id="articleHeader1">二、现有组件</h2> <p><span class="img-wrap"><img data-src="/img/remote/1460000013854033?w=2238&amp;h=2198" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <h2 id="articleHeader2">三、开发理念</h2> <h3 id="articleHeader3">轻量化</h3> <p>作为移动端组件库,<code>Vant</code> 一直将轻量化作为核心开发理念。为了平衡日益丰富的功能和轻量化之间的矛盾关系,我们尝试了很多的优化方式,包括支持组件按需加载、公共模块复用、组件编译流程优化等。</p> <p>在应用一系列的优化手段之后,目前 <code>Vant</code> 的组件平均体积仅有 8.8KB,Uglify + Gzip 后约 1KB。作为对比,<code>mint-ui</code> 的组件平均体积为 15.2KB,某些组件库的组件平均体积甚至在 25KB 以上。</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display: inline-table; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent;"><ins id="aswift_4_anchor" style="display: block; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent; overflow: hidden; opacity: 0;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p><code>Vant</code> 之所以能保持如此小的组件体积,主要归功于我们独特的组件编译方式。目前主流的组件编译方式是通过 webpack 搭配 vue-loader 对每个组件进行编译,为每个组件生成一个打包后 JS 文件。这样的做法会产生大量的冗余代码,比如 webpack 内置的模块化代码、vue-loader 内置的 normalize 函数、重复引入的 <a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a> helper 等等,而我们不希望在组件的编译结果中引入这些冗余代码。</p> <p>一开始我们尝试通过使用 rollup 和 rollup-plugin-vue 去解决上述的问题,但很快我们就发现了更为直接的方式,即通过官方提供的 vue-template-compiler 和 <a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a> 对组件进行编译,这样的方式简单纯粹,编译出的代码非常干净,细节在此不做赘述,有兴趣的同学可以看下 Vant 中<a href="https://github.com/youzan/vant/tree/dev/build/bin" rel="nofollow noreferrer" target="_blank">构建部分的源码</a>。</p> <h3 id="articleHeader4">快速迭代</h3> <p>另外一个很重要的理念是快速迭代。有赞前端团队几十个工程师每天都在用的就是现在你看到的 GitHub 上这个版本,我们并没有一个所谓的“内部版”。同时,出于对自己名誉的珍视,我们不是简单地把它开源了事,而是把它当做一款技术产品去维护,不单单自己用的爽,也要让别人好用,因此我们会保持对社区需求的快速响应、对 bug 及时跟进并修复。</p> <p>迄今为止项目 commit 总数超过 1600 次,解决 issue 300 个,合并 Pull Request 400 个,发布 90 次,基本上保持了一周 1 ~ 2 次的发布节奏。这里面包含了很多社区开发者的付出,感谢他们对 <code>Vant</code> 作出的贡献~ 在未来我们也会继续保持这样的开发节奏,为社区输出更好的开源产品。</p> <h3 id="articleHeader5">生态化</h3> <p>除了提供组件以外,我们也在为丰富 <code>Vant</code> 的开发生态做很多尝试,希望能覆盖各个场景下的开发需求,为大家提供便利。下面是我们现有的一些生态或能力:</p> <ul> <li>基于 vue-cli 的脚手架 <code>vue-cli-template-vant</code> </li> <li>支持 <code>nuxt</code> 服务器端渲染</li> <li>支持 <code>Typescript</code> 类型检测</li> <li>支持 <code>i18n</code> 多语言定制</li> <li>支持通过 <code>postcss</code> 插件进行主题定制</li> <li>官方 Demo 仓库 - <a href="https://github.com/youzan/vant-demo" rel="nofollow noreferrer" target="_blank">vant-demo</a> </li> <li>基于相同视觉规范的小程序组件库 - <a href="https://github.com/youzan/zanui-weapp" rel="nofollow noreferrer" target="_blank">zanui-weapp</a> </li> <li>开源社区的移动商城示例项目 - <a href="https://github.com/qianzhaoy/vant--mobile-mall" rel="nofollow noreferrer" target="_blank">vant--mobile-mall</a> </li> </ul> <p>在生态化方面我们还有很多需要补齐的方面,比如提供对 rem 的支持、vscode 代码提示插件等,这些将会是我们 18 年尝试的方向。</p> <h2 id="articleHeader6">四、最后</h2> <p>开源项目的进步离不开社区的贡献,非常感谢过去对 <code>Vant</code> 提出 PR 和意见的所有人,尤其感谢社区 <a href="https://github.com/chuangbo" rel="nofollow noreferrer" target="_blank">@chuangbo</a>、<a href="https://github.com/qianzhaoy" rel="nofollow noreferrer" target="_blank">@qianzhaoyan</a>、<a href="https://github.com/GeoffZhu" rel="nofollow noreferrer" target="_blank">@GeoffZhu</a> 等同学的付出。希望未来能有更多的同学加入到 <code>Vant</code> 的开发中来。如果你对有赞的前端团队感兴趣,也欢迎加入我们一起玩耍~ <br />简历投递邮箱:chenjiahan@youzan.com ^_^</p> <blockquote><p>本文首发于<a href="https://tech.youzan.com/vant-1-release/" rel="nofollow noreferrer" target="_blank">有赞技术博客</a>。</p></blockquote> <p></code></p>

总结

以上是脚本宝典为你收集整理的

Vant 1.0 发布:轻量、可靠的移动端 Vue 组件库

全部内容,希望文章能够帮你解决

Vant 1.0 发布:轻量、可靠的移动端 Vue 组件库

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过