ant-design-vue：基础使用

﹏ヽ暗。殇╰゛Y 2024-04-01 09:55 86阅读 0赞

#### **一、环境介绍** ####

vue3+ts+ant-design-vue

#### **二、安装使用** ####

##### **2.1、安装脚手架工具** #####

$ npm install -g @vue/cli
    # OR
    $ yarn global add @vue/cli

##### **2.2、创建一个demo项目** #####

###### 2.2.1、创建项目 ######

> $ vue create antd-demo

![0c452e71157a40428bfad8b214df6d58.png][]

###### 2.2.2、 安装成功： ######

![f8a618ab64104d828ab2d383ab754bb3.png][]

###### 2.2.3、 项目目录及启动项目： ######

![903b85ee799a487c86b67992eab2dc53.png][]

###### 2.2.4、启动成功 ######

![3cd023dec9ea41598e6cc7f422665a0c.png][]

###### 2.2.5、查看最新稳定版vue ######

![71ad10cf8c9e40a5a9898b6aa96becb8.png][]

[版本发布 | Vue.js][_ Vue.js]

由于脚手架安装的项目是3.0版本，这里我们升级到最新稳定版

###### 2.2.6、升级vue版本 ######

> yarn upgrade vue

> yarn add @vue/compiler-sfc -D

![87c81d11188241f8b5e8afb95be32f0d.png][]

![f889ca49072c45bdad681211ef3a2a51.png][]

升级后：

![61a798d1572b4c4f97e9b813cf4327ed.png][]

##### **2.3、安装ant-design-vue** #####

> yarn add ant-design-vue

如果提示网络原有安装失败，cnpm

> cnpm i --save ant-design-vue

##### ![85130b0bef7f40d5931b3cb6051fb937.png][]**`2.4、main.ts`中引入** #####

import { createApp } from 'vue'
    import App from './App.vue'
    import Antd from 'ant-design-vue'
    import 'ant-design-vue/dist/antd.css'
    const app = createApp(App)
    app.use(Antd).mount('#app')

##### **2.5、页面代码使用ant-design-vue** #####

![86b91a731aa840c792640d6f5b9fc8a6.png][]

到这里项目里边就可以使用ant-design-vue了。

在正式项目里边使用步骤一样，安装、引入 即可使用。

使用起来和element-plus大同小异，上手没有难度。

#### 三、相关记录 ####

"ant-design-vue": "^4.0.0"版本后发现，不再需要 import'ant-design-vue/dist/antd.css';

![fcc897474f0341eea9d04d1b9ac3f251.png][]

在src/main.ts中引用去掉即可

#### **四、欢迎交流指正，关注我，一起学习。** ####

#### **五、参考链接** ####

[Element Plus 和 Ant Design Vue 对比测评，哪个更好？\_蒋川\_卡拉云的博客-CSDN博客\_ant design和element][Element Plus _ Ant Design Vue _-CSDN_ant design_element]

[https://www.jianshu.com/p/55deabac9fe3][https_www.jianshu.com_p_55deabac9fe3]

[vue3引入ant-design-vue\_努力努力再努力U的博客-CSDN博客\_vue3 ant-design-vue][vue3_ant-design-vue_U_-CSDN_vue3 ant-design-vue]

[Ant Design Vue][]

[https://www.antdv.com/docs/vue/getting-started-cn][https_www.antdv.com_docs_vue_getting-started-cn]

[0c452e71157a40428bfad8b214df6d58.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/1c69cb3922034c66b714fc5cafed1aac.png
[f8a618ab64104d828ab2d383ab754bb3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a3a0aaf854bf48989e90a4636947c8dd.png
[903b85ee799a487c86b67992eab2dc53.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e5bd53e80df24cb5bd6b4ced4e334006.png
[3cd023dec9ea41598e6cc7f422665a0c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/17d81461e2064209b10b9db5ce39f1a1.png
[71ad10cf8c9e40a5a9898b6aa96becb8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/25addb7e0fdc4c73b3d690b0cda074cd.png
[_ Vue.js]: https://cn.vuejs.org/about/releases.html
[87c81d11188241f8b5e8afb95be32f0d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a913ff6e01b246f3949f29241b03cb05.png
[f889ca49072c45bdad681211ef3a2a51.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/1f2fd9cf733d4ea7adb1361bc698c4f1.png
[61a798d1572b4c4f97e9b813cf4327ed.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9243c042a02c4d82a77a502bbebf7195.png
[85130b0bef7f40d5931b3cb6051fb937.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d6b00524e4294246b1c71bcedf81e055.png
[86b91a731aa840c792640d6f5b9fc8a6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ba6f55fe6e1b47f6808757ae444914ee.png
[fcc897474f0341eea9d04d1b9ac3f251.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ed415ea5a2e7473f826094346faf76de.png
[Element Plus _ Ant Design Vue _-CSDN_ant design_element]: https://blog.csdn.net/weixin_48201324/article/details/124011571
[https_www.jianshu.com_p_55deabac9fe3]: https://www.jianshu.com/p/55deabac9fe3
[vue3_ant-design-vue_U_-CSDN_vue3 ant-design-vue]: https://blog.csdn.net/qq_42980244/article/details/125514671
[Ant Design Vue]: https://2x.antdv.com/components/overview/
[https_www.antdv.com_docs_vue_getting-started-cn]: https://www.antdv.com/docs/vue/getting-started-cn