ant-vue-design 常用的组件加载方式

完整引入

• main.js中全局引入并注册

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd)

• 在页面中不再需要引入注册组件，可以直接使用所有的组件

导入部分组件

• 在main.js中导入并注册需要在项目中使用的组件

import { Button } from "ant-design-vue";
import 'ant-design-vue/lib/button/style/css'
Vue.component(Button.name, Button)

• 在项目中可以直接使用这个已经注册的组件

按需加载

ant-design-vue使用babel-plugin-import进行按需加载

• 安装babel-plugin-import插件

npm i babel-plugin-import --save-dev

• 修改.babelrc文件，在plugins节点下，添加下面这个配置项：

"plugins": ["transform-vue-jsx", "transform-runtime",
    [
        "import",
        {
            "libraryName": "ant-design-vue",
            "libraryDirectory": "lib",
            "style": "css"              
        }
    ]
]

• 在需要使用相关组件的页面引入并注册即可按需加载