Svelte 프로젝트에 @specialdoom/proi-ui 통합

소개

이 문서에서는 신규 또는 기존 svelte 프로젝트에 통합@specialdoom/proi-ui하기 위한 몇 가지 기술 세부 정보를 제공합니다.

의제

소개

매끄러운 프로젝트를 생성합니다. @specialdoom/proi-ui의 통합

데모

소개

오픈 소스 커뮤니티에서 제공하는 여러 UI 구성 요소 라이브러리를 알고 있습니다. 이 다음@MadeWithSvelte 카테고리를 보면 2페이지가 있습니다 😲. 따라서 프런트엔드 커뮤니티가 UI뿐만 아니라 날씬한 리소스를 개선하고 업데이트하여 기술 스택의 일부로 @svelte을 고려하려고 노력하고 있음을 인정할 수 있습니다.

여기 저는 커뮤니티의 일원으로서 제가 지난 몇 년 동안 개발한 UI 라이브러리와 통합을 발표하고 있습니다. Figma를 사용하여 재설계된 프로세스를 포함하는 세 번째 버전에 대한 매우 간단하고 순진한 라이브러리부터 시작하여 구성 요소 접근 방식을 사용합니다.

전제 조건

자바스크립트, HTML, CSS

날씬한

비주얼 스튜디오 코드

암호

svelte에서 제공하는 다음 명령을 실행하여 새 svelte 프로젝트를 생성해 보겠습니다docs.

npm create vite@latest appname -- --template svelte
cd appname
npm install

이제 우리는 간단한 날렵한 앱을 갖게 되었고 우리는 그것을 위한 몇 가지 놀라운 기능을 개발할 준비가 되었습니다. @specialdoom/proi-ui을 통합하려면 먼저 npm install 명령을 실행하여 프로젝트에 설치해야 합니다.

npm i @specialdoom/proi-ui

통합의 두 번째 단계는 기본 앱 파일에서 변수css를 가져오는 것입니다.

// App.js
import App from './App.svelte'
import './global.css';
import '@specialdoom/proi-ui/variables.css';

const app = new App({
  target: document.getElementById('app')
})

export default app;

또는 글로벌css 파일에 있습니다.

/* global.css */
@import "@specialdoom/proi-ui/variables.css";

현재 모든 것이 준비되어 있으며 다음과 같은 제공된 구성 요소를 사용할 수 있습니다.

// App.svelte
<script>
  import { Button } from '@specialdoom/proi-ui';

  function handleClick() {
    console.log('[Button] click...');
  }
</script>

<Button variant="primary" on:click={handleClick}>
  Click here
</Button>

데모