什么是ant design vue Pro
以下笔墨来自Ant Design Pro官网先容：官网传送门: ant design vue Pro官网。Ant Design Pro 是一个企业级中后台前端/设计办理方案，我们秉承 Ant Design 的设计代价不雅观，致力于在设计规范和根本组件的根本上，连续向上构建，提炼出范例模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。随着『设计者』的不断反馈，我们将持续迭代，逐步沉淀和总结出更多设计模式和相应的代码实现，阐述中后台产品模板/组件/业务场景的最佳实践，也十分期待你的参与和共建。
首页
把稳事变
官网先容到利用ant design vue pro(以下简称antd Pro)的开拓者默认有一定的 Vue 根本和 Antd 利用履历,如果你对这些还不熟习，他们建议咱们先查阅干系文档 Vue、Ant Design Vue。
但是这些都不是很主要，浩浩刚开始打仗这套前端框架时，也没有任何vue根本，之以是写这个系列文章，一方面是想向大家先容这么一套蚂蚁金服出品的精良的前端框架，另一方面是肃清没有任何根本的开拓者的畏难生理，没有根本我们也可以玩转这套框架，毕竟框架的初心便是把开拓者从繁重的前端三剑客中解放出来。
同时由于浩浩也没有这套框架所用到的技能根本，完备是耗费韶光去研究了蚂蚁金服前端开拓职员的写法而总结出来的心得，完备可以知足我们日常系统的前端开拓。如果有技能理解上的缺点，欢迎大家批评示正。如果对你有帮助，请您一键三连以示鼓励。废话不多说，直接上菜！
开始利用
准备事情
利用这套框架，浩浩建议你下载利用VS Code软件，VS Code作为强大的IDE编辑工具，极好上手，不仅可以直接打开terminals运行dos命令，而且支持打开险些所有格式的文档，编辑器很花里胡哨，轻微还有一点装X的觉得。
在利用antd Pro这套框架之前，碍于技能栈的限定，电脑上须要安装node.js以及git组件，下载链接浩浩就不供应了，百度可以办理你这些问题。
安装antd Pro
浩浩假设你已经成功安装VS Code软件，并且已经安装好了准备事情中所须要的环境与组件。于是乎建立一个工程文件夹用于存放antd Pro前端项目文件，然后打开VS Code选择File中的Open…提示选择刚才建好的文件夹点击打开，选择软件上方的Terminal的New Terminal，操作步骤如下图1-1所示：
打开终端
终端打开之后，我们须要从 GitHub 仓库中直接安装最新的脚手架代码。
git clone --depth=1 https://github.com/vueComponent/ant-design-vue-pro.git
安装过程以及成功如图1-2所示：
git拉取
大略先容一下工程目录
从git仓库成功拉取工程文件成功之后，脚手架工程文件目录如图1-3所示：
项目目录
├── public
│ └── logo.png # LOGO
| └── index.html # Vue 入口模板
├── src
│ ├── api # Api ajax 等
│ ├── assets # 本地静态资源
│ ├── config # 项目根本配置，包含路由，全局设置
│ ├── components # 业务通用组件
│ ├── core # 项目勾引, 全局配置初始化，依赖包引入等
│ ├── router # Vue-Router
│ ├── store # Vuex
│ ├── utils # 工具库
│ ├── locales # 国际化资源
│ ├── views # 业务页面入口和常用模板
│ ├── App.vue # Vue 模板入口
│ └── main.js # Vue 入口 JS
│ └── permission.js # 路由守卫(路由权限掌握)
│ └── global.less # 全局样式
├── tests # 测试工具
├── README.md
└── package.json
安装脚手架依赖
实行命令：
npm install 或者 yarn install
npm是安装node.js供应的依赖下载源，由于下载的文件比较多，npm镜像可能不是很稳定，可以利用yarn代替，但是条件还是要先安装yarn指令，个人还是利用npm安装依赖，如果有报错或者非常涌现，可以多考试测验几次。安装韶光较长，安装成功之后的效果如图1-4所示：
安装成功
如果网络状况不佳，可以利用 cnpm 进行加速
并利用 cnpm 代替 yarn或npm
或者设置 yarn 的 npm 加载源，
如 yarn config set registry https://registry.npm.taobao.org
启动脚手架工程
输入启动命令（以npm 为例）
// 启动脚手架
npm run serve或者yarn run serve
输入命令之后脚手架开始启动，成功之后的截图如图1-5所示
启动成功
测试
可以单击本地Local的链接地址，之后就可以打开默认浏览器来加载脚手架。成功之后的界面如图1-6所示
测试成功界面
总结
到此脚手架工程就启动起来了，解释依赖什么都已经加好了。我们之后就可以根据自己系统的所需进行修正某些文件，毕竟这是一套比较全的示例工程，有些东西根据我们的实际是不须要的，以是我们要进行取舍，但是我们对这个工程又不是很理解，也没有其他根本，以是还想连续利用，请关注我理解之后的利用方法，第一天就只需学会脚手架的安装与启动。第二天给大家讲页面路由的逻辑实现以及配置。请大家连续关注，这可能是全网唯一的分享这套精良的前端框架的系列文章，大家多多鼓励，你的每一次点赞收藏转发都是鼓励我不断更新下去的动力，敬请期待！
