Ant Design Pro环境搭建

Ant Design Pro是一套基于Ant Design的开箱即用的中台前端/设计解决方案。

在本文中，我们将会详细讲解如何利用Ant Design Pro快速搭建一套前端服务。

前期准备

1.  安装Git
2.  安装nodejs

Ant Design Pro安装

方式1：克隆git仓库

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

方式2：使用命令行工具

Ant Design Pro退出了命令行工具：ant-design-pro-cli。 
首先使用npm install进行安装：

1.  npm install ant-design-pro-cli -g
2.  mkdir my-project && cd my-project
3.  pro new # 初始化项目空间结构

安装完成后的空间结构如下：

1. ├── mock # 本地模拟数据
2. ├── public
3. │ └── favicon.ico # Favicon
4. ├── src
5. │ ├── assets # 本地静态资源
6. │ ├── common # 应用公用配置，如导航信息
7. │ ├── components # 业务通用组件
8. │ ├── e2e # 集成测试用例
9. │ ├── layouts # 通用布局
10. │ ├── models # dva model
11. │ ├── routes # 业务页面入口和常用模板
12. │ ├── services # 后台接口服务
13. │ ├── utils # 工具库
14. │ ├── g2.js # 可视化图形配置
15. │ ├── theme.js # 主题配置
16. │ ├── index.ejs # HTML 入口模板
17. │ ├── index.js # 应用入口
18. │ ├── index.less # 全局样式
19. │ └── router.js # 路由入口
20. ├── tests # 测试工具
21. ├── README.md
22. └── package.json

安装依赖包

当ant design pro空间初始化完成后，可以使用如下命令来安装依赖：

1.  npm install

Ps：该命令会根据package.json中的依赖包信息安装对应的依赖包文件。 
由于依赖的包相对较多，因此整个安装过程可能较长，需要耐心等待。

启动服务

当依赖包也已经安装完成后，我们可以执行如下命令来启动前端服务了：

1.  npm start

启动完成后会自动打开浏览器访问 http://localhost:8000，你看到下面的页面就代表成功了。 

接下来你可以修改代码进行业务开发了。 
在接下来的文章中，我们将进一步的学习如何进行业务项目的开发以及本身框架的推荐使用方式。

 

原地址：https://www.missshi.cn/api/view/blog/5ab7533a22890966e2000001