关于vue.js:实现自动引入按需引入elementplus原来如此简单

前言：应用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