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

可爱的橙子大爷

已于 2022-02-22 10:46:18 修改

阅读量920

点赞数

分类专栏：小吴的vue学习之路文章标签： vue.js webpack javascript

于 2022-02-22 10:41:20 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42337801/article/details/123062607

版权

小吴的vue学习之路专栏收录该内容

21 篇文章

订阅专栏

自动导入

安装

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

配置：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()],
        }),
      ],
    }
}

具体应用

<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)
  }
}

绑定到实例中 index.ts

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

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

绑定到 main.ts

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