基于 Vite + Vue3 项目中三种引入 Element Plus 方式的对照说明

方式一：手动完整引入（不推荐）

只需要在 main.js 里面引入并配置即可：

import {
    createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入组件和样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

// 注册
app.use(ElementPlus)
app.mount('#app')

这样做的好处是简单方便，但问题也很明显，那就是打出来的包是包含了所有组件源代码和样式代码的，导致 chunk 包的体积很大，而且相应的打包时间也就会很长，显然对于项目优化来说是很不友好的，所以这是最不推荐的引入方式，实际打包后的文件体积如下：