element-plus和vue3+vue/cli按需导入-自动导入

说明：

vue-cli创建的项目中如何按需引入element-plus的方法，主要是配置config(vuecli配置的是vue.config.js)

步骤

0.前提条件，你项目得先安装element-plus

npm install element-plus --save

1.官网推荐，安装自动导入插件

• 首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

• 2.然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中，当然vue/cli配置的是vue.config.js
  项目根目录查看是否有vue.config.js，如果没有的话新建一个

// 引入插件
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // configureWebpack为vue.config.js里的webpack配置
  configureWebpack: {
    devServer: {
      port: 8888,
      open: true
    },
    // plugins配置里加下面的代码
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      })
    ]
  }
}

其实只需要按钮官网 webpack.config.js去配置vue.config.js即可，在vue.config.js想配置webpack，只需要在参数configureWebpack做对应的配置即可

• 3.测试页面随便放点el的组件后npm 运行项目

• 4.结果

  
  
  微信截图_20220223092148.png

成功运行，破若费