antd合不合适vue-创新互联

这篇文章主要介绍antd合不合适vue,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

成都创新互联是一家专业提供达茂旗企业网站建设,专注与成都做网站、成都网站制作、H5场景定制、小程序制作等业务。10年已为达茂旗众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

antd适合vue使用,因为ant design有vue版本的,对应的名称为“ant-design-vue”;在vue项目中可以使用“npm i --save ant-design-vue”命令进行安装使用即可。

ant design的vue版本——ant-design-vue介绍

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

官网:

https://www.antdv.com/docs/vue/introduce-cn/

优点:

提炼自企业级中后台产品的交互语言和视觉风格。

开箱即用的高质量 Vue 组件。

共享Ant Design of React设计工具体系。

ant-design-vue的全局引入

1、先用vue的脚手架工具vue-cli创建一个vue项目

2、安装ant-design-vue

使用命令行工具,切换到项目路径下,使用命令【npm i --save ant-design-vue】安装,如下图

1.pngantd合不合适vue

3、全局引入

(1)完整引入

main.js中全局引入并注册

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

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


(2)导入部分组件

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

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

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


以上是“antd合不合适vue”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


网站标题:antd合不合适vue-创新互联
网站链接:http://pwwzsj.com/article/ccgijh.html