Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of the Vue3 component library, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this Vue3 component library. Let's take a look at it.

Refer to the following open source component library, because some designs are of multiple versions and frameworks, only the Vue3 version is discussed here.

Element-plus-Classic of Classics with full support for Vue 3

Tdesign-vue-next-Goose factory high-quality UI components, complete supporting tools, neat design, clear documentation

Arco-design-vue- byte beat UI component library open source, big factory logic, perfect design documents

Ant-design-vue-Ant front-end UI library for enterprise-level middle and background

Naive-ui-Treasure Vue UI Library, Vue UI Nova, starting with Vue 3

Vant-like team open source mobile UI component library, fully supporting Vue 3

Nutui-JD.com produced, mobile-friendly, e-commerce business scenarios

Vuetify-veteran Vue UI, developed based on Google's Material Design style

Varlet-Varlet is a Material-style mobile component library based on Vue3, which fully embraces the Vue3 ecology and is maintained by the component library team established by the community.

Name TypeScriptMonorepo package manager esbuildSVG IconCSS variable element-plustruetruepnpmtruetruetrue scsstdesign-vue-nexttruesubmodule no lock file, npmtruetrue svg & iconfonttrue lessarco-design-vuetruetrueyarnvite default truetruefalse lessant-design-vuetruefalse does not have lock file, npmtruetruetrue lessnaive-uitruefalse does not have lock file, npmtruetrue xicons a brand new mode vanttruetruepnpmtruefalse iconfonttrue lessnutuitruefalse does not have lock file, npmvite default truefalse iconfontfalse scssvuetifytruetrueyarnfalsefalse iconfonttruevarlettruetruepnpmvite default truefalse iconfonttrueTypeScript

Popularity: 100%

This trend has become inevitable, and now there are more and more TS-related interviews.

Rollbar is an exception monitoring platform. Rollbar counted the error types of Top10 in front-end projects in 2018:

Many of the errors here are empty or undefined. If you use TypeScript, you can simply avoid these errors.

Using TypeScript can avoid 80% of related errors, but not anyScript.

In addition, the advantages of TypeScript do not stop there, such as IDE's smart tips, projects are easier to maintain, and so on. If you haven't used TS yet, you'd better start using it now.

Monorepo

Popularity: 55%

More and more projects, including vue, Reac, Babel and so on, are using Monorepo.

Monorepo refers to the project management strategy of putting all the code into one code repository.

Advantages of Monorepos

Dependency management: shared dependencies, where all the code is in one warehouse. Version management is very convenient.

Code reuse: all the code is in a repository, so it is easy to extract business components or tools shared by various projects and reference them within the code through TypeScript.

Consistency: all code in one repository, code quality standards and uniform style will be easier.

Transparency: everyone can see all the code, making it easier to collaborate and contribute across teams.

Shortcomings of Monorepos

Performance: with more and more code, tools such as Git and IDE will get more and more stuck.

Permissions: managing file permissions will be more challenging. The Git directory does not have a built-in rights management system, and there is no way to distinguish which projects are open by some departments and which are closed by some departments.

Learning cost: for newcomers, if the project becomes larger, the learning cost will naturally be higher.

Monorepo is definitely not a silver bullet, and the Monorepo strategy is not perfect, but in some ways it does address some of the project maintenance and development experiences.

If your project has multiple associated repositories, or is still managing multiple repositories using submodule, try Monorepo.

Package Manager

55% use non-npm, the remaining 45% do not see what package management tools to use, the most important thing is that there is no lock file, this is really not understood, as an open source project does not need to rely on the version of it?

Npm v1-v2

The original npm will lead to repeated installation dependencies, such as A relying on C, B and C, in which case C will be installed twice. (install twice, not download twice. Is downloaded to the local cache.)

Because of the tree structure, the node_modules nesting level is too deep (can cause the file path to be too long)

Module instances cannot be shared. For example, React has some internal variables, and the React introduced in two different packages is not the same module instance, so the internal variables cannot be shared, resulting in some unpredictable bug.

Npm v3 / yarn

Starting with npm3 and yarn, both solve the above problem by flattening dependencies.

All dependencies are flattened to the node_modules directory, no longer have deep nesting relationships. In this way, when installing a new package, according to the node require mechanism, you will keep looking for it in the node_modules of your superior. If you find the same version of the package, you will not reinstall it. This solves the problem of repeated installation of a large number of packages, and the dependency level is not too deep.

But at the same time, it also brings new problems.

Ghost dependency-packages that are not written in package.json can be used in projects.

Split dependency-for example, both An and B depend on C, but the version that depends on C is different, one is 1.0.0 and the other is 2.0.0. Depending on where An and B are in package.json, the C used may be version 1.0.0 or version 2.0.0.

Tiling reduction installation does not save time, because of the algorithm, the time is actually increased.

Npm v5 / yarn

This version introduces a lock file to address uncertainties in node_modules installation. This allows you to have a node_modules with the same structure no matter how many times you install it.

However, problems such as the complexity of tiled algorithms and ghost dependence remain unsolved.

Yarn v2 PnP

In the 2.x version of yarn, we focus on the zero installation mode of Plug'n'Play (PnP), which abandons node_modules, which ensures the reliability of dependence and improves the construction speed.

Yarn 2.x gets rid of node_modules, installs and loads modules quickly; all npm modules are stored in a global cache directory to avoid multiple dependencies; sub-dependencies are not promoted in strict mode, and ghost dependencies are avoided.

