babel-plugin-import 插件的使用

babel-plugin-import是一款babel插件,在编译过程中将import的写法自动转换成按需引入的方式.

安装

npm i babel-plugin-import -D

在babel.config.js中配置

"plugins": [
    [
        "import",
        {
            "libraryName": "ant-design-vue",
            "libraryDirectory": "es",
            "style": "css"
        }
    ]
]

在模块中按需引入即可使用

import { Button } from 'ant-design-vue';
Vue.use(Button);

或者封装好需要的插件直接全局引入

// index.js
import { Form, Input, Button } from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
const components = [Form, Input, Button]
export function setupAntd(app) {
    components.forEach(component => {
        app.use(component)
    })
}

// main.js
import { setupAntd } from './ant-design-vue'
setupAntd(app)