Ant Design Pro of Vue是蚂蚁金服开发的一套Vue前端框架，号称可以让开发人员轻松搭建企业级的前端项目。
进入官网，选择开始使用，可以看到官网提示：
你的本地环境需要安装 node 和 git。我们的技术栈基于 ES2015+、Vue.Js、Vuex、Vue-Router、g2 和 antd-vue，提前了解和学习这些知识会非常有帮助。
关于前置知识，在此之前，我也只是对html、css和javascript（也就是ES2015+）有一定的了解，所以之后的内容里，我也会对Vue的学习内容做一些适当的补充。
接下来就是下载方法了：
从 GitHub 仓库中直接安装最新的脚手架代码。
$ git clone --depth=1 https://github.com/sendya/ant-design-pro-vue.git my-project $ cd my-project
直接在文件夹中使用git shell输入终端命令即可完成下载。
在VS Code中打开可看到项目的文件架构：
在运行项目前，先点击侧边栏5个图标中最下面的一个，进入扩展管理界面，下载相关的扩展插件：
Ant Design Vue helper——支持高亮、标签选取、自动补齐等内容
Debugger for Chrome——可以使用Chrome进行调试，并可以在调试时在JavaScript中设置断点
至此，进入编译的环节，官网上对此的说明是：
安装依赖。
$ yarn install
如果网络状况不佳，可以使用 cnpm 进行加速，并使用
cnpm代替yarn或者设置 yarn 的 npm 加载源，如yarn config set registry https://registry.npm.taobao.org$ yarn run serve
实际测试中，阿里提供的国内镜像服务cnpm的使用体验最佳 。安装node后，会自动附带安装npm，而要使用cnpm，还需要用npm换源安装cnpm：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
安装cnpm后，在VS Code当前目录下打开终端，依次输入指令：
$ cnpm install
$ cnpm run serve即可编译并运行项目，完成后会在终端栏中显示：
这时项目已经在本地端口和互联网端口运行了，打开显示的路径即可查看网页。不过由于要进行调试（说实话不知道为什么，这个调试的效果相当差劲...断点在vue文件中几乎不起作用，不过至少还是能在Debug Console里显示错误信息的），这里选择侧边栏的第4个Debug图标 ，选择其中的"create a launch.json file"，由于之前安装了Chrome扩展，点击后会自动提示Chrome选项，生成默认的Chrome启动文件，注意启动的本地端口要和项目的运行端口一致。
OK，此时选择RUN AND DEBUG，即可启动chrome网页进行调试了。正常情况下会来到这样一个登陆界面：
这说明程序运行成功了，不过别急，说好的脚手架、面包屑导航在哪呢？
当初我被这个问题绕了半天，最后的答案是根据place holder的提示输入账户和密码登录即可……
登陆成功后展示主界面，说明程序运行和调试环境配置成功。