😉😶🌫️本文旨在总结使用 AntD pro Vue 中遇到的问题与对应解决方法
🎃⛳AntD pro Vue 针对3.0.4版本
1. 版本选择与下载
1.1 Vue2 还是 Vue3?
若执意使用 Vue3，需使用 pro-layout 组合，这里先不做探讨。
1.2 下载启动
git clone --depth=1 https://github.com/vueComponent/ant-design-vue-pro.git my-project
//本地环境要安装 git 和 node
🚩问题：npm install后遇到了报错 The project seems to require pnpm but it's not installed
✅解决：npm install -g pnpm
😶🌫️原因：项目根目录中有一个pnpm-lock.yaml文件，这是一个确定性的 lockfile ，如果没有安装就 pnpm 就会报错。
😊拓展：
若川《尤雨溪推荐神器 ni ，能替代 npm/yarn/pnpm ？简单好用！源码揭秘！》
金虹桥程序员《都2022年了，pnpm快到碗里来！》
2. 入门结构
项目跑起来后，分析大致结构，为魔改做准备。
😶🌫️project directory:
😶view files：
3. 登陆与路由
路由和菜单是一个应用的骨架，pro中的路由为方便管理，使用中心化的方式，在src/config/router.config.js中统一管理。
3.1 登陆报错
🚩问题：登陆页面总是显示账户或密码错误
✅解决：
src/mock/service.auth.js中强硬要求隐藏即可
😶🌫️原因：打印mock提交的数据和账号密码表单数据发现不一致，其实魔改应该一开始就在
main.js中隐藏掉mock数据，但为了先了解结构还是以mock为准。
3.2 路由分析
router/config/js：项目中的所有路由都通过统一管理，菜单也是根据这个文件生成的src/permission.js：路由守卫文件，控制权限src/router/index.js:路由模式和重置路由方法src/store/modules/async-router.js或static-router文件：关注actions.GenerateRoutes具体逻辑在此实现
-------------------------- 占位内容
3.3 路由权限
Pro有两套方案 官方文档
1. 默认前端固定路由表和权限配置，后端提供用户权限标识，前端根据识别判断是否用路由权限
2. 后端提供权限和路由信息结构接口，动态生成权限和菜单
-------------------------- 占位内容
4. layouts file
在路由规则中，component 项由@layouts引入，根目录下的 layouts 是项目公共布局文件夹，传统包括侧边栏和导航头，再新建 index.js 暴露。
4.1 BasicLayout
BasicLayout 重点关注 <pro-layout></pro-layout>，查看了依赖发现此标签隶属于@ant-design-vue/pro-layout
<pro-layout
:menus="menus"
:collapsed="collapsed"
:mediaQuery="query"
:isMobile="isMobile"
:handleMediaQuery="handleMediaQuery"
:handleCollapse="handleCollapse"
:i18nRender="i18nRender"
v-bind="settings"
>
<template v-slot:menuHeaderRender>
menuHeaderRender渲染logo和title
</template>
<template v-slot:headerContentRender>
自定义头内容的方法，顶部左侧
</template>
<template v-slot:rightContentRender>
顶部右边内容
</template>
<template v-slot:footerRender>底部内容</template>
</pro-layout>
ProComponets ，基于 Ant Design 开发的模板组件，提供了更高级别的抽象支持。ProLayout解决布局问题，提供菜单和面包屑。
4.2 面包屑
每一个组件的内容部分上方都有一个路径展示和名称，追溯到项目中的标签是page-header-wrapper,可以自定义中顶部卡片的内容。
<page-header-wrapper>
<template v-slot:content>...</template>
<template v-slot:extraContent>...</template>
</page-header-wrapper>
🚩问题：若想去掉此标签中的面包屑(如图主页/表单页/高级表单)，PageHeaderWrapper属性在网页文档版🈚没有显示，需要查看 github 上的文档 link
github文档虽然有PageHeaderWrapper属性说明，但并没有去除面包屑的方法（如下）
只能查看源码部分：
😶🌫️原因：
源码中，PageHeaderWrapper接受了 PageHeaderWrapperPros传来的值，PageHeaderWrapperPros中有一个breadcrumb属性，此属性可以从父组件传递过来。
✅解决：<page-header-wrapper :breadcrumb="false">
-------------------------- 占位内容
5. 网络请求
实际开发中要在 main.js 中去掉 import './mock'，在`vue.config.js`中设置 proxy代理地址，
这个地址就是后端给的请求地址。
🚩问题：本地调试时，去掉 mock 数据，将 proxy 改为本地 target: 'http://localhost:8000'请求报错：431 Request Header Fields Too Large
😶🌫️原因：431是请求头过大
❌解决：尚未解决，实际开发调试看看
-------------------------- 占位内容更新
5.1 cross-env 的引入
-
AntD pro Vue 采用的是vueCLI默认的环境配置
-
引入
cross-env插件，运行跨平台设置和使用环境变量脚本 -
使用方法：
npm install --save-dev cross-env -
具体魔改：
