설치

환경 요구 사항

Node.js >= 18
pnpm >= 8

설치

bash

# pnpm 사용
pnpm add @lh-ui/vue3

# npm 사용
npm install @lh-ui/vue3

# yarn 사용
yarn add @lh-ui/vue3

컴포넌트 가져오기

전체 가져오기

import { createApp } from 'vue'
import App from './App.vue'
import LhUiPlus from '@lh-ui/vue3'
import '@lh-ui/vue3/dist/index.css'

const app = createApp(App)
app.use(LhUiPlus)
app.mount('#app')

필요한 컴포넌트만 가져오기

패키지 루트 경로에서 명명된 가져오기로 컴포넌트를 가져오고, 해당 컴포넌트의 스타일을 별도로 가져옵니다 (스타일 서브패스는 @lh-ui/vue3/style/<컴포넌트명>입니다):

vue

<script setup lang="ts">
import { LhButton } from '@lh-ui/vue3'
import '@lh-ui/vue3/style/button'
</script>

<template>
  <LhButton type="primary">국풍 버튼</LhButton>
</template>

unplugin-vue-components의 Resolver는 아직 제공하지 않습니다. 자동 필요별 가져오기는 위 방식대로 컴포넌트와 스타일을 수동으로 가져오세요.

필요별 가져오기에는 두 가지 스타일 경로를 선택할 수 있습니다:

서브패스	설명
`@lh-ui/vue3/style/<컴포넌트명>`	SCSS 소스 파일을 가리키며, 사용자 측에서 디자인 변수를 덮어써 깊은 사용자 정의가 가능하지만 프로젝트에 `sass`가 설치되어 있어야 합니다
`@lh-ui/vue3/style-css/<컴포넌트명>`	빌드 시 미리 컴파일된 CSS를 가리키며, 별도 설정 없이 바로 사용할 수 있고 `sass`가 필요 없습니다

// 프로젝트에 sass가 있고 깊은 테마 사용자 정의가 필요한 경우
import '@lh-ui/vue3/style/button'

// 프로젝트에 sass가 없거나 사용자 정의가 필요 없는 경우
import '@lh-ui/vue3/style-css/button'

CDN으로 가져오기

패키지의 UMD 결과물이 공개 CDN에 게시되어 있어, 데모 페이지나 번들링 파이프라인을 거치지 않으려는 경우에 적합합니다:

html

<!-- 컴포넌트 (전역에 window.lhUiPlus로 노출) -->
<script src="https://unpkg.com/@lh-ui/vue3"></script>
<!-- 또는 jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/@lh-ui/vue3"></script>
<!-- 전체 스타일 -->
<link rel="stylesheet" href="https://unpkg.com/@lh-ui/vue3/dist/index.css" />

const app = Vue.createApp({ /* ... */ })
app.use(lhUiPlus)
app.mount('#app')

버전을 고정하려면 패키지 이름 뒤에 @<version>을 붙입니다 (예: https://unpkg.com/@lh-ui/vue3@1.0.0). 프로덕션 환경에서는 버전을 고정하는 것을 권장하여, 새 버전이 게시될 때 CDN 결과물이 의도치 않게 업그레이드되는 것을 방지하세요.

개인 서버에서 설치

사내망이거나 npm 접근이 제한되거나, 또는 직접 호스팅하는 미러에 버전을 고정하고 싶다면 작성자의 개인 서버에서 tarball을 직접 설치할 수 있습니다 (호스팅 세부 사항은 배포 가이드를 참고하세요):

bash

# pnpm
pnpm add https://www.lhgb.top/lhui/vue3/packages/1.0.0/lh-ui-vue3-1.0.0.tgz

# npm
npm install https://www.lhgb.top/lhui/vue3/packages/1.0.0/lh-ui-vue3-1.0.0.tgz

# yarn
yarn add https://www.lhgb.top/lhui/vue3/packages/1.0.0/lh-ui-vue3-1.0.0.tgz

또는 package.json에 작성합니다:

json

{
  "dependencies": {
    "@lh-ui/vue3": "https://www.lhgb.top/lhui/vue3/packages/1.0.0/lh-ui-vue3-1.0.0.tgz"
  }
}

tarball 설치는 registry의 버전 해석을 우회하므로, 업그레이드 시 URL을 수동으로 교체해야 합니다. 이 패키지는 런타임 의존성이 없으며 프로젝트에 Vue 3만 설치되어 있으면 됩니다.
일반 패키지처럼 pnpm add @lhgb/vue3로 설치하여 버전 해석을 거치고 싶다면 개인 registry 메타데이터 방식으로 설치할 수 있습니다.

설치 ​

환경 요구 사항 ​

설치 ​

컴포넌트 가져오기 ​

전체 가져오기 ​

필요한 컴포넌트만 가져오기 ​

CDN으로 가져오기 ​

개인 서버에서 설치 ​

설치