nuxt3 element-plus组件按需加载

1.安装依赖

npm install element-plus --save
npm install unplugin-element-plus -D

2.nuxt.config.js中添加

import ElementPlus from 'unplugin-element-plus/vite'
export default defineNuxtConfig({
    css: ['element-plus/dist/index.css'],
    build: {
        transpile: ['element-plus/es'],
    },
    vite: {
        plugins: [
            ElementPlus()
        ],
    }
})

3.plugin文件夹下添加element-plus.client.ts。注意：ssr下需要配置一个provide

import { ID_INJECTION_KEY } from 'element-plus';
export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.provide(ID_INJECTION_KEY, {
        prefix: Math.floor(Math.random() * 10000),
        current: 0,
    })
})

4.页面上按需引入

import { ElButton } from "element-plus";