⾃⼰的开源项⽬被尤⾬溪写进演讲稿是⼀种什么体验？
⼤家好，我是零⼀。在去年（2020年）10⽉份左右我开始学习Vue3，并尝试做个⼈项⽬，要知道那时候市⾯上还没有⽐较成熟的Vue3组件库，所以当时我选择⾃⼰封装⼀些常⽤的基于Vue3的组件，后来也因为⼯作搁置了
最近刚跟 耗⼦（本⽂的主⼈公） 聊了聊，发现他也是去年10⽉份左右开始做 Varlet 这个组件库的，幸运的是他坚持下来了，⽽且⽬前为⽌坚持了整整⼀年！现在已经1k+ star  了
他告诉我是兴趣⼀直驱动着他做下去的，然⽽最近也发⽣了⼀件令他激动不已的事情：
他开发的Varlet组件库被尤⼤在 Vue.js Live Conference 2021 上点名表扬
具体发⽣了什么呢？来看看他的描述
起因
周末被朋友叫醒，朋友告诉我: "咱们的开源项⽬被Vue祖师爷尤⾬溪点名了你知道么？"。我揉了揉迷离中的睡眼，这是我做开源⼀年之中听到最多的整蛊....别搞了，同样的玩笑开太多遍就不好笑了......直到我看到了这两张图
移动端UI框架
尤⼤亲⾃介绍
WTF?，Varlet竟然赫然出现在尤⼤的演讲稿上，这是什么梦？这么⾹？随即在朋友的指引下我翻看了录播， 尤⼤表⽰Varlet竟然还"相当可以"，这真是让⼈表⽰受宠若惊。作者认为Varlet肯定是没有资格跟上⾯⼏座⼤⼭放在⼀起的，虽然尤⼤只是提到了寥寥⼏句，但是我们备受⿎舞，可以算是近期最让⼈⼼情愉悦的事情了（因为作者⼀直视尤⾬溪为⾃⼰的技术偶像，虽然这个⼈根本不懂vue，滑稽~）
当天尤⼤分享了近期Vue3⽣态的⼀些相关进程，推荐了⼀些成熟的⼯具，分享了未来的展望。让⼈收获颇丰，由于时间原因尤⼤也不能⾯⾯俱到的讲解所有的⽣态，⼤多是抓重点讲了⼏句。
这次分享在国内国外都分别开展了⼀次，国内的这次⼤会在⼩破站举办的，作为尤⼤的铁粉，我却完全不知情，确实是有点惭愧的。当然肯定是因为作者精⼒都在⼯作和开源上⾯(开始疯狂借⼝....)
根据尤⼤的描述，现在Vue3的⽣态已经很蓬勃了，尤其是在组件库⽅⾯，各种⾼质量的组件库如同⾬后春笋⼀般浮现了出来，这都源⾃于开源世界⼈们近⼀年的共同努⼒。
作为Varlet的作者，我也想主动分享或者可以说是推⼴⼀下我们的东西，希望有兴趣的⼈可以⼀起参与进来。声明⼀下: 纯热爱，不盈利，不属于任何⼀家公司，不对任何利益⽅负责，只对项⽬本⾝负责，并且我们对技术很虔诚。
基本介绍
Varlet Github仓库 ⽀持我们点个star就好
中⽂⽂档
王菀之学会
英⽂⽂档
UI组件库`先看`UI
索引栏
Tabs
诚如各位所见，这是⼀个Material风格的移动端UI组件库，基于Vue3开发，什么ts⽀持，国际化，主题定制，按需引⼊，组件库该有的功能基本都有，就不赘述了，看点稍微有意思的。
Vscode插件⽂档查阅⼩助⼿
当你在vscode插件市场搜索varlet-vscode-extension时，你会得到这个插件，安装它
vscode 插件
单翅的天使
在你不知道组件的api的时候，把⿏标放到组件上......
api提⽰
点击查看⽂档，弹出⼀个默认浏览器......
跳转到官⽹
⾃动跳转到对应章节，复制，粘贴，⼀⽓呵成，⼀切都那么的⾃然，我觉得很实际。
组件⾃动引⼊
unplugin-vue-components是Vite核⼼团队Vue Use的作者antfu⼤神开发的⼀款跨webpack，vite，rollup的插件
它可以扫描你在模板中使⽤到的组件，并⾃动帮你按需加载，并且可以读取你组件的类型信息提供给volar做模板类型推断，很好很强
满汉全席主题曲
⼤。Varlet和这个插件也有代码层⾯的合作，unplugin-vue-components第⼀⽅⽀持Varlet，只需要如下简单配置，从此就不关⼼组件引⼊的问题了
Vue Cli
// fig.js
const Components = require('unplugin-vue-components/webpack')
终极一家开头曲
const { VarletUIResolver } = require('unplugin-vue-components/resolvers')
configureWebpack: {
plugins: [
Components({
睡吧睡吧我亲爱的宝贝resolvers: [VarletUIResolver()],
dts: true
})
]
}
}
Vite
// fig.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()],
dts: true,
})
]
})
局部范围定制主题
Varlet每个组件都提供了很多的样式变量可供修改，同时也提供了⼀个StyleProvider的组件可以很⽅便的实现局部范围性的主题定制，我喜欢世界五颜六⾊......
回蔚
主题定制
<div class="container">
<var-rate :model-value="5"/>
<var-rate :model-value="5"/>
<var-rate :model-value="5"/>
<var-style-provider :style-vars="{'--rate-primary-color': '#59a379'}">
<var-rate :model-value="5"/>
<var-rate :model-value="5"/>
<var-rate :model-value="5"/>
</var-style-provider>
</div>
复合型组件
我们虽然把主要的精⼒都放在了⼿机端上⾯，但是我们其实对平板或者桌⾯端也做了⼀些投⼊，⽐如我们拥有Table和Pagination组件可以帮助你扩展你的其他平台，尤其是平板可能⼗分需要他们。
甚⾄你可以开启⼀些特定模式去获得更好的⽤户体验，⽐如Pagination就有两种模式可以去适应不同的平台，未来这类的复合型组件会更多
分页组件
Table组件
可以看到我们为不同的平台也做了不同的设计，但是我们不会设计出各式各样繁多的风格给⽤户，以免让⽤户有选择困难。我们会为不同平台寻相对合适的风格。
组件库成型⼯具
可能你想说，你们的这些设计我都不喜欢，我有我⾃⼰的想法......Varlet把开发⼯具全部封装成了⼀个Cli⼯具，⾥⾯包含了构建开源组件库所有的⼯具，不仅限于移动端组件库开发，并且有详细的⽂档说
明，你上你也⾏，说不定下⼀个⿊马就是你！
yarn global add @varlet/cli
varlet-cli gen my-ui