根据文档推荐,自动导入
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"]