antd适合vue使用吗-木庄网络博客

本文摘自PHP中文网，作者藏色散人，侵删。

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）导入部分组件

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者