Shulou(Shulou.com)06/01 Report--

Editor to share with you what is the use of Vue3 component library Varlet, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

This component library is standardized based on the design of Material Design, during which the author and his partners jointly refer to the finished products of the community as well as api that are of interest to domestic developers. As to why Material was chosen, the author describes it in the official document:

In the early mobile devices, large color blocks and strong contrast colors have high requirements for display devices, while nonlinear animation and water ripples have certain requirements for GPU. As a result, the Material style does not have a good experience in the mobile browser environment, and more choose a more flat and simple style to put into the product. However, with the gradual improvement of the efficiency of modern devices and the new js framework runtime processing, browsers have more free time and ability to deal with animation effects, Material Design will bring a better experience to applications.

After many times of deliberation, the component library has a faint prototype. From then on, Varlet is also officially open source, and uses the MIT open source license.

In the following days, Varlet was not only recommended by teacher Ruan Yifeng, but also recognized by the foreign open source technology community, in which the Antfu god of the Vite core team also accepted the PR of this component library. Not long ago, at Vue3's 2021 summary sharing meeting, Youyuxi God also recommended Varlet. Some time ago, the open source varlet-ui project on Gitee was evaluated and recommended by Gitee. Project address: https://gitee.com/varlet/varlet-ui

So what kind of charm does Varlet have, attracting so many gods and high-quality platforms to promote it?

In terms of characteristics

Provide 50 high-quality general components

The components are very lightweight.

Developed by Chinese, perfect Chinese and English documents and logistics support

Support for on-demand introduction

Support theme customization

Support internationalization

Support webstorm,vscode component property highlighting

Support for SSR

Support for Typescript

Ensure more than 90% unit test coverage and provide stability guarantee

Support for dark mode

How to install and deploy

CDN

Varlet.js contains all the styles and logic of the component library, so you just need to introduce it.

Const app = Vue.createApp ({template: 'button'}) app.use (Varlet) .mount ('# app')

Webpack/Vite

# how can I install # npmnpm I @ varlet/ui-S# yarnyarn add @ varlet/ui# pnpmpnpm add @ varlet/uiimport App from'. / App.vue'import Varlet from'@ varlet/ui'import {createApp} from 'vue'import' @ varlet/ui/es/style.js'createApp (App) .use (Varlet) .mount ('# app') through npm, yarn or pnpm?

Manual introduction

Each component is a Vue plug-in and consists of component logic and style files, which are introduced manually as follows.

Import {createApp} from 'vue'import {Button} from' @ varlet/ui'import'@ varlet/ui/es/button/style/index.js'createApp () .use (Button)

Automatic introduction

All components in the template are automatically scanned by the unplugin-vue-components plug-in, which automatically introduces the component logic and style files and registers the components.

# install the plug-in # npmnpm I unplugin-vue-components-D# yarnyarn add unplugin-vue-components-D# pnpmpnpm add unplugin-vue-components-D

Vue Cli

/ / vue.config.jsconst Components = require ('unplugin-vue-components/webpack') const {VarletUIResolver} = require (' unplugin-vue-components/resolvers') module.exports = {configureWebpack: {plugins: [Components ({resolvers: [VarletUIResolver ()})]}}

Vite

/ / vite.config.jsimport vue from'@ vitejs/plugin-vue'import components from 'unplugin-vue-components/vite'import {VarletUIResolver} from' unplugin-vue-components/resolvers'import {defineConfig} from 'vite'export default defineConfig ({plugins: [vue (), components ({resolvers: [VarletUIResolver ()]})]}) Note

After the configuration is completed, you can use it as follows

How to switch themes by default button

The project provides the theme of the dark mode, which has the advantage of being more readable in a low light environment.

Switch the theme copy code import dark from'@ varlet/ui/es/themes/dark'import {StyleProvider} from'@ varlet/ui'export default {setup () {let currentTheme const toggleTheme = () = > {currentTheme = currentTheme? Null: dark StyleProvider (currentTheme)} return {toggleTheme}}

Inject the text color and background color variables recommended by the component library to control the overall color

Body {transition: background-color .25s; color: var (--color-text); background-color: var (--color-body);} style display

Edit address online

Go to the following website: https://varlet.gitee.io/varlet-ui/#/zh-CN/quickstart

Click on the top right of the interface:

The above is all the content of the article "what is the use of Varlet in Vue3 component Library". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, 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.