Believes that many developers have experienced the idea that because of a certain technology or star interested in open source projects, the idea and practice of exploration and development of new development direction, also hope to the new open source projects can also like other high quality open source projects concern, just not every project can on hot, get big star.

However, the developer of this open source project introduced by Ma Jianchang has achieved a magnificent reverse attack from zero to one in the past year. Let’s take a look at what treasure project it is.

Varlet is a library of Material style mobile components based on Vue3 and was featured by Vue JS Live author Yu Xi this year. Yet the project has been around for less than a year.

According to a technology blog written by Varlet, the author is a sichuan front-end developer who graduated from a junior college and works in Wuxi. Last year, I volunteered to develop a vu3-related component library for my company. However, the company was not willing to provide support due to cost, return on investment, etc., and the author and his two friends decided to continue.

This component library is standardized based on Material Design, during which the author and his partners consult the community’s finished products and combine the apis of interest to domestic developers. As for why we choose Material, the author describes it in the official document as follows:

In early mobile devices, large color blocks and strongly contrasting colors have high requirements on display devices, while nonlinear animation and water ripples have certain requirements on Gpus. As a result, the Material style does not have a good experience in the mobile browser environment, and more flat and simple styles are chosen to be put into products. However, with modern devices and the increasing efficiency of runtime processing of new JS frameworks, browsers have more free time and ability to handle animation effects, and Material Design will bring a better experience to applications.

After many iterations, the component library has a vague shape. Since then, Varlet has also been officially open source under 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, among which Antfu, the god of Vite core team, also accepted the PR of this component library. Not long ago, Varlet was also recommended by Yuxi God at Vue3’s 2021 annual summary sharing. Some time ago, the open source Varlet-UI project on Gitee was evaluated and recommended by Gitee. The project address is gitee.com/varlet/varl…

So what is the charm of Varlet that attracts so many great gods and the promotion of high-quality platforms?

In terms of characteristics

  • Provides 50 high quality general purpose components
  • The components are very lightweight
  • Developed by Chinese, perfect English and Chinese documents and logistics support
  • Support on demand import
  • Support theme customization
  • Support internationalization
  • Webstorm support, vscode component property highlighting
  • Support the SSR
  • Support the Typescript
  • Ensure over 90% unit test coverage and provide stability assurance
  • Support for Dark mode

How to install and deploy

CDN

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

<div id="app"></div> <script src="https://cdn.jsdelivr.net/npm/vue@next"></script> <script src="https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js"></script> <script> const app = Vue.createApp({ template: '< var - button > button < / var - button >'}) app. Use (Varlet). The mount (' # app) < / script >Copy the code

Webpack/Vite

# NPM NPM I @varlet/ UI -s # yarn add @varlet/ UI # PNPM PNPM add @varlet/ UICopy the code
import 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')
Copy the code

How to introduce?

Manual to introduce

Each component is a Vue plug-in and consists of component logic and style files that are imported manually as follows.

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

createApp().use(Button)
Copy the code

Automatically is introduced into

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

NPM NPM I unplugin-vue-components -d # yarn yarn add unplugin-vue-components -d # PNPM PNPM add unplugin-vue-components -DCopy the code

Vue Cli

// vue.config.js
const Components = require('unplugin-vue-components/webpack')
const { VarletUIResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  configureWebpack: {
    plugins: [
      Components({
        resolvers: [VarletUIResolver()]
      })
    ]
  }
}
Copy the code

Vite

// vite.config.js
import 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()]
    })
  ]
})
Copy the code

Pay attention to

After the configuration is complete, use it as follows

<template> <var-button> Default button </var-button> </template>Copy the code

How to switch Topics

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

<var-button block @click="toggleTheme"> </var-button>Copy the 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 }
  }
}
Copy the code

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);
}
Copy the code

Style show

Edit address online

IO /varlet-ui/#…

Click on the upper right of the interface: