vue3项目中引用element plus

vue3项目中引用element plus

我们根据官网可知，引入方式多种多样，不同情况引入方式也是略显不同。

本文是在由**@vue/cli 5.0.4**脚手架创建的vue3项目中引用的

首先安装组件依赖包

npm install element-plus@2.1.11 -S

按需导入

cnpm install -D unplugin-vue-components@0 unplugin-auto-import@0

由于是**@vue/cli 5.0.4脚手架创建的项目，所以在vue.config.js配置**

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,
  lintOnSave: false,   //关闭ESlint校验
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
})

然后重新启动项目即可成功