element-plus新版本按需引入解决

element-plus

大家都知道在这次element-plus更新版本后，我们通过以前的按需引入的方法已经不可以了，会报错，所以通过查看element-plus库中代码分包，他应该这样引入。

以前的按需加载

element-plus版本号

    "element-plus": "^1.0.2-beta.62",

安装babel-plugin-import -D插件

在bable.config.js中配置如下。

    module.exports = {
      plugins: [
        [
          'import',
          {
            libraryName: 'element-plus',
            customStyleName: (name) => {
              return `element-plus/lib/theme-chalk/${name}.css`
            }
          }
        ]
      ],
      presets: ['@vue/cli-plugin-babel/preset']
    }

然后导入使用

    import 'element-plus/lib/theme-chalk/base.css'
    import { ElButton } from 'element-plus'

我安装的element-plus版本号

    "element-plus": "^1.1.0-beta.24",

babel.config.js配置依旧。但是我们在导入使用的时候，需要这样导入。并且需要引入全局的样式

    import { ElButton, ElAffix } from 'element-plus/lib/components'
    import 'element-plus/dist/index.css'

下面给出完整的按需加载的代码结构

    import { App } from 'vue'
    import { ElButton, ElAffix } from 'element-plus/lib/components'
    import 'element-plus/dist/index.css'

    const elComponents = [ElButton, ElAffix]

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

    // index.ts
    import { App } from 'vue'
    import elementPlusConfig from './element-plus-config'

    export default function registerAppConfig(app: App): void {
      elementPlusConfig(app)
    }

    // 在main.ts中引入使用，即可