vite2下element-plus的按需加载

在做开发中避免不了使用UI库，做的好的有很多，这里说下element-plus。

安装

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

完整引入

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

按需导入

由于完整引入打包后没有用到的组件及样式都引入了，我们想用到什么导入什么。

首先需要安装 unplugin-vue-components 与 unplugin-auto-import

npm install -D unplugin-vue-components unplugin-auto-import

vite配置

// vite.config.js

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

export default {
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

然后把全局引入去掉就可以了。