vue 3.0使用element-plus按需导入方法以及报错解决

目录

• 使用方法
• 安装组件库
• 按需导入
• vue.config.js配置
• 报错解决
• 报错 1：AutoImport is not a function
• 报错2：Components is not a function
• 附： 全局引入
• 总结

npm install element-plus -S

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

const { defineConfig } = require('@vue/cli-service')
const AutoImport = require("unplugin-auto-import/webpack");
const Components = require("unplugin-vue-components/webpack");
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
});

//main.ts
import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router'
import store from './store'

createApp(App).use(router).use(store).use(ElementPlus).mount('#app')