Vue 3와 Element Plus 초기 설정 및 구성 방법

웹 애플리케이션 개발에서 Vue만 사용하는 것은 제한적이며, 원래의 HTML 태그만으로는 시각적 요소를 충분히 다루기 어렵습니다. 이를 해결하기 위해 주로 Vue와 전용 UI 컴포넌트 라이브러리를 결합하여 사용합니다.

Element Plus 소개

Element Plus는 Vue 3 기반의 최신 UI 라이브러리입니다. 이 라이브러리는 로그인 페이지, 레이아웃 컨테이너, 네비게이션 바, 테이블, 대화상자 등 다양한 요소를 제공하며, 복잡한 스타일링과 동작을 쉽게 처리할 수 있도록 돕습니다.

개발 절차

로그인 페이지 구현
전체 레이아웃 설정
부분별 레이아웃 세부 설정

Element Plus 기본 설정

Element Plus 공식 사이트: https://element-plus.gitee.io/zh-CN/

다음은 Element Plus를 프로젝트에 적용하는 몇 가지 방법입니다:

1. CDN 방식

<head>
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <script src="//unpkg.com/vue@3"></script>
    <script src="//unpkg.com/element-plus"></script>
</head>

2. NPM 설치

npm install element-plus --save

Vue 프로젝트 초기화

새로운 Vue 3 프로젝트를 생성합니다.

vue create k8s-platform-fe

Element Plus 추가하기

프로젝트 디렉토리로 이동한 후 Element Plus를 설치하고 main.js 파일에서 전역으로 등록합니다.

cd k8s-platform-fe
npm install element-plus

main.js에 다음 코드를 추가하세요:

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import * as Icons from '@element-plus/icons-vue';

const app = createApp(App);

for (const [iconName, iconComponent] of Object.entries(Icons)) {
    app.component(iconName, iconComponent);
}

app.use(ElementPlus).mount('#app');

Vue Router 설정

Vue Router와 NProgress를 설치하여 라우팅 시스템을 구성합니다.

npm install vue-router
npm install nprogress

Router 설정 예제:

import { createRouter, createWebHistory } from 'vue-router';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

const routes = [
    {
        path: '/test',
        component: () => import('@/views/test/Test.vue'),
        meta: { title: '테스트 페이지' }
    }
];

const router = createRouter({
    history: createWebHistory(),
    routes
});

NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false });

router.beforeEach((to, from, next) => {
    NProgress.start();
    document.title = to.meta.title || '기본 제목';
    next();
});

router.afterEach(() => NProgress.done());

export default router;

main.js에서 Router 적용:

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import router from './router';

const app = createApp(App);
app.use(ElementPlus).use(router).mount('#app');

테스트 페이지 작성

App.vue 파일 수정:

<template>
    <p>Element Plus 컴포넌트 예제:</p>
    <el-button type="primary">클릭 버튼</el-button>
    <router-view />
</template>

<style>
html, body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
}

#nprogress .bar {
    background: #4CAF50 !important;
}
</style>

태그: vue ElementPlus VueRouter

7월 2일 21:11에 게시됨

괴물 클럽