vue中使⽤antdesign ⼀、在vue中如何引⼊ant design
（1）完整引⼊
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>
（2）导⼊部分组件
在main.js中导⼊并注册需要在项⽬中使⽤的组件
import { Button } from"ant-design-vue";
import 'ant-design-vue/lib/button/style/css'
Vueponent(Button.name, Button)
在项⽬中可以直接使⽤这个已经注册的组件
<template>
<div>
<a-button type="primary">hello world</a-button>
</div>
</template>
<script>
export default {}
</script>
（3）按需加载
ant-design-vue使⽤babel-plugin-import进⾏按需加载
安abel-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"
}
]
]
antdesignvue 表格合计
在需要使⽤相关组件的页⾯引⼊并注册即可按需加载<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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。