빠른 시작
빠른 시작 (Quick Start)
출처: 문서
본문
이 섹션에서는 프로젝트에서 Element Plus를 사용하는 방법을 설명해요.
사용법
전체 import (Full Import)
번들 크기를 그렇게 신경 쓰지 않는다면 전체 import가 더 편리해요.
main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
Volar 지원
Volar를 사용한다면 tsconfig.json의 compilerOptions.types에 전역 컴포넌트 타입 정의를 추가하세요.
tsconfig.json
{
"compilerOptions": {
// ...
"types": ["element-plus/global"]
}
}
온디맨드 import (On-demand Import)
사용할 컴포넌트만 import 하려면 추가 플러그인이 필요해요.
자동 import (Auto import, 권장)
먼저 unplugin-vue-components와 unplugin-auto-import을 설치해야 해요.
$ npm install -D unplugin-vue-components unplugin-auto-import
$ yarn add -D unplugin-vue-components unplugin-auto-import
$ pnpm install -D unplugin-vue-components unplugin-auto-import
그다음 Vite나 Webpack 설정 파일에 아래 코드를 추가해요.
vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = {
// ...
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
}
다른 번들러(Rollup, Vue CLI)와 설정은 unplugin-vue-components와 unplugin-auto-import 문서를 참고하세요.
Nuxt
Nuxt 사용자는 @element-plus/nuxt만 설치하면 돼요.
$ npm install -D @element-plus/nuxt
$ yarn add -D @element-plus/nuxt
$ pnpm install -D @element-plus/nuxt
그다음 설정 파일에 아래 코드를 추가해요.
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@element-plus/nuxt'],
})
TIP pnpm을 사용한다면 주의할 점이 있어요. Element Plus가 내부적으로 사용하는 dayjs 패키지는 JavaScript 모듈이 아니에요. 시작 전에 JavaScript 모듈로 변환되도록 하려면 pnpm이 의존성을 hoist 하도록 설정해야 해요. pnpm 10.5.x 이하에서는 프로젝트 루트의
.npmrc파일에 아래 설정을 추가하세요.
shamefully-hoist=true
node-linker=hoisted
pnpm 10.6.x 이상에서는
pnpm-workspace.yaml에 아래 설정을 추가하세요.
shamefullyHoist: true
nodeLinker: hoisted
또는 프로젝트에 dayjs 의존성을 명시적으로 설치해도 돼요.
pnpm add dayjs
더 많은 설정 옵션은 공식 문서를 참고하세요.
수동 import
Element Plus는 ES Module 기반의 Tree Shaking 기능을 기본 제공해요. 하지만 스타일 import를 위해서는 unplugin-element-plus가 필요하고, 설정 방법은 문서를 참고하세요.
App.vue
<template>
<el-button>I am ElButton</el-button>
</template>
<script setup>
import { ElButton } from 'element-plus'
</script>
vite.config.ts
import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'
export default defineConfig({
// ...
plugins: [ElementPlus()],
})
스타터 템플릿
Vite 템플릿을 제공해요. Nuxt 사용자를 위한 Nuxt 템플릿, Laravel 사용자를 위한 Laravel 템플릿도 있어요.
전역 설정
Element Plus를 등록할 때 size와 zIndex를 가진 전역 설정 객체를 넘길 수 있어요. size는 폼 컴포넌트의 기본 크기를, zIndex는 팝업 컴포넌트의 z-index를 설정하며 zIndex 기본값은 2000이에요.
전체 import:
main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 })
온디맨드:
App.vue
<template>
<el-config-provider :size="size" :z-index="zIndex">
<!-- ... -->
</el-config-provider>
</template>
<script setup lang="ts">
import { ElConfigProvider } from 'element-plus'
const zIndex = 3000
const size = 'small'
</script>
Nuxt.js 사용하기
Nuxt.js도 사용할 수 있어요. 자세한 내용은 Element Plus Nuxt.js 스타터 템플릿을 참고하세요.
시작해 볼까요
이제부터 프로젝트를 부트스트랩하면 돼요. 각 컴포넌트의 사용법은 개별 컴포넌트 문서를 참고하세요.