《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个基于 Vue3 的 Material design 风格移动端组件库——varlet-ui。

Varlet 是一个基于 Vue3 开发的 Material 风格移动端组件库，全面拥抱 Vue3 生态，由社区建立起来的组件库团队进行维护。

特性

• 提供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);
}

基础组件

Button按钮

Loading加载

Badge徽标

展示组件

Skeleton骨架屏

Progress进度条

Steps步骤条

导航组件

Tabs选项卡

IndexBar索引栏

更多组件大家可自行前往阅读，组件地址：

https://varlet.gitee.io/varlet-ui/#/zh-CN/style-provider

—END—

开源协议：MIT

开源地址：https://gitee.com/varlet/varlet-ui