寶藏項目！分享一款開箱即用的Vue3元件庫：Varlet

這篇文章跟大家分享一款開箱即用的Vue3元件庫：Varlet，一起來看看它的功能特性，簡單了解使用方法，希望對大家有幫助！

我相信許多開發者都有過這樣的想法：因為對某個技術堆疊或明星開源專案感興趣，產生了開發拓展方向的新專案的想法與實踐，同時也希冀於這個全新的開源專案也能如同別的優質開源專案一樣受到關注，只是並非每個專案都能登上熱門，獲得高額star 數。

不過，今天介紹的這款開源專案的開發者，就曾在過去一年裡實現了從零到一的華麗逆襲，讓我們一起來瞧瞧這究竟是什麼寶藏計畫。

Varlet 是一個基於 Vue3 開發的 Material 風格行動裝置元件庫，並在今年的 Vue JS Live 上被 Vue 的作者尤雨溪推薦。然而自這個計畫誕生的時間不到一年。 【相關推薦：vuejs影片教學】

從 Varlet 作者的某技術部落格得知，作者是專科畢業、在無錫工作的四川前端開發。去年，因所屬單位打算開發某個與 Vue3 相關的組件庫，機緣巧合下，作者自告奮勇包攬下這個活。然而，公司卻因成本、投資報酬等原因並不打算提供支持，隨後作者搭檔兩位好友決心繼續堅持下去。

這個元件庫是基於Material Design 的設計進行規範的，在此期間作者與合作的小伙伴們共同參考社區成品以及結合國內開發者感興趣的api 。對於為何選擇Material，作者在官方文件中這樣描述：

在早期的行動端設備中，大色塊以及強烈對比色，對顯示設備要求很高，同時非線性動畫和水波紋對GPU 有一定要求。導致 Material 風格並沒有在行動裝置瀏覽器環境下有很好的體驗，更多選擇更扁平樸素的風格投入產品。但隨著現代設備和新的 js 框架運行時處理的效率的逐步提升，瀏覽器有了更多的空閒時間和能力去處理動畫效果，Material Design 將為應用程式帶來更好的體驗。

經歷了多次的反覆推敲之後，元件庫隱約有了個雛形。打這時起， Varlet 也正式開源，並採用 MIT 開源許可證。

之後的日子裡，Varlet 不僅獲得阮一峰老師的推薦，同時也得到了國外開源技術社群的認可，其中Vite 核心團隊的Antfu 大神也接受了這個元件庫的PR。不久前，在 Vue3 的 2021 年度總結分享會上，尤雨溪大神也推薦了 Varlet 。前段時間，在Gitee 上開源的varlet-ui 專案經過評估，也獲得了Gitee的推薦，專案位址：https://gitee.com/varlet/varlet-ui

那麼Varlet 究竟有著怎樣的魅力，吸引這麼多大神與優質平台的推廣呢？

---

從特性上看

• 提供50個高品質通用元件
• 元件十分輕量
• 由國人開發，完善的中英文文件和後勤保障
• 支援按需引入
• #支援主題自訂
• #支援國際化
• 支援webstorm，vscode 元件屬性高亮
• 支援SSR
• 支援Typescript
• 確保90%以上單元測試覆蓋率，提供穩定性保證
• #支援暗黑模式

如何安裝與部署

CDN

varlet.js 包含元件庫的所有樣式和邏輯, 因此只需引入即可。

<div></div>
<script></script>
<script></script>
<script>
  const app = Vue.createApp({
    template: &#39;<var-button>按钮&#39;
  })
  app.use(Varlet).mount(&#39;#app&#39;)
</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>切换主题</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);
}

样式展示

在线编辑地址

前往下列网址：https://varlet.gitee.io/varlet-ui/#/zh-CN/quickstart

点击界面右上方：

  

（学习视频分享：vuejs教程、web前端）

以上是寶藏項目！分享一款開箱即用的Vue3元件庫：Varlet的詳細內容。更多資訊請關注PHP中文網其他相關文章！