Ant Design Vue 安装 学习笔记

一、下载案例

1. ant-design-pro-vue 案例下载
   https://gitee.com/sendya/ant-design-pro-vue
2. 其他样式
   https://store.antdv.com/home

---

二、npm安装

1. 安装cnpm

npm install -g cnpm --registry=https://registry.npmmirror.com

2. ant-design-pro-vue 需要单独安装 webpack与pnpm

---

三、视频教程

https://www.bilibili.com/video/BV1Wv41147vf?spm_id_from=333.788.videopod.episodes&vd_source=707ec8983cc32e6e065d5496a7f79ee6

1.1 vuecli 创建项目

https://www.bilibili.com/video/BV1Wv41147vf?spm_id_from=333.788.videopod.episodes&vd_source=707ec8983cc32e6e065d5496a7f79ee6&p=2

• 安装vue3的一个工程

---

1.2 vue-router

https://www.bilibili.com/video/BV1Wv41147vf?spm_id_from=333.788.videopod.episodes&vd_source=707ec8983cc32e6e065d5496a7f79ee6&p=3

• router的2种模式

const router = createRouter({history:createWebHashHistory(), //hash模式/******/
})

• hash模式‌：常用于后台管理系统，对URL美观要求不高。它的优点是兼容性好，不需要服务器特殊配置，缺点是URL中带有“#”，影响美观，且不利于SEO‌

const router = createRouter({history:createWebHistory(), //history模式/******/
})

• history模式‌：通常用于需要良好SEO支持的单页应用（SPA），如商城系统。它的优点是URL更美观，缺点是需要服务器配置支持，否则刷新页面会返回404错误‌

---

2.1-2.3 ant-design-vue安装与组件使用

https://www.bilibili.com/video/BV1Wv41147vf?spm_id_from=333.788.videopod.episodes&vd_source=707ec8983cc32e6e065d5496a7f79ee6&p=4

安装ant，安装按需引用-babel-plugin-import，使用按需的封装ant组件的方式

---

3.1-3.2 layout布局

https://www.bilibili.com/video/BV1Wv41147vf?spm_id_from=333.788.videopod.episodes&vd_source=707ec8983cc32e6e065d5496a7f79ee6&p=8

• 介绍了ant的a-layout组件，可以快速布置布局

---

3.3 引入iconfont图标

https://www.bilibili.com/video/BV1Wv41147vf?spm_id_from=333.788.videopod.episodes&vd_source=707ec8983cc32e6e065d5496a7f79ee6&p=9

可以在阿里的iconfont的官网上，下载使用自己喜欢的图标库