vue 3 필요 에 따라 제3자 구성 요소 라 이브 러 리 를 불 러 오 는 방법

머리말
Element Plus을 예 로 들 면 필요 에 따라 구성 요소 와 스타일 을 불 러 옵 니 다.
환경.

vue3.0.5

vite2.3.3

Element Plus 설치

yarn add element-plus
# OR
npm install element-plus --save

완전 도입

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

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

Element Plus 의 js 와 css 파일 크기 와 시간 소모 가 매우 크다 는 것 을 알 수 있다.

필요 에 따라 불 러 오기
vite-plugin-importer 플러그 인 설치
설치 하 다.

yarn add vite-plugin-importer
# OR
npm install vite-plugin-importer --save

vite홈 페이지 에플러그 인란 이 있 고 추천 하 는커 뮤 니 티 플러그 인란 을 사용 할 수 있 습 니 다.

그 중에서vite-plugin-importer는babel-plugin-import의 집적 이 고babel-plugin-import필요 에 따라 구성 요소 와 구성 요소 스타일 을 불 러 올 수 있 기 때문에vite-plugin-importer도 할 수 있다.


vite.config.js 설정

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import usePluginImport from 'vite-plugin-importer'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    usePluginImport({
      libraryName: 'element-plus',
      customStyleName: (name) => {
        return `element-plus/lib/theme-chalk/${name}.css`;
      },
    }),
  ],
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js'
    },
  },
})

main.js

import { createApp } from 'vue'
import App from './App.vue'
import { ElButton, ElSelect } from 'element-plus';

const app = createApp(App)
app.component(ElButton.name, ElButton);
app.component(ElSelect.name, ElSelect);
app.mount('#app')

사용vite-plugin-importer필요 에 따라 구성 요소 와 스타일 을 불 러 옵 니 다.
vite-plugin-style-import 설치
설치 하 다.

yarn add vite-plugin-style-import -D
# OR
npm i vite-plugin-style-import -D

Element Plus홈 페이지 에는vite-plugin-style-import필요 에 따라 불 러 오 는 방식 이 제공 된다.

배치 하 다.
vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          ensureStyleFile: true,
          resolveStyle: (name) => {
            return `element-plus/lib/theme-chalk/${name}.css`;
          },
          resolveComponent: (name) => {
            return `element-plus/lib/${name}`;
          },
        },
      ],
    }),
  ],
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js' 
    },
  },
})

main.js

import { createApp } from 'vue'
import App from './App.vue'
import { ElButton, ElSelect } from 'element-plus';

const app = createApp(App)
app.component(ElButton.name, ElButton);
app.component(ElSelect.name, ElSelect);
app.mount('#app')

vite-plugin-style-import필요 에 따라 구성 요소 스타일 만 불 러 오 는 것 을 알 수 있 습 니 다.
총결산

vite-plugin-importer 는 필요 에 따라 구성 요소 와 구성 요소 스타일 을 불 러 올 수 있 습 니 다.

vite-plugin-style-import 는 필요 에 따라 구성 요소 스타일 만 불 러 올 수 있 습 니 다.

제3자 구성 요소 라 이브 러 리 를 한 번 에 불 러 오 는 것 보다 필요 에 따라 불 러 오 는 것 이 좋 습 니 다.

vue 3 가 필요 에 따라 제3자 구성 요소 라 이브 러 리 를 불 러 오 는 방법 에 대한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 3 는 필요 에 따라 구성 요소 라 이브 러 리 내용 을 불 러 옵 니 다.우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 을 바 랍 니 다!