ant-design-vue组件的三种加载方式

原创
2018/08/16 12:19
阅读数 13W

完整引入

  • main.js中全局引入并注册
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd)
  • 在页面中不再需要引入注册组件,可以直接使用所有的组件
<template>
  <div>
    <a-button type="primary">hello world</a-button>
  </div>
</template>

<script>
export default {}
</script>

导入部分组件

  • main.js中导入并注册需要在项目中使用的组件
import { Button } from "ant-design-vue";
import 'ant-design-vue/lib/button/style/css'
Vue.component(Button.name, Button)
  • 在项目中可以直接使用这个已经注册的组件
<template>
    <div>
        <a-button type="primary">hello world</a-button>
    </div>
</template>

<script>
export default {}
</script>

按需加载

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"              
        }
    ]
]
  • 在需要使用相关组件的页面引入并注册即可按需加载
<template>
  <div>
    <a-button type="primary">hello world</a-button>
  </div>
</template>

<script>
import { Button } from 'ant-design-vue';

export default {
    components:{ AButton:Button },
}
</script>
展开阅读全文
打赏
0
5 收藏
分享
加载中
Error: Cannot find module 'babel-plugin-transform-vue-jsx'
2020/06/12 09:59
回复
举报
更多评论
打赏
1 评论
5 收藏
0
分享
返回顶部
顶部