前言：应用unplugin-vue-components后，能够实现按需引入，而且也不必再应用import引入须要的组件，间接应用<el-button>等组件就能够。

1.装置npm包

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

2.配置

vue.config.js（这里是vuecli配置办法，其余脚手架须要参考文档）

const AutoImport = require('unplugin-auto-import/webpack')const Components = require('unplugin-vue-components/webpack')const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')module.exports = {    configureWebpack: {      plugins: [        AutoImport({          resolvers: [ElementPlusResolver()],        }),        Components({          resolvers: [ElementPlusResolver()],        }),      ],    }}

3.具体应用

app.vue

<template>    <div>        <el-button>按钮</el-button>    </div></template>

4.确认是否按需引入

首先，装置webpack-bundle-analyzer插件，

npm install --save-dev webpack-bundle-analyzer

而后执行以下命令：

npm run build --report

不必做任何配置，就能够看到终端打印进去打包后各文件大小。

如果想看具体的打包后文件的信息，能够在vue.config.js中做如下配置：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports = {    configureWebpack: {        plugins: [            new BundleAnalyzerPlugin()        ]    }}

而后关上地址http://127.0.0.1:8888就能够了。
据我集体测试，残缺引入时，打包后chunk.js文件大小为400k左右。按需引入后，打包后chunk.js文件大小为200k左右。

参考文章：element-plus unplugin-vue-components