Vue3 및 Element Plus를 사용하여 자동 가져오기를 구현하는 방법

1 서문

1.1 목적

Element Plus는 주문형 소개를 사용하여 패키지 파일의 크기를 크게 줄입니다.

1.2 최종 효과

combompers.d.ts 파일을 자동으로 생성하고 Element Plus를 파일 구성요소

compositens.d.ts 파일을 자동으로 생성하고 해당 파일에 Element Plus API를 도입합니다.

2 준비

Element Plus 설치

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

3 필요에 따라 도입합니다

3.1 플러그인 설치

• 구성 요소는 요청 시 필수 플러그인을 소개합니다: unplugin-auto-import, unplugin-vue-comComponents

• 아이콘은 필요 시 필수 플러그인을 소개합니다: unplugin-auto-import, unplugin-icons

설치만 하면 됩니다 개발환경으로 가세요

$ pnpm i unplugin-auto-import unplugin-vue-components unplugin-icons -D

3.2 vite.config.ts 파일 수정

4 기타

4.1 ELMessage 팝업 스타일이 적용되지 않습니다

컴포넌트 API만 사용하여 발생하는 ElMessage 해당 스타일을 수동으로 가져와야 합니다. 스타일 실패 문제의 경우 동일한 해결 방법을 시도해 볼 수 있습니다

// 示例
import { ElMessage } from 'element-plus'
import 'element-plus/es/components/message/style/css'

4.2 아이콘 사용

-ep-는 vite.config.ts 파일이며 일관성이 있어야 합니다

<!-- 直接使用 -->
<i-ep-menu />

<!-- 嵌套使用 -->
<el-icon><i-ep-menu /></el-icon>

위 내용은 Vue3 및 Element Plus를 사용하여 자동 가져오기를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!