Ant Design Pro of Vue——蚂蚁金服中后台系统框架搭建

Ant Design Pro of Vue下载安装启动步骤：

一、Ant Design Pro of Vue 的介绍

Ant Design Pro 是一个企业级中后台前端/设计解决方案，我们秉承 Ant Design 的设计价值观，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。

因为Ant Design Pro of Vue是基于Ant Design Vue的，在使用过程中，感觉相较于 elementUI 来说，组件会更丰富一点，总体来说是很不错的。下面我给几个链接，并展示几张界面图，组件图等看一下。

Vue.js:https://vuejs.bootcss.com/
Ant Design of Vue:https://vue.ant.design
Ant Design Pro of Vue:https://pro.loacg.com/

二、图例

Ant Design Vue 组件图：
目前一共有55个组件，非常丰富。

Ant Design Pro of Vue也提供了一些专用组件，可以自行选择：

Ant Design Pro of Vue的部分界面图：

看起来还是很漂亮的，右侧边的齿轮按钮是一个自定义功能，可以更换背景，样式等等。你可以根据自己的项目和业务需求快速的开发出一套完整的中后台项目。

权限路由控制流程

二、安装环境和依赖

node
yarn
webpack
eslint
@vue/cli 3.2.1
ant-design-vue - Ant Design Of Vue 实现
vue-cropper - 头像裁剪组件
@antv/g2 - Alipay AntV 数据可视化图表
Viser-vue - antv/g2 封装实现

请注意，我们强烈建议本项目使用 Yarn 包管理工具，这样可以与本项目演示站所加载完全相同的依赖版本 (yarn.lock) 。由于我们没有对依赖进行强制的版本控制，采用非 yarn 包管理进行引入时，可能由于 Pro 所依赖的库已经升级版本，而引入了新版本所照成的问题。本作者可能会由于时间问题无法及时排查而导致您采用本项目作为基项目而出现问题。

三、项目下载和运行

拉取项目代码

git clone https://github.com/sendya/ant-design-pro-vue.git
cd ant-design-pro-vue

安装依赖

yarn install

开发模式运行

yarn run serve

编译项目

yarn run build

Lints and fixes files

yarn run lint

四、其他说明

关于 Issue 反馈 (重要!重要!重要!) 请在开 Issue 时，描述清楚您的使用环境，所使用 Pro 版本或分支，出现的情况等… 另外，若有疑问也可加入 QQ群（Ant Design Vue 原作者使用讨论群 217490093，非 Pro 群），本项目的几位维护者也在该群
项目使用的 vue-cli3, 请更新您的 cli
关闭 Eslint (不推荐) 移除 package.json 中 eslintConfig 整个节点代码
项目使用了在线 mock，easy-mock 项目所用的 mock 数据点击查看(请勿改动接口返回数据)，也可以下载 ANTD-PRO-Easy-Mock-API.zip 然后自行导入到自己的 mock 服务上
修改 Ant Design 配色，在文件 vue.config.js 中，其他 less 变量覆盖参考 ant design 官方说明

  css: {loaderOptions: {less: {modifyVars: {/* less 变量覆盖，用于自定义 ant design 主题 */'primary-color': '#F5222D','link-color': '#F5222D','border-radius-base': '4px',},javascriptEnabled: true,}}}

五、附属文档

路由/菜单说明
Table 重封装组件
ANTD 默认配置项
按需加载/减少打包大小
为首屏增加 Loading 动画
为项目增加依赖项分析工具 analyzer
ANTD PRO 额外组件
- Trend 趋势标记 Trend.md
- AvatarList 用户头像列表 AvatarList.md
- CountDown 倒计时 CountDown.md
- Ellipsis 文本自动省略号 Ellipsis.md
- NumberInfo 数据文本 NumberInfo.md
- FooterToolbar 底部工具栏 FooterToolbar.md
其他待补充…

备注：@vue/cli 升级后，eslint 规则更新了。由于影响到全部 .vue 文件，需要逐个验证。既暂时关闭部分原本不验证的规则，后期维护时，在逐步修正这些 rules

如果觉得写得好，请点个关注，有什么问题请留言，相互学习共同进步，创建美好明天！！！