Vue3组件库Varlet有什么用

小编给大家分享一下Vue3组件库Varlet有什么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

这个组件库是基于 Material Design 的设计进行规范的，在此期间作者与合作的小伙伴们共同参考社区成品以及结合国内开发者感兴趣的 api 。对于为何选择 Material，作者在官方文档中这样描述：

在早期的移动端设备中，大色块以及强烈对比色，对显示设备要求很高，同时非线性动画和水波纹对 GPU 有一定要求。 导致 Material 风格并没有在移动端浏览器环境下有很好的体验，更多选择更扁平朴素的风格投入产品。 但随着现代设备和新的 js 框架运行时处理的效率的逐步提升，浏览器有了更多的空闲时间和能力去处理动画效果，Material Design 将会给应用带来更好的体验。

经历了多次的反复推敲之后，组件库隐约有了个雏形。打这时起， Varlet 也正式开源，并采用 MIT 开源许可证。

之后的日子里，Varlet 不仅获得阮一峰老师的推荐，同时也得到了国外开源技术社区的认可，其中 Vite 核心团队的 Antfu 大神也接受了这个组件库的 PR。不久前，在 Vue3 的 2021 年度总结分享会上，尤雨溪大神也推荐了 Varlet 。前段时间，在 Gitee 上开源的 varlet-ui 项目经过评估，也获得了Gitee的推荐，项目地址：https://gitee.com/varlet/varlet-ui

那么 Varlet 究竟有着怎样的魅力，吸引着这么多大神与优质平台的推广呢？

从特性上看

• 提供50个高质量通用组件

• 组件十分轻量

• 由国人开发，完善的中英文文档和后勤保障

• 支持按需引入

• 支持主题定制

• 支持国际化

• 支持 webstorm，vscode 组件属性高亮

• 支持 SSR

• 支持 Typescript

• 确保90%以上单元测试覆盖率，提供稳定性保证

• 支持暗黑模式

如何安装与部署

CDN

varlet.js 包含组件库的所有样式和逻辑, 因此只需引入即可。

<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>按钮</var-button>'
  })
  app.use(Varlet).mount('#app')
</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')

如何引入？

手动引入

每一个组件都是一个 Vue 插件，并由组件逻辑和样式文件组成，如下方式进行手动引入使用。

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

createApp().use(Button)

自动引入

所有在模板中的组件，都会被 unplugin-vue-components 插件自动扫描，插件会自动引入组件逻辑和样式文件并注册组件。

# 安装插件

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

注意

完成配置后如下使用即可

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

如何切换主题

该项目提供了暗黑模式的主题，暗黑模式的优势在于在弱光环境下具有更高的可读性。

<var-button block @click="toggleTheme">切换主题</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 }
  }
}

注入组件库推荐的文字颜色和背景颜色变量来控制整体颜色

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

样式展示

在线编辑地址

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

点击界面右上方：

以上是“Vue3组件库Varlet有什么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！