[Vue3]Element Plus 적용하기

일할 때 그렇게 쓰고싶었지만 못썼던 vue3을 결국 퇴사하고서 혼자 사용하게 되었다!
UI framework를 사용해서 빨리 프론트엔드를 끝내고 백엔드로 넘어가려고 Element UI를 추가하려고 했다.
vue2 에서 자주 사용했으니까 당연히 vue3에서도 되겠지 했는데 지원이 안됐다.

대신 vue3 버전의 Element UI 같은 Element Plus 라는 라이브러리를 발견했다.
Element Plus 공식 홈페이지
Element Plus github

Element UI 홈페이지 상단에도 vue3은 Element Plus를 사용하라는 문구가 뜨고 있다.

왜 몇 달 동안 발견을 못했던걸까..

1.Element Plus 설치

아무튼 Element Plus를 사용하기 위해 패키지 매니저에 맞는 각각의 설치 명령어를 실행한다.
Element Plus 공식 설치 가이드

# Choose a package manager you like.

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

2. 프로젝트에 적용하기

2-1 Element Plus import

설치를 하고 나면 프로젝트에서 import 해줘야 한다.
Element Plus Quick Start 가이드
main.js에 Element Plus를 import 하는 두 코드를 추가한다.

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

2-2 auto import 설정

그리고 auto import를 위해서는 모듈을 추가로 설치해야 한다.
먼저 unplugin-vue를 설치하고 unplugin-auto-import를 설치한다.

npm install -D unplugin-vue-components unplugin-auto-import

그런 다음 Vite나 Webpack 파일에 설정 코드를 추가해야 한다.
나는 Webpack에 추가해야 해서 vue의 Webpack 설정 파일에 코드를 추가했다.
vue cli 3 부터는 webpack.config.js 파일이 숨겨져 있기 때문에,
@vue/cli-service를 참조하고 있는 vue.config.js에 웹팩 설정을 하면 된다.

// 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()],
    }),
  ],
}

공식 문서의 webpack.config.js 설정 방법이다.
vue.config.js 파일에서 웹팩을 설정하기 위해서는 configWebpack 옵션을 사용해야 한다.
그래서 위의 plugins 부분을 configWebpack의 필드로 넣어준다.

// vue.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 = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  }
})

3. Element Plus 적용

이제 잘 추가가 되었는지 확인을 한다.

<template>
  <div>
    <div>
      <p>
        If Element Plus is successfully added to this project, you'll see an
        <code v-text="'<el-button>'"></code>
        below
      </p>
    </div>
    <el-row class="mb-4" style="display:flex; justify-content:center">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </el-row>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

<style>
#app {
  display: flex;
  justify-content: center;
}

대충 공홈에서 버튼을 복붙해온다.

화면에서 잘 나오는 것을 확인할 수 있다.
이제 뚝딱뚝딱 포폴을 만들어야겠다!