However, the self-built resolver method to deal with Node require, which is divorced from the existing ecology of Node, is not very compatible.

Pnpm

Pnpm has the advantages of fast installation, saving disk space, good security and so on. It also appears to solve the problems of npm and yarn.

1. Pnpm solves the problems of yarn and npm by combining hard links with symbolic links.

Hard links: hard links can be understood as copies of source files, and pnpm stores hard links to project node_modules files in the global store. Hard links allow different projects to find the same dependency from the global store, greatly saving disk space.

Soft links: soft links can be understood as shortcuts. When referencing dependencies, pnpm uses symbolic links to find the dependent addresses under the corresponding disk directory (.pnpm).

For example, A depends on BMagar A. there is no node_modules under it, but a soft link. The actual file is located in the corresponding A@1.0.0/node_modules/A directory in .pnpm and hard-linked to the global store.

The dependency of B exists in .pnpm / B@1.0.0/node_modules/B.

B, which A depends on, uses a soft link to the above address, that is, B->.. / B@1.0.0/node_modules/B.

Node_modules ├── A-- > .pnpm / A@1.0.0/node_modules/A └── .pnpm ├── Bamboo 1.0.0 │ └── node_modules │ └── B = > / B └── Aids 1.0.0 └── node_modules ├── B-- >.. / B@1.0.0/node _ modules/B └── A = = > / A

-- > for soft links, = "for hard links

The advantage of this nested node_modules structure is that only packages that are actually in the dependency can be accessed, which solves the problem of ghost dependency. In addition, because dependencies are always hard links in the store directory, the same dependencies are always installed only once, and the problem of multiple dependencies has been solved.

2. Of course, pnpm also has some limitations.

Pnpm-lock.yaml and package-lock.json are inconsistent and not compatible.

Some scenarios are incompatible, such as Electron.

The dependencies of different applications are hard-linked to the same file, so you can't modify the dependent file directly, otherwise it will affect other projects. And because of the different installation structure, the original tools such as patch-package can no longer be used.

Although there are still all kinds of problems, on the whole, the shortcomings outweigh the shortcomings.

Other

Ni can be understood as the manager of the package manager. Ni assumes that you use a lock file (and you should), and before it runs, it detects your yarn.lock / pnpm-lock.yaml / package-lock.json to understand the current package manager and runs the appropriate command.

The biggest difference between cnpmcnpm and npm and yarn is that the generated node_modules directory structure is different, which can cause problems in some scenarios. In addition, no lock file is generated. But cnpm keeps the directory structure of node_modules clear, finding a balance between nested mode and flat mode.

Many interviews will ask why pnpm is fast, in addition to the above store guarantee that the global installation will only be once, and there is also a soft connection guarantee not to repeat the installation. In addition, when different versions of the same dependency are installed, only different parts are re-saved.

It is recommended that no matter what package management tool is used, the lock file should be added to upgrade the dependency during the version update. In order to get better security.

Esbuild

Popularity: 89%

Esbuild is a javascript and typescript packaging tool written in go language, which is more than 100 times faster than webpack.

Although the packaging tools are different, including vite, webpack, and Rollup, they all end up using esbuild packaging. Only one vuetify is useless, but vuetify hasn't been officially released yet, and it may be changed later.

In the future, ESM standards will become more and more popular, so the corresponding tool chain will become more and more popular.

Vite is not strictly a packaging tool, but a front-end build tool, and vite actually uses Rollup and esbuild to package.

SVG Icon

Popularity: 55%

About the defects of Icon Font, you can read this Inline SVG vs Icon Fonts article. There are mainly the following aspects:

Browsers treat it as text for anti-aliasing optimization, and sometimes the results are not as sharp as they thought. In particular, different anti-aliasing algorithms for text in different systems may lead to different display effects.

Icon Font as a font, the size and position of Icon display may be affected by CSS attributes such as font-size, line-height, word-spacing, and so on. The CSS style of the container where the Icon is located may have an impact on the location of the Icon, which is very inconvenient to adjust.

There is inconvenience in use. First, loading an Icon Font containing hundreds of icons, but using only a few of them, is a waste of loading time. It is also very inconvenient to make your own Icon Font and integrate icons used in multiple Icon Font into a single Font.

To achieve maximum browser support, you may need to provide at least four different types of font files. Includes TTF, WOFF, EOT, and a font defined using the SVG format.

Network latency causes Icon to load a string first.

The advantages of SVG Icon can be described in the component documentation

Completely offline, there is no need to download font files from CDN, icons do not render boxes due to network problems, and font files do not need to be deployed locally.

SVG has better definition on low-end devices.

Multicolor icons are supported.

The replacement of built-in icons can provide more API without the need for style overrides.

Disadvantages of SVG Icon, such as compatibility. IE: what? )

Of course, overall, Icon Font has less impact on performance. Maybe that's why it's not so popular?

CSS variable

Popularity: 75%

The total is calculated as eight, but I don't understand the naive-ui. It may be corrected later.

Although the author still uses the preprocessing language, they all find a way to convert it to CSS var. In terms of performance, the W3C specification supported by browsers is certainly better.

However, at present, many functions such as functions of preprocessing languages are not well supported natively. Therefore, it is necessary for preprocessing language to exist.

This is the end of the article on "what are the Vue3 component libraries?" Thank you for your reading! I believe you all have a certain understanding of the knowledge of "what is the Vue3 component library". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.