설치

설치 (Installation)

출처: 문서

본문

브라우저 호환성 2.5.0 ​

Element Plus는 최신 2개 버전을 지원하는 브라우저에서 실행돼요. 정말로 오래된 브라우저를 지원해야 한다면 Babel과 Polyfill을 직접 추가해야 해요. Vue 3가 IE11을 더 이상 지원하지 않기 때문에 Element Plus도 IE를 지원하지 않습니다.

Sass ​

2.8.5 버전부터 Sass의 최소 호환 버전은 1.79.0이에요. 터미널에서 legacy JS API Deprecation Warning이 뜬다면 vite.config.ts에 아래 코드를 설정하면 돼요.

vite.config.ts

import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
  // ...
  css: {
    preprocessorOptions: {
      scss: { api: 'modern-compiler' },
    },
  },
  // ...
})

버전 ​

Element Plus는 현재 빠른 속도로 반복 개발 중이에요. 게다가 dev 브랜치의 모든 커밋과 PR은 pkg.pr.new에 게시되는데, 아직 공개되지 않은 내용을 쓰고 싶다면 이곳을 참고할 수 있어요.

패키지 매니저로 설치 ​

Vite, Webpack 같은 번들러를 활용하려면 패키지 매니저(NPM, Yarn, PNPM)로 Element Plus를 설치하는 걸 권장해요. 마음에 드는 패키지 매니저를 고르면 됩니다.

$ npm install element-plus --save

$ yarn add element-plus

$ pnpm install element-plus

$ deno add element-plus

네트워크 환경이 좋지 않다면 cnpm이나 npmmirror 같은 미러 레지스트리를 쓰는 걸 권장해요.

npm config set registry https://registry.npmmirror.com

브라우저에서 import ​

브라우저 HTML 태그를 통해 Element Plus를 직접 import 하고, 전역 변수 ElementPlus를 사용할 수 있어요. CDN 제공자에 따라 도입 방법이 조금씩 다른데, 여기서는 unpkg와 jsDelivr를 예시로 들어요. 다른 CDN 제공자를 써도 됩니다.

<script src="//unpkg.com/element-plus"></script>
<div id="app"></div>
<script>
  const { createApp, ref } = Vue
  const app = createApp({
    setup() {
      return { count: ref(0) }
    },
  })
  app.use(ElementPlus)
  app.mount('#app')
</script>

<script src="//cdn.jsdelivr.net/npm/element-plus"></script>
<div id="app"></div>
<script>
  const { createApp, ref } = Vue
  const app = createApp({
    setup() {
      return { count: ref(0) }
    },
  })
  app.use(ElementPlus)
  app.mount('#app')
</script>

TIP CDN으로 import 하는 사용자는 링크 주소에 버전을 고정하는 걸 권장해요. 그래야 나중에 Element Plus가 업그레이드되며 생기는 비호환 변경에 영향을 받지 않죠. 버전 고정 방법은 unpkg.com에서 확인할 수 있어요. 네이티브 HTML 파싱 동작의 한계 때문에 단일-닫힘 태그(single-closed tags)는 일부 예외를 일으킬 수 있어요. 그래서 이중-닫힘 태그(double-closed tags)를 사용하세요.

Hello World ​

CDN을 쓰면 Element Plus로 Hello World 페이지를 아주 쉽게 만들 수 있어요. (Online Demo 참고) 패키지 매니저로 설치했고 번들링 도구와 함께 쓰고 싶다면 다음 섹션인 Quick Start를 읽어 보세요.

더 알아보기 (Learn more)