Varlet 是一個基于 Vue3 開發的 Material 風格移動端元件庫，全面擁抱 Vue3 生态，由 varletjs 社群團隊進行維護。
去年底在一個使用cordova.js混合開發的嵌入硬體裝置的安卓App時，由于是裝置售價非常貴，想把界面做得高大上一些，找了很多相關的基于vue3的移動端UI，都感覺不适合。後來發現Varlet這個元件庫，是用Vue3+Typescript開發的，Material 風格設計。在很久前，去了解angular的時候，發現Material Design風格非常漂亮，我個人也非常喜歡，是以看到varlet的示範界面後，就決定使用它了，而且用在移動端也非常優雅。varlet的元件也非常多，平時在手機上能看到的操作界面，大部分都有。當時vue2支援的Material風格的元件庫倒是有幾個，在vue3上支援Material風格的基本上沒有（也許是我沒找到）。可惜官方沒有去支援uniapp和微信小程式之類的，小程式本身性能差坑多，帶不起Material風格動畫，開發過小程式的人都懂。
特性描述
- 提供 60+ 個高品質通用元件，
- 元件十分輕量，
- 由國人開發，完善的中英文文檔和後勤保障，
- 支援按需引入，
- 支援主題定制，示例有黑白兩個主題，
- 支援國際化，
- 支援 webstorm 元件屬性高亮，
- 支援 SSR，
- 支援 Typescript，
- 確定 90% 以上單元測試覆寫率，提供穩定性保證，
- 支援暗黑模式，
- 提供官方的 VSCode 插件
官方生态
官方生态也很完善，也提供了桌面端擴充卡，讓移動端元件庫可以在桌面端運作，Varlet 元件庫線上編輯工具，可以在playground上調試、提bug示例等；同時Varlet 也提供了 VSCode 插件，友善開發提示；支援 webstorm 元件屬性高亮。
元件概覽
暗黑模式
StyleProvider 樣式定制
Button 按鈕
Fab 懸浮動作按鈕
Breadcrumbs 面包屑
Link 連結
Cell 單元格
Icon 圖示
Image 圖檔
Avatar 頭像
Loading 加載
Chip 紙片
Badge 徽标
Ellipsis 文本省略
Paper 紙張
Elevation 海拔效果
Skeleton 骨架屏
Collapse 折疊面闆
Space 間隔
Layout 布局
Sticky 粘性布局
Progress 進度條
List 無限滾動清單
Swipe 輪播
Steps 步驟條
ImagePreview 圖檔預覽
Card 卡片
Result 結果
Divider 分割線
Table 表格
Tabs 頁籤
IndexBar 索引欄
AppBar 導航欄
BottomNavigation 底部導航欄
Ripple 水波指令
Lazy 懶加載
Hover 懸停指令
Snackbar 消息條
ActionSheet 動作面闆
Dialog 對話框
PullRefresh 下拉重新整理
Overlay 遮罩層
Popup 彈出層
Pagination 分頁
Menu 菜單
Tooltip 提示
BackTop 回到頂部
LoadingBar 加載條
Countdown 倒計時
Picker 多列選擇器
DatePicker 日期選擇器
TimePicker 時間選擇器
Form 表單
Input 輸入框
Select 選擇框
Radio 單選框
Checkbox 複選框
Counter 計數器
Switch 開關
Slider 滑塊
Rate 評分
Uploader 檔案上傳
button元件截圖
安裝使用
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'
createApp(App).use(Varlet).mount('#app') CDN方式
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 桌面端相容 -->
<script src="https://cdn.jsdelivr.net/npm/@varlet/touch-emulator/iife.js"></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>