Vue3按需引入elementui遇到点小问题记录下

https://element-plus.gitee.io/zh-CN/guide/design.html 适用vue3的elementui。

本次项目需要按需引入elementui，挑出来原文的步骤

1、安装element-plus依赖

npm install element-plus --save

2、因为需要按需引入，所以还要安装一些相关的插件

npm install unplugin-vue-components

3、安装完上面两个依赖以后，按照官网要求在webpack里面接着配置

const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

4、问题出在这儿：到这儿官网进入页面直接引入组件进行使用了，按照要求这样做，但是我们把项目重启npm run serve以后发现报错，所以还是有问题，往下看

 5、解决问题：在webpack里面加入module部分配置

  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: 'javascript/auto'
        }
      ]
    },
    plugins: [
      Components({
        resolvers: [ElementPlusResolver()]
      })
    ]
  }

原因：官方文档提供的npm install element-plus --save命令引入安装时会引入最新的版本（在安装时没有指定版本）

6、页面引入样式

创建个element.js，因为按需引入好多个组件，里面封装下。

import { ElButton } from 'element-plus'

const Elplugin = [ElButton]

export default (app) => {
  Elplugin.forEach(plugin => {
    app.use(plugin)
  })
}

main.js里面引入使用下

import installElementPlugin from './lib/Element'
const app = createApp(App)
installElementPlugin(app)