Vue3x+ElementPlus的按需引入

在vue.config.js中

  configureWebpack: {
        plugins: [
            AutoImport({
              resolvers: [ElementPlusResolver()],
            }),
            Components({
              resolvers: [ElementPlusResolver()],
            })]
         }

然后在main.js中

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import { ElButton } from "element-plus";
createApp(App)
  .use(store)
  .use(router)
  .component(ElButton.name, ElButton)
  .use(ElementPlus)
  .mount("#app");

也可以在组件中单独引入

<template>
  <div id="app">
    <el-button type="primary">按钮</el-button>
  </div>
</template>
<script>
  import { ElButton } from 'element-plus'
  export default {
    components: { ElButton },
  }
</script>

目的是减少无效资源的加载和打包