Objet au trésor ! Partagez une bibliothèque de composants Vue3 prête à l'emploi : Varlet

Cet article partagera avec vous une bibliothèque de composants Vue3 prête à l'emploi : Varlet. Jetons un coup d'œil à ses fonctionnalités et comprenons brièvement comment l'utiliser. J'espère qu'il sera utile à tout le monde !

Je crois que de nombreux développeurs ont eu cette idée : parce qu'ils sont intéressés par une certaine pile technologique ou un projet open source star, ils ont l'idée et la pratique de développer de nouveaux projets dans le sens de l'expansion, en même temps. J'espère que ce nouveau projet open source recevra également la même attention que d'autres projets open source de haute qualité, mais tous les projets ne peuvent pas devenir populaires et obtenir un grand nombre d'étoiles.

Cependant, le développeur du projet open source présenté aujourd'hui a réalisé une magnifique contre-attaque de zéro à un au cours de l'année écoulée. Voyons de quel type de projet de trésor il s'agit.

Varlet est un terminal mobile de style Matériel bibliothèque de composants développé sur la base de Vue3 et a été recommandé par l'auteur de Vue You Yuxi lors du Vue JS Live de cette année. Pourtant, cela fait moins d’un an que le projet est né. [Recommandations associées : tutoriel vidéo vuejs]

J'ai appris d'un blog technique de l'auteur de Varlet que l'auteur est un développeur front-end du Sichuan, diplômé d'un collège et travaillant à Wuxi. L'année dernière, parce que mon unité prévoyait de développer une bibliothèque de composants liée à Vue3, par hasard, l'auteur s'est porté volontaire pour reprendre le travail. Cependant, l'entreprise n'avait pas l'intention de fournir un soutien pour des raisons de coût, de retour sur investissement et d'autres raisons. L'auteur et deux amis ont alors décidé de continuer.

Cette bibliothèque de composants est standardisée sur la base de la conception de Material Design. Au cours de cette période, l'auteur et ses partenaires coopérants ont fait référence conjointement aux produits finis de la communauté et ont combiné les API qui intéressent les développeurs nationaux. Quant à la raison pour laquelle Material a été choisi, l'auteur l'a décrit dans le document officiel :

Dans les premiers appareils mobiles, les grands blocs de couleurs et les couleurs fortement contrastées imposaient des exigences élevées au dispositif d'affichage, tandis que l'animation non linéaire et les ondulations d'eau avaient certaines exigences. sur le GPU. En conséquence, le style Material n'a pas une bonne expérience dans l'environnement du navigateur mobile, et des styles plus plats et simples sont choisis pour investir dans les produits. Cependant, à mesure que l'efficacité du traitement d'exécution des appareils modernes et des nouveaux frameworks js s'améliore progressivement, les navigateurs disposent de plus de temps libre et de la capacité de traiter les effets d'animation, et Material Design apportera une meilleure expérience aux applications.

Après de nombreuses itérations, la bibliothèque de composants a pris une forme vague. Désormais, Varlet est également officiellement open source et adopte la licence open source MIT.

Dans les jours suivants, Varlet a été non seulement recommandé par le professeur Ruan Yifeng, mais également reconnu par la communauté technologique open source étrangère. Parmi eux, Antfu, le maître de l'équipe principale de Vite, a également accepté le PR de cela. bibliothèque de composants. Il n'y a pas si longtemps, lors de la réunion annuelle de partage de synthèse de Vue3 2021, Maître You Yuxi a également recommandé Varlet. Il y a quelque temps, le projet open source varlet-ui sur Gitee a été évalué et recommandé par Gitee. L'adresse du projet est : https://gitee.com/varlet/varlet-ui

Alors, quel genre de charme Varlet a-t-il qui attire. qu’en est-il de la promotion d’autant de personnes formidables et de plateformes de haute qualité ?

---

En termes de fonctionnalités

• Fournit 50 composants communs de haute qualité
• Les composants sont très légers
• Développé par des chinois, documentation complète en chinois et en anglais et support logistique
• Prend en charge l'introduction à la demande
• Prend en charge la personnalisation du thème
• Prise en charge de l'internationalisation
• Prise en charge de Webstorm, mise en évidence des attributs des composants vscode
• Prise en charge de SSR
• Prise en charge de Typescript
• Assurer une couverture de tests unitaires de plus de 90 %, fournir une garantie de stabilité
• Prise en charge du mode sombre

Comment installer et déployer

CDN

varlet.js contient tous les styles et la logique de la bibliothèque de composants, il suffit donc de l'importer.

<div></div>
<script></script>
<script></script>
<script>
  const app = Vue.createApp({
    template: &#39;<var-button>按钮&#39;
  })
  app.use(Varlet).mount(&#39;#app&#39;)
</script>

Webpack/Vite

# 通过 npm、yarn 或 pnpm 安装

# npm
npm i @varlet/ui -S

# yarn
yarn add @varlet/ui

# pnpm
pnpm add @varlet/ui

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')

Comment le présenter ?

Introduit manuellement

Chaque composant est un plug-in Vue et se compose de fichiers de logique et de style de composants. Il peut être introduit et utilisé manuellement comme suit.

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

createApp().use(Button)

Introduire automatiquement

Tous les composants du modèle seront automatiquement analysés par le plug-in unplugin-vue-components Le plug-in introduira automatiquement la logique des composants et les fichiers de style et enregistrera les composants.

# 安装插件

# npm
npm i unplugin-vue-components -D

# yarn
yarn add unplugin-vue-components -D

# pnpm
pnpm add unplugin-vue-components -D

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()]
      })
    ]
  }
}

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()]
    })
  ]
})

Note

Après avoir terminé la configuration, vous pouvez l'utiliser comme suit

<template>
  <var-button>默认按钮</var-button>
</template>

Comment changer de thème

Ce projet fournit un thème en mode sombre L'avantage de. le mode sombre est qu'il est faible. Meilleure lisibilité dans les environnements clairs.

<var-button>切换主题</var-button>复制代码

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 }
  }
}

Injectez les variables de couleur du texte et de couleur d'arrière-plan recommandées par la bibliothèque de composants pour contrôler la couleur globale

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

样式展示

在线编辑地址

前往下列网址：https://varlet.gitee.io/varlet-ui/#/zh-CN/quickstart

点击界面右上方：

  

（学习视频分享：vuejs教程、web前端）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!