Element plus in vite представляет самое элегантное использование по запросу

Element Vite

глобальный импорт

После загрузки элемента плюс, настройте и установите в файле ввода, вы можете использовать его Unimeded. Но проблема в том, что есть много компонентов, которые не могут быть упакованы, вызывая размер пакета очень сильно.

Импорт по требованию

Использование метода импорта по требованию фактически представляет собой его деконструкцию из пакета элемента и последующее монтирование в приложении. Таким образом, очень удобно упаковывать любые компоненты, используемые при разработке, что уменьшает размер пакета. Но есть новая проблема, то есть каждый раз, когда вы хотите использовать новый компонент, вы должны его деконструировать и монтировать. Это очень хлопотно в эксплуатации.

Есть ли способ настроить его только один раз, например, с помощью глобального импорта, а затем загрузить любые компоненты, которые будут использоваться позже по запросу?

демонстрация проекта

Требуются два плагинаunplugin-vue-components,unplugin-auto-importэти два плагина.
скачать первымnpm i unplugin-vue-components unplugin-auto-import -D
Затем настройте vite.config.js

//vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
          resolvers: [ElementPlusResolver()],
        }),
        Components({
          resolvers: [ElementPlusResolver()],
        }),
    ],
})

Нужно ли мне снова настраивать main.js?Нет необходимости, после установки element-plus настройте vite.config.js и все готово. Плагины автоматически монтируются для обработки.

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

createApp(App).mount('#app')

Это настраивается только один раз, и каждый раз, когда компонент используется, он будет автоматически импортироваться сам по себе. Идеально достичь цели.

Теперь таким образом настроен и официальный сайт element-plus.См. пример официального сайта:element-plus.git ee.IO/this-cn/expensive…

Обратите внимание: когда вы копируете официальный пример кода, не копируйте код, который он импортирует по запросу. Например импортировать {ElMessage} из 'элемент-плюс'. Поскольку плагин был автоматически импортирован, он перезапишется и стиль не будет отображаться.

Категории