不使用 babel-plugin-component 实现按需引用element-ui
时间: 2023-09-20 15:08:18 浏览: 89
element-ui中按需引入的实现
5星 · 资源好评率100%
要实现按需引用 element-ui,可以通过以下步骤:
1. 安装 babel-plugin-import:
```bash
npm install babel-plugin-import --save-dev
```
2. 在 babel 配置文件中添加插件:
```javascript
// .babelrc 或 babel.config.js
module.exports = {
plugins: [
[
'import',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
]
]
}
```
3. 在需要使用 element-ui 的组件中,直接按需引入:
```javascript
import { Button, DatePicker } from 'element-ui'
export default {
components: {
'el-button': Button,
'el-date-picker': DatePicker
}
}
```
这样就可以实现按需引用 element-ui 了。需要注意的是,按需引用只会引入需要使用的组件代码,减小打包体积,提高页面加载速度。
阅读全文