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)