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中引入使用，即可
