您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

antd适合vue使用吗

2025/9/4 6:17:01发布19次查看
antd适合vue使用,因为ant design有vue版本的,对应的名称为“ant-design-vue”;在vue项目中可以使用“npm i --save ant-design-vue”命令进行安装使用即可。
本文操作环境: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
3、全局引入
(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>
推荐:《vue教程》
以上就是antd适合vue使用吗的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product