Barang harta karun! Kongsi perpustakaan komponen Vue3 yang luar biasa: Varlet

Artikel ini akan berkongsi dengan anda pustaka komponen Vue3 yang luar biasa: Varlet Mari lihat ciri fungsinya dan fahami secara ringkas cara menggunakannya. Saya harap ia dapat membantu semua orang.

Saya percaya ramai pembangun mempunyai idea ini: kerana mereka berminat dengan timbunan teknologi tertentu atau projek sumber terbuka bintang, mereka mempunyai idea dan amalan untuk membangunkan projek baharu dalam arah pengembangan, dan mereka juga berharap untuk Projek sumber terbuka baharu ini juga boleh menerima perhatian yang sama seperti projek sumber terbuka berkualiti tinggi yang lain, tetapi tidak setiap projek boleh menjadi popular dan memperoleh nombor bintang yang tinggi.

Walau bagaimanapun, pembangun projek sumber terbuka yang diperkenalkan hari ini telah mencapai serangan balas yang hebat daripada sifar kepada satu pada tahun lalu Mari kita lakukannya bersama-sama Lihatlah betapa hebatnya projek ini ialah.

Varlet ialah terminal mudah alih gaya Bahan perpustakaan komponen yang dibangunkan berdasarkan Vue3, dan telah disyorkan oleh pengarang Vue You Yuxi pada Vue JS Live tahun ini. Namun, belum sampai setahun projek itu dilahirkan. [Cadangan berkaitan: tutorial video vuejs]

Saya mendapat tahu daripada blog teknikal pengarang Varlet bahawa pengarangnya ialah pembangun bahagian hadapan Sichuan yang lulus dari kolej rendah dan bekerja di Wuxi. Tahun lepas, kerana unit saya merancang untuk membangunkan perpustakaan komponen yang berkaitan dengan Vue3, secara kebetulan, penulis menawarkan diri untuk mengambil alih tugas tersebut. Bagaimanapun, syarikat itu tidak berhasrat untuk memberikan sokongan kerana kos, pulangan pelaburan dan sebab-sebab lain Kemudian penulis dan dua rakan memutuskan untuk meneruskan.

Perpustakaan komponen ini diseragamkan berdasarkan reka bentuk Reka Bentuk Bahan Dalam tempoh ini, pengarang dan rakan kerjasama bersama-sama merujuk kepada produk siap komuniti dan digabungkan dengan minat. pemaju domestik api. Mengenai sebab Bahan dipilih, pengarang menerangkannya dalam dokumen rasmi:

Dalam peranti mudah alih awal, blok warna besar dan warna kontras yang kuat meletakkan permintaan tinggi pada peranti paparan, manakala animasi bukan linear dan riak air mempunyai keperluan tertentu pada GPU. Akibatnya, gaya Material tidak mempunyai pengalaman yang baik dalam persekitaran penyemak imbas mudah alih, dan lebih banyak gaya rata dan biasa dipilih untuk melabur dalam produk. Walau bagaimanapun, apabila kecekapan pemprosesan masa jalan peranti moden dan rangka kerja js baharu bertambah baik secara beransur-ansur, penyemak imbas mempunyai lebih masa lapang dan keupayaan untuk memproses kesan animasi, dan Reka Bentuk Bahan akan membawa pengalaman yang lebih baik kepada aplikasi.

Selepas banyak lelaran, pustaka komponen telah terbentuk secara samar-samar. Mulai sekarang, Varlet juga merupakan sumber terbuka secara rasmi dan mengguna pakai lesen sumber terbuka MIT.

Pada hari-hari berikutnya, Varlet bukan sahaja disyorkan oleh guru Ruan Yifeng, tetapi juga diiktiraf oleh komuniti teknologi sumber terbuka asing, termasuk tuan Antfu bagi pasukan teras Vite . PR untuk perpustakaan komponen ini. Tidak lama dahulu, pada mesyuarat perkongsian ringkasan tahunan Vue3 2021, Master You Yuxi turut mengesyorkan Varlet. Beberapa ketika dahulu, projek varlet-ui sumber terbuka di Gitee telah dinilai dan disyorkan oleh alamat Projek Gitee: https://gitee.com/varlet/varlet-ui

Jadi apa sebenarnya yang ada pada Varlet tentang daya tarikan yang menarik ramai orang hebat dan promosi platform berkualiti tinggi?

---

Dari segi ciri

• Menyediakan 50 komponen biasa berkualiti tinggi
• Komponennya sangat ringan
• Dibangunkan dan disempurnakan oleh Dokumentasi dan sokongan logistik Cina dan Inggeris
• Sokongan pengenalan atas permintaan
• Sokongan penyesuaian tema
• Sokongan pengantarabangsaan
• Sokongan ribut web, penyerlahan atribut komponen vscode
• Sokong SSR
• Skrip Taip Sokongan
• Pastikan lebih daripada 90% liputan ujian unit dan berikan jaminan kestabilan
• Sokong mod gelap

Cara memasang dan menggunakan

CDN

varlet.js mengandungi semua gaya dan logik pustaka komponen, jadi anda hanya perlu mengimportnya.

<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')

Bagaimana untuk memperkenalkannya?

Diperkenalkan secara manual

Setiap komponen ialah pemalam Vue dan terdiri daripada logik komponen dan fail gaya, seperti berikut Diperkenalkan secara manual untuk kegunaan.

import { createApp } from 'vue'
import { Button } from '@varlet/ui'
import '@varlet/ui/es/button/style/index.js'

createApp().use(Button)

Pengenalan automatik

Semua komponen dalam templat akan diimbas secara automatik oleh pemalam unplugin-vue-components dan pemalam akan secara automatik Memperkenalkan logik komponen dan fail gaya serta mendaftarkan komponen.

# 安装插件

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

Nota

Selesai Selepas konfigurasi, anda boleh menggunakannya seperti berikut

<template>
  <var-button>默认按钮</var-button>
</template>

Cara menukar tema

Projek ini menyediakan tema mod gelap Kelebihan mod gelap ialah ia mempunyai kebolehbacaan yang lebih tinggi dalam keadaan rendah. persekitaran yang ringan.

<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 }
  }
}

Suntikan warna teks dan pembolehubah warna latar belakang yang disyorkan oleh pustaka komponen untuk mengawal warna keseluruhan

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前端）

Atas ialah kandungan terperinci Barang harta karun! Kongsi perpustakaan komponen Vue3 yang luar biasa: Varlet. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!