お宝アイテム！すぐに使える Vue3 コンポーネント ライブラリを共有します: Varlet

この記事では、すぐに使える Vue3 コンポーネント ライブラリである Varlet を紹介します。その機能的な特徴を見て、その使用方法を簡単に理解しましょう。皆さんのお役に立てれば幸いです。

多くの開発者はこの考えを持ったことがあると思います。彼らは特定のテクノロジー スタックやスター オープン ソース プロジェクトに興味があるため、拡張方向に新しいプロジェクトを開発するという考えと実践を持っています。この新しいオープンソース プロジェクトも、他の高品質のオープンソース プロジェクトと同様の注目を集める可能性がありますが、すべてのプロジェクトが人気を博し、高いスター数を獲得できるわけではありません。

しかし、今日紹介するオープンソース プロジェクトの開発者は、この 1 年で ゼロから 1 への見事な逆襲を達成しました。一緒にやりましょう、これは何という宝のプロジェクトでしょうは。

Varlet は、Vue3 に基づいて開発された マテリアル スタイルのモバイル端末 コンポーネント ライブラリ で、今年の Vue JS Live で Vue 作者である You Yuxi によって推奨されました。しかし、プロジェクトが誕生してからまだ1年も経っていません。 [関連する推奨事項: vuejs ビデオ チュートリアル ]

Varlet の作者の技術ブログで、作者が短大を卒業して四川省のフロントエンド開発者であることを知りました。無錫。昨年、私のユニットで Vue3 関連のコンポーネント ライブラリを開発する予定だったので、偶然にも著者がその仕事を引き受けることになりました。しかし、同社はコストや投資収益率などの理由からサポートを提供するつもりはなく、著者と友人 2 人は継続することにしました。

このコンポーネント ライブラリは、マテリアル デザインの設計に基づいて標準化されています。この期間中、作者と協力パートナーは共同でコミュニティの完成品を参照し、興味のあることを組み合わせました。国内開発者向けAPI。マテリアルが選択された理由について、著者は公式ドキュメントで次のように説明しています。 Water Ripple には GPU に特定の要件があります。その結果、マテリアル スタイルはモバイル ブラウザ環境では適切なエクスペリエンスを持たず、製品への投資にはよりフラットでプレーンなスタイルが選択されます。ただし、最新のデバイスと新しい JS フレームワークのランタイム処理の効率が徐々に向上するにつれて、ブラウザーにはアニメーション効果を処理するための空き時間と能力が増え、マテリアル デザインはアプリケーションに優れたエクスペリエンスをもたらすでしょう。

何度も検討を重ねた結果、コンポーネント ライブラリがなんとなく形になってきました。今後、Varlet も正式にオープンソースとなり、

MIT

オープンソース ライセンスを採用します。

その後数日で、Varlet は教師の Ruan Yifeng によって推奨されただけでなく、Vite コアの Antfu マスターを含む海外のオープンソース テクノロジー コミュニティからも認められました。チーム。このコンポーネント ライブラリの PR。少し前、Vue3 の 2021 年年次概要共有会議で、Master You Yuxi も Varlet を推奨しました。少し前に、Gitee 上のオープンソースであった varlet-ui プロジェクトが Gitee によって評価され、推奨されました。プロジェクトのアドレスは次のとおりです: https://gitee.com/varlet/varlet-ui

だから何だろう多くの優秀な人材を惹きつける魅力と、質の高いプラットフォームプロモーションについてはどうでしょうか？

機能の面で

---

50個の高品質の汎用コンポーネントを提供します

コンポーネントは非常に軽量です
• によって開発され、完成されました中国人 中国語と英語のドキュメントとロジスティック サポート
• サポート オンデマンド導入
• サポート テーマのカスタマイズ
• サポート国際化
• サポート ウェブストーム、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

プラグインとプラグインによって自動的にスキャンされます。 -in は、コンポーネントのロジック ファイルとスタイル ファイルを自動的に導入し、コンポーネントを登録します。

# 安装插件

# 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()]
    })
  ]
})

Note設定が完了したら、次のことができます。

<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 中国語 Web サイトの他の関連記事を参照してください。