004-ant design pro安装目录结构项目加载启动

Posted 2020-11-02 木子旭

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了004-ant design pro安装目录结构项目加载启动相关的知识，希望对你有一定的参考价值。

一、概述

1.1、脚手架概念

　　编程领域中的“脚手架（Scaffolding）”指的是能够快速搭建项目“骨架”的一类工具。例如大多数的React项目都有src，public，webpack配置文件等等，而src目录中又包含components目录等等。每次在新建项目时，手动创建这些固定的文件目录。脚手架的作用就是帮助你完成这些重复性的工作，包括一键生成主要的目录结构、安装依赖等等。

1.2、参考地址　　

ant design参看地址：https://ant.design/docs/react/introduce-cn

　　其中主要包含了各种插件及使用

ant design pro参看地址：https://pro.ant.design/docs/getting-started-cn

　　其中主要是一个企业级中后台前端/设计解决方案

二、准备工作

　　本地环境需要安装 node 和 git。技术栈基于 ES2015+、React、dva、g2 和 antd，提前了解和学习这些知识会非常有帮助。

三、安装

有两种方式进行安装：

方式一、直接 clone git 仓库

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

方式二、使用命令行工具

你可以使用集成化的命令行工具 ant-design-pro-cli。

$ npm install ant-design-pro-cli -g
$ mkdir my-project && cd my-project
$ pro new  # 安装脚手架

四、目录结构

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

├── mock                     # 本地模拟数据
├── public
│   └── favicon.ico          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── common               # 应用公用配置，如导航信息
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # dva model
│   ├── routes               # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── g2.js                # 可视化图形配置
│   ├── theme.js             # 主题配置
│   ├── index.ejs            # html 入口模板
│   ├── index.js             # 应用入口
│   ├── index.less           # 全局样式
│   └── router.js            # 路由入口
├── tests                    # 测试工具
├── README.md
└── package.json

五、项目加载启动

方式一、使用原始npm启动

此时可以本地启动

$ npm install
$ npm start

启动过程

E:\\work\\antdesign\\my-project>npm start

> ant-design-pro@1.3.0 start E:\\work\\antdesign\\my-project
> cross-env ESLINT=none roadhog dev

Compiled successfully!

You can now view Your App in the browser.

  Local:            http://localhost:8000/
  On Your Network:  http://10.0.9.120:8000/

Note that the development build is not optimized.
To create a production build, use npm run build.

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