相信很多开发者都有过这样的观点：因为对某个技术栈或者著名的开源项目感兴趣，所以形成了自己对拓展方向开发新项目的看法和做法。 同时，他们也希望这个新的开源项目也能像其他优质开源项目一样受到关注，但并不是每个项目都能走红并获得很高的星星数。
然而，马拉升明天介绍的开源项目的开发者在过去的一年里实现了从零到一的华丽逆袭。 让我们来看看这是什么宝藏项目。
Varlet 是一个基于 Vue3 开发的 Material 风格的联通组件库，在去年的 VueJSLive 上被 Vue 作者尤玉溪推荐。 但距离该项目诞生还不到一年。
从Varlet作者的技术博客了解到，作者是黑龙江后端开发人员，本科毕业开箱css，在上海工作。 今年，因为所在单位准备开发一个与Vue3相关的组件库，机缘巧合，作者自告奋勇地获得了这份工作。 但由于成本、投资回报等原因，该公司并不准备提供支持。 此后，笔者和两位朋友决定继续。
该组件库是基于MaterialDesign设计的标准化组件库。 在此期间，笔者和合作伙伴共同参考了社区的成品，结合了国外开发者感兴趣的API。至于为什么选择Material，笔者在官方文档中是这样描述的：
早期的联通设备中，色块大、色彩对比强烈，对显示设备提出了很高的要求。 同时，非线性动画和水波纹对GPU有一定的要求。 导致Material风格在中国联通的浏览器环境中并没有很好的体验，更多人选择以更加扁平化、简单化的风格投入到产品中。 然而，随着现代设备和新的js框架的运行时处理效率逐渐提高，浏览器有更多的空闲时间和能力来处理动画效果，MaterialDesign将为应用程序带来更好的体验。
经过多次迭代，组件库已经成型。 今后，Varlet也将开源，并采用MIT开源许可证。
在接下来的日子里，Varlet不仅得到了阮一峰老师的推荐，还得到了美国开源技术社区的认可。 其中，Vite核心团队的Antfu专家也接受了该组件库的PR。 不久前，在Vue3的2021年度总结分享会上，尤玉溪大师也推荐了Varlet。 前段时间，Gitee 上开源的 varlet-ui 项目得到了 Gitee 的评测和推荐。 项目地址为：gitee.com/varlet/varl...
那么Varlet究竟有何魅力，吸引了如此多的专家和优质的平台推广呢？
如何根据特点进行安装部署
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: '按钮'
})
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
VueCli
// 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.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()]
})
]
})
注意
配置完成后即可使用，如下
<var-button>默认按钮</var-button>
如何切换主题
该项目提供了深色模式主题开箱css，其优点是在弱光环境下可读性更高。
<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);
}
款式展示
在线编辑地址
到达以下网址：
点击界面右上角：
