最舒服的Vite按需引入Element-Plus

全局导入

下载安装element plus后，在入口文件配置一下并挂载，就能畅通无阻的使用了。但问题是这样有很多用不上的组件都被打包进来了，导致包的体积非常大。

按需导入

采用按需导入的方法，其实是用解构的方式，从element的包中解构出来，再挂载到Vue上。这样开发中用到什么组件就打包什么确实很好，减少了包的体积。但是又有一个新的问题，就是每次想要使用新的组件的时候，都要去解构一下，并且挂载。操作起来非常繁琐

有什么办法能够像使用全局引入那样只配置一次，后面要用到什么组件，都会自己按需加载呢？

Vite中的解决方案

需要用到两个插件unplugin-vue-components、unplugin-auto-import这两个插件。
先下载yarn add unplugin-vue-components unplugin-auto-import -D, 然后配置vite.config.js

//vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
const pathSrc = path.resolve(__dirname, 'src')


export default defineConfig({
    plugins: [
        vue(),
        AutoImport(
          imports: ['vue'],
          resolvers:[ElementPlusResolver()],
          dts: path.resolve(pathSrc, 'auto-imports.d.ts')
        ),
        Components({
          resolvers: [ElementPlusResolver()],
          dts: path.resolve(pathSrc, 'components.d.ts')
        }),
    ],
})

完成以上步骤就不需要去配置main.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')

这样只需配置一次，每当使用组件的时候，都会自动导入，完美。

原文地址： https://leviqin.top/topic-detail/64