ant-design vue能用么？

ant-design vue能用么？

vue能用ant-design。ant design有vue版本的，对应的名称为ant-design-vue。在vue项目中可以使用 npm i --save ant-design-vue 命令进行安装，然后即可使用了。

ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库，它其实是Ant Design的Vue实现，组件的风格与Ant Design保持同步，组件的html结构和css样式也保持一致。 用下来发现它的确称得上为数不多的完整的VUE组件库与开发方案集成项目。

在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'
Vue.component(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进行按需加载

• 安装babel-plugin-import插件

npm i babel-plugin-i<strong style="color:transparent">来源gaodai#ma#com搞@代~码网</strong>mport --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>

更多前端开发知识，请查阅 搞代码网 ！！

以上就是ant-design vue能用么？的详细内容，更多请关注gaodaima搞代码网其它相关文章！

喜欢 (0)赏

[搞代码]

分享 (0)