实现自动引入 element-plus +按需引入

自动导入

1. 安装

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

2. 配置：vue.fonfig.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: {
      plugins: [
        AutoImport({
          resolvers: [ElementPlusResolver()],
        }),
        Components({
          resolvers: [ElementPlusResolver()],
        }),
      ],
    }
}

3. 具体应用

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

参考链接

按需引入
1.安装

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

2.运行命令 不用做任何配置，就可以看到终端打印出来打包后各文件大小。

npm run build --report

3.以下配置可查看打包后的文件

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    configureWebpack: {
        plugins: [
            new BundleAnalyzerPlugin()
        ]
    }
}

学习coderwhy的按需引入
1.新建公共引入组件 register-element.ts

import { App } from 'vue'
import 'element-plus/dist/index.css'
import {
  Edit
} from '@element-plus/icons'
const components = [
  Edit
]

export default function (app: App): void {
  for (const component of components) {
    app.component(component.name, component)
  }
}

2. 绑定到实例中 index.ts

import { App } from 'vue'
import registerElement from './register-element'

export function globalRegister(app: App): void {
  app.use(registerElement)
}

3. 绑定到 main.ts

import { globalRegister } from './global'
.....
app.use(globalRegister).mount('#app')
....