html使用antd vue,antd适合vue使用吗

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

d65e388bbcbd0112a0e17d57e6dcb5a0.png

本文操作环境:windows7系统、vue2.0版本、Dell G3电脑。

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.png

f24d089a023ed810ec3e0f77ed844801.png

3、全局引入

(1)完整引入

main.js中全局引入并注册import Antd from 'ant-design-vue'

import 'ant-design-vue/dist/antd.css'

Vue.use(Antd)

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

hello world

export default {}

(2)导入部分组件

在main.js中导入并注册需要在项目中使用的组件import { Button } from "ant-design-vue";

import 'ant-design-vue/lib/button/style/css'

Vue.component(Button.name, Button)

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

hello world

export default {}

推荐:《vue教程》

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值