• 技术文章 >web前端 >Vue.js

    通过9个Vue3 组件库,看看聊前端的流行趋势!

    青灯夜游青灯夜游2022-05-10 21:18:03转载769
    本篇文章给大家分享9个开源的 Vue3 组件库,通过它们聊聊发现的前端的流行趋势,希望对大家有所帮助!

    参考了如下开源组件库,因为有些设计是多个版本和框架的,这里只讨论 Vue3 版本。(学习视频分享:vue视频教程

    名称TypeScriptMonorepo包管理器esbuildSVG IconCSS 变量
    element-plustruetruepnpmtruetruetrue scss
    tdesign-vue-nexttruesubmodule没有lock文件,npmtruetrue svg & iconfonttrue less
    arco-design-vuetruetrueyarnvite默认 truetruefalse less
    ant-design-vuetruefalse没有lock文件,npmtruetruetrue less
    naive-uitruefalse没有lock文件,npmtruetrue xicons一个全新模式
    vanttruetruepnpmtruefalse iconfonttrue less
    nutuitruefalse没有lock文件,npmvite默认 truefalse iconfontfalse scss
    vuetifytruetrueyarnfalsefalse iconfonttrue
    varlettruetruepnpmvite默认 truefalse iconfonttrue

    TypeScript

    流行度:100%
    这个流行趋势已经成必然了,现在面试也有越来越多的 TS 相关。

    rollbar 是一个异常监控平台,rollbar 于 2018 年统计了前端项目中Top10 的错误类型

    1.png

    这里有很多错误都是空的或未定义的。如果使用 TypeScript 就可以简单的避免这些错误。

    使用 TypeScript 可以避免 80% 的相关错误,当然 anyScript 不行。。

    另外 TypeScript 的优势不止于此,比如 IDE 的智能提示,项目更容易维护等等。如果你还没有用 过 TS,那最好现在开始尝试使用。

    Monorepo

    流行度:55%

    包括 vue、Reac、Babel 等越来越多的项目都开始使用 Monorepo

    2.png

    3.png

    Monorepo,就是指将所有代码放到一个代码仓库中的项目管理策略。

    Monorepos 的优点

    Monorepos 的缺点

    Monorepo 绝对不是银弹,Monorepo 策略也不完美,但某些方面来说确实解决了一些项目的维护和开发体验。

    如果你的项目有多个关联仓库,或者还在用 submodule 方式管理多个仓库,那可以试一试Monorepo

    包管理器

    55% 使用 非npm,剩下 45% 看不出来使用什么包管理工具,最主要的是居然都没有 lock 文件,这个是真没看懂,作为开源项目不需要统一依赖版本的吗?

    npm v1-v2

    npm v3 / yarn

    npm3yarn 开始,都来通过扁平化依赖的方式来解决上面的这个问题。

    所有的依赖都被拍平到node_modules目录下,不再有很深层次的嵌套关系。这样在安装新的包时,根据 node require 机制,会不停往上级的node_modules当中去找,如果找到相同版本的包就不会重新安装,解决了大量包重复安装的问题,而且依赖层级也不会太深。

    但同时,这样也带来了新的问题

    npm v5 / yarn

    该版本引入了一个lock文件,以解决node_modules安装中的不确定因素。 这使得无论你安装多少次,都能有一个一样结构的node_modules

    然而,平铺式的算法的复杂性,幽灵依赖之类的问题还是没有解决。

    yarn v2 PnP

    yarn 的 2.x 版本重点推出了 Plug’n’Play(PnP)零安装模式,放弃了node_modules,更加保证依赖的可靠性,构建速度也得到更大的提升。

    yarn 2.x 摆脱 node_modules,安装、模块速度加载快;所有 npm 模块都会存放在全局的缓存目录下,避免多重依赖;严格模式下子依赖不会提升,也避免了幽灵依赖。

    但是,自建 resolver 处理 Node require 方法,脱离Node现存生态,兼容性不太好。

    pnpm

    pnpm 具有安装速度快、节约磁盘空间、安全性好等优点,它的出现也是为了解决 npmyarn 存在的问题。

    1、pnpm通过硬链接与符号链接结合的方式,来解决 yarnnpm 的问题。

    比如 A 依赖 B,A 下面是没有 node_modules的,而是一个软链接。实际真正的文件位于.pnpm 中对应的 A@1.0.0/node_modules/A目录并硬链接到全局 store 中。

    而 B 的依赖存在于 .pnpm/B@1.0.0/node_modules/B
    而 A 依赖的 B,用软链接链到上面的地址,也就是 B --> ../../B@1.0.0/node_modules/B

    node_modules
    ├── A --> .pnpm/A@1.0.0/node_modules/A
    └── .pnpm
        ├── B@1.0.0
        │    └── node_modules
        │        └── B ==> <store> /B
        └── A@1.0.0
            └── node_modules
                ├── B --> ../../B@1.0.0/node_modules/B
                └── A ==> <store> /A

    --> 代表软链接,==》代表硬链接

    而这种嵌套node_modules结构的好处在于只有真正在依赖项中的包才能访问,很好地解决了幽灵依赖的问题。此外,因为依赖始终都是存在store目录下的硬链接,相同的依赖始终只会被安装一次,多重依赖的问题也得到了解决。

    2、当然 pnpm 也存在一些局限。

    虽然还有种种问题,但总体来说瑕不掩瑜。

    其他

    ni可以理解为包管理器的管理器,ni 假设您使用锁文件(并且您应该),在它运行之前,它会检测你的 yarn.lock / pnpm-lock.yaml / package-lock.json 以了解当前的包管理器,并运行相应的命令。

    cnpmcnpmnpm 以及 yarn 之间最大的区别就在于生成的 node_modules 目录结构不同,这在某些场景下可能会引发一些问题。此外也不会生成 lock 文件。但是 cnpm 保持了 node_modules 的目录结构清晰,可以说是在嵌套模式和扁平模式之间找到了一个平衡。

    很多面试会问 pnpm 为啥快,除了上面的store保证全局只安装一次,还有软连接保证不重复安装之外。还有一个,当安装同一依赖的不同版本时,只有不同的部分会被重新保存。

    建议不管用什么包管理工具,都要加上 lock 文件,在版本更新期间去升级依赖。以便能获得更好的安全性。

    esbuild

    流行度:89%

    esbuild 是一个用 go 语言写的 javascript、typescript 打包工具,速度比 webpack100 倍以上。

    虽然打包工具用的各不相同,有 vitewebpackRollup,但最终都用到了 esbuild 打包。只有一个vuetify没用,不过vuetify还没有正式发布,后面也说不定会换。

    未来 ESM 标准会越来越流行,所以相对应的工具链也会越来越流行。

    vite 严格来说不是打包工具,而是一个前端构建工具,vite 实际使用 Rollup 和 esbuild 打包。

    SVG Icon

    流行度:55%

    关于Icon Font的缺陷,可以看这篇Inline SVG vs Icon Fonts 文章。主要有以下几方面:

    SVG Icon 的优势可以用组件文档的描述

    SVG Icon的劣势,比如兼容性。(IE:啥?)

    当然总体来说,Icon Font 对性能的影响没有那么大。这也可能是没那么流行的原因?

    CSS变量

    流行度:75%

    计算总数按 8 个计,naive-ui 我没看懂。后面可能会修正。

    虽然编写还是使用的预处理语言,但是最后都想办法转成了 CSS var。就性能来说,肯定是浏览器支持的 W3C 规范更好。

    但是目前很多预处理语言的函数之类的功能,原生还不是很好的支持。所以预处理语言还很有存在的必要的。

    好了,这就是本篇文章的全部内容了,感谢大家的观看。

    我是一个努力成长的前端菜狗子。

    原文地址:https://juejin.cn/post/7092766235380678687

    作者:ARRON

    (学习视频分享:web前端开发编程基础视频

    以上就是通过9个Vue3 组件库,看看聊前端的流行趋势!的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:Vue vue3 vue.js
    上一篇:一文了解Vue3中的watchEffect,聊聊其应用场景! 下一篇:聊聊vue指令中的修饰符,常用事件修饰符总结
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• vue中不同情况下怎么进行通讯?方式分享• 聊聊Vue的新型前端构建工具 Vite(初体验)• vue3为什么快?vue3的效率提升主要在哪方面?• 收藏这些vue项目性能优化方式,总有一天能用上!• 5 款适合国内使用的 Vue 移动端 UI 组件库• 一文了解Vue3中的watchEffect,聊聊其应用场景!
    1/1

    PHP中文网