【Ant Design Pro of Vue 学习记录 (1)】代码下载与运行的环境配置

Ant Design Pro of Vue是蚂蚁金服开发的一套Vue前端框架，号称可以让开发人员轻松搭建企业级的前端项目。

框架的官网是：https://pro.loacg.com/

进入官网，选择开始使用，可以看到官网提示：

你的本地环境需要安装 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的提示输入账户和密码登录即可……

登陆成功后展示主界面，说明程序运行和调试环境配置成功。