vue3+vite+ts+element plus 的按需引入

根据文档推荐，自动导入

1、安装依赖

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

2、修改配置文件vite.config.ts或者webpack文件

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

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

3、app.vue使用

<template>
  <el-config-provider :size="size" :z-index="zIndex">
    <app />
  </el-config-provider>
</template>

<script>
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'

export default defineComponent({
  components: {
    ElConfigProvider,
  },
  setup() {
    return {
      zIndex: 3000,
      size: 'small',
    }
  },
})
</script>

遇到的问题，

1、在axios封装中使用到Message但是报错 找不到名称“ElMessage”。ts(2304) 

解决方法，在声明文件的global中加入，可参考这个文章具体解决方案及原理

const ElMessage: typeof import("element-plus/es")["ElMessage"]
const ElMessageBox: typeof import("element-plus/es")["ElMessageBox"]