ant design pro v2.x 正确打开方式

之前项目都自行写前端css、html、js、后端等等几个项目下来后实在太累就开始寻找好用的前端框架，偶然发现layui pro和ant design pro专门的后台管理系统框架，先1600大洋下手了layui pro花了两天时间研究了下，发现layui思路很好，也在很多细节上站在开发人员的角度上处理得很用心，就拿JWT来说真的该想的都想到了也做了（我也只研究了登录和菜单-_-!!!）。后面又偶然发现了ant design pro，个人觉得任何一个技术或者产品在上手之前一定要先了解一下生态圈是否够大，不然路上掉坑爬不出来！最终在我购买了layui pro一周后我放弃了它转投ant design pro，原因很简单，生态圈够大！UI各方面够友好，但之前一直使用jQuery做为前端开发框架的同学们就得注意了，入门门槛相对layui pro较高，但个人建议还是坚持学下去。这里真的要吐槽一下layui pro，为啥付了款就没一个可以申请发票的地方 ？

ant design pro for v2.x 入门货（依次按顺序逐一操作到最后）：

安装#

从 GitHub 仓库中直接安装最新的脚手架代码。

$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project

$ cd my-project

目录结构#

我们已经为你生成了一个完整的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。

├── config                  # umi 配置，包含路由，构建等配置

├── mock                    # 本地模拟数据

├── public

│  └── favicon.png          # Favicon

├── src

│  ├── assets              # 本地静态资源

│  ├── components          # 业务通用组件

│  ├── e2e                  # 集成测试用例

│  ├── layouts              # 通用布局

│  ├── models              # 全局 dva model

│  ├── pages                # 业务页面入口和常用模板

│  ├── services            # 后台接口服务

│  ├── utils                # 工具库

│  ├── locales              # 国际化资源

│  ├── global.less          # 全局样式

│  └── global.js            # 全局 JS

├── tests                    # 测试工具

├── README.md

└── package.json

本地开发#

安装依赖。

$ npm install

如果网络状况不佳，可以使用 cnpm 进行加速。

$ npm start

推荐使用国内镜像（国外镜像可能导致安装不完整出现各种无法理解问题，另外在安装时有130MB+无法正常下载，哪怕ctrl+c停止后重新安装也无法正常安装）

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

第一次正常 cnpm start 启动后可正常运行没任何问题（chrome控制台不报错）

不用演示数据启动

config目录下config.js中添加proxy属性设置

proxy: {

    '/api': {

      target: 'http://localhost:3000/',

      changeOrigin: true,

      pathRewrite: {

        '^/api': ''

      }

    }

  },

使用npm run start:no-mock启动项目

要点：原理可以简单的理解为，在本地启了一个服务，你先请求了本地的服务，本地的服务转发了你的请求到实际服务器。所以你在浏览器上看到的请求地址还是http://localhost:8000/xxx（这句话很重要，我在github官方看到的问题回复中才解决的问题）

配置后在浏览器中访问代理后的接口地址看是否正确：/api/******/********

最后直接在src目录下services目录下api.js文件中添加或修改需要调用的接口即可

配置完成后记得重启服务