보물 아이템! 즉시 사용 가능한 Vue3 구성 요소 라이브러리 공유: Varlet

이 기사에서는 즉시 사용 가능한 Vue3 구성 요소 라이브러리인 Varlet을 공유합니다. 기능적 특징을 살펴보고 사용 방법을 간략하게 이해해 보겠습니다. 모두에게 도움이 되기를 바랍니다.

저는 많은 개발자들이 이런 생각을 갖고 있다고 믿습니다. 그들은 특정 기술 스택이나 스타 오픈 소스 프로젝트에 관심이 있기 때문에 확장 방향으로 새로운 프로젝트를 개발하려는 아이디어와 실천도 가지고 있습니다. 이 새로운 오픈 소스 프로젝트도 다른 고품질 오픈 소스 프로젝트와 동일한 관심을 받을 수 있지만 모든 프로젝트가 인기를 얻고 높은 스타 번호를 얻을 수 있는 것은 아닙니다.

그런데 오늘 소개한 오픈소스 프로젝트의 개발자는 지난 1년 동안 화려한 반격 0에서 1로을 달성했습니다. 이것이 어떤 보물 프로젝트인지 살펴보겠습니다.

Varlet은 Vue3을 기반으로 개발된 Material 스타일의 모바일 단말기 컴포넌트 라이브러리로, 올해 Vue JS Live에서 Vue 작가 You Yuxi가 추천한 제품입니다. 그러나 프로젝트가 탄생한 지 1년도 채 되지 않았다. [관련 추천: vuejs 동영상 튜토리얼]

Varlet 작성자의 기술 블로그를 통해 작성자가 단기 대학을 졸업하고 우시에서 일하는 쓰촨성 프론트엔드 개발자라는 사실을 알게 되었습니다. 작년에 제가 속한 부서에서 Vue3 관련 컴포넌트 라이브러리를 개발할 예정이었기 때문에 우연히 저자가 그 일을 맡겠다고 자원했습니다. 그러나 회사는 비용, 투자 수익 및 기타 이유로 지원을 제공할 생각이 없었습니다. 그러다가 저자와 두 친구는 계속하기로 결정했습니다.

이 컴포넌트 라이브러리는 Material Design의 디자인을 기반으로 표준화되었으며, 이 기간 동안 저자와 협력 파트너는 커뮤니티의 완성품을 공동으로 참조하고 국내 개발자가 관심을 갖는 API를 결합했습니다. Material이 선택된 이유에 대해 저자는 공식 문서에서 다음과 같이 설명했습니다.

초기 모바일 장치에서는 큰 색상 블록과 강한 대비 색상이 디스플레이 장치에 대한 요구 사항이 높았지만 비선형 애니메이션 및 물 잔물결에는 특정 요구 사항이 있었습니다. GPU에서. 결과적으로 Material 스타일은 모바일 브라우저 환경에서 좋은 경험을 하지 못하고, 제품에 투자하기 위해 보다 평면적이고 평범한 스타일을 선택하게 됩니다. 그러나 최신 장치와 새로운 js 프레임워크의 런타임 처리 효율성이 점차 향상됨에 따라 브라우저는 더 많은 자유 시간과 애니메이션 효과를 처리할 수 있는 능력을 갖게 되며 머티리얼 디자인은 애플리케이션에 더 나은 경험을 제공할 것입니다.

많은 반복 끝에 구성 요소 라이브러리가 모호하게 형성되었습니다. 이제부터 Varlet도 공식적으로 오픈 소스이며 MIT 오픈 소스 라이선스를 채택합니다.

다음 날 Varlet은 Ruan Yifeng 선생님의 추천을 받았을 뿐만 아니라 해외 오픈 소스 기술 커뮤니티에서도 인정을 받았습니다. 그중 Vite 핵심 팀의 마스터인 Antfu도 이에 대한 홍보를 수락했습니다. 구성 요소 라이브러리. 얼마 전 Vue3의 2021년 연례 요약 공유 회의에서 You Yuxi 마스터도 Varlet을 추천했습니다. 얼마 전 Gitee의 오픈소스 varlet-ui 프로젝트가 Gitee에서 평가 및 추천을 받은 적이 있습니다. 프로젝트 주소는 https://gitee.com/varlet/varlet-ui

그렇다면 Varlet은 어떤 매력을 갖고 있을까요? people 이렇게 많은 훌륭한 사람들과 고품질 플랫폼을 홍보하는 것은 어떻습니까?

---

기능면에서는

• 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-comComponents 플러그인에 의해 자동으로 검색됩니다. 플러그인은 자동으로 구성 요소 논리 및 스타일 파일을 소개하고 구성 요소를 등록합니다.

# 安装插件

# 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!