Library varlet Vue3 Material Design 移动桌面组件库

想用 Vue 3 做一个同时兼顾手机和桌面的应用，又希望贴近 Material Design 规范，市面上的方案要么偏桌面、要么偏移动，少有把两者统一得好的。
Varlet 是一套基于 Material Design 2 与 3 的 Vue 3 组件库，由国内团队维护，文档中英双语齐全。它提供 70 多个轻量组件，支持按需引入、主题定制、暗黑模式与 SSR。

项目基本信息

一、项目介绍

varlet（A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.），Vue3 Material Design 移动桌面组件库。它把相关能力封装成开箱即用的形态，让开发者无需从零搭建即可直接落地，下文从优势、场景到安装使用逐一展开。

二、核心优势

• 70+ 轻量组件，同时适配移动端与桌面端
• 同时支持 Material Design 2 与 3 两套设计体系
• 支持按需引入、主题定制、暗黑模式与国际化
• 提供官方 VSCode 插件、Nuxt 模块与 SSR 支持

三、适用场景

• 基于 Vue 3 的跨端（移动+桌面）产品
• 想要 Material 风格、中文文档友好的团队
• 需要快速搭原型又便于后续定制的项目

四、安装教程

通过 npm 安装：

npm i @varlet/ui -S

也可使用 yarn 或 pnpm。在入口文件里引入并挂载：

import App from './App.vue';
import Varlet from '@varlet/ui';
import { createApp } from 'vue';
import '@varlet/ui/es/style';

createApp(App).use(Varlet).mount('#app');

常见报错：Cannot find module '@varlet/ui/es/style'。通常是样式路径随版本微调，按当前版本文档引入即可；也可直接用 CDN 的 UMD 包免去打包配置。

五、使用示例

挂载后即可在组件中使用：

<template>
  <var-button type="primary">按钮</var-button>
  <var-switch v-model="checked" />
</template>

输入：调用 <var-button>、<var-switch> 等标签并绑定数据。
输出：页面渲染出符合 Material 规范的按钮与开关，切换状态由 v-model 双向绑定，无需额外样式。

六、常见问题

问：Varlet 和 Element Plus 怎么选？

答：Element Plus 偏通用后台风格，Varlet 偏 Material 且强在移动端，按设计语言需求选择。

问：支持按需加载吗？

答：支持，配合官方 CLI 或 unplugin 可实现按组件引入，减小包体积。

七、总结

Varlet 是中文文档友好、移动桌面通吃的 Material 风格 Vue 3 组件库，适合想快速落地又便于定制的团队。