Ant Design Pro入门介绍

官方文档地址:https://pro.ant.design/zh-CN

应用介绍:

    Ant Design Pro是一个企业级中后台前端/设计解决方案,基于React的中后台管理控制台的脚手架。能帮助我们快速的搭建企业级中后台管理系统。今天就为大家简单的介绍一下 Ant Design Pro 的搭建步骤:

    

1. 首先需要大家确定安装node和yarn

Ant Design Pro入门介绍_第1张图片

这个安装就比较简单:node直接去官网下载即可,建议大家下载长期维护版。

Ant Design Pro入门介绍_第2张图片

而yarn则直接在cmd里执行下面代码即可。

npm install --global yarn

二、当大家确定下载好node.js和yarn后,就可以新建一个空文件目录,准备安装Ant Design Pro项目。这个直接在你打算安装的文件夹下使用cmd即可。

Ant Design Pro入门介绍_第3张图片

三、开始安装

    官方文档给了两种安装方式,使用方法就是给它粘贴到cmd中执行即可

。但这两者有什么区别呢?

#使用npmnpx create-umi myapp# 使用 yarnyarn create umi myapp

yarn和npm命令对比:

yarn npm
yarn npm  install
yarn add react npm install react --save

yarn的优点:

  • 速度快。可以并行下载使资源达到最大利用率;

  • 安全。yarn会校验每个安装包的完整性;

  • 多注册来源处理。支持从npm安装;

  • 更好的语义化。

   npm问题举例:

  • npm install下载速度完;

  • 版本无法保证统一性。

因此不用我多说了吧,哥们选择了yarn

当开始执行'yarn create umi myapp'安装时,会让你去选择安装内容、语言、模板等,这里就直接去看官网文档即可。 

其目录结构如下:├── config                   # umi 配置,包含路由,构建等配置├── mock                     # 本地模拟数据├── public│   └── favicon.png          # Favicon├── src│   ├── assets               # 本地静态资源│   ├── components           # 业务通用组件│   ├── e2e                  # 集成测试用例│   ├── layouts              # 通用布局│   ├── models               # 全局 dva model│   ├── pages                # 业务页面入口和常用模板│   ├── services             # 后台接口服务│   ├── utils                # 工具库│   ├── locales              # 国际化资源│   ├── global.less          # 全局样式│   └── global.ts            # 全局 JS├── tests                    # 测试工具├── README.md└── package.json

安装完后,直接使用idea打开,等待其依赖下载完成即可。若不下载,则在命令行输入yarn,即可开始下载。

运行方式:

    打开package.json运行脚本start即可。

Ant Design Pro入门介绍_第4张图片

后访问给的路由即可:

http://localhost:8000/welcome

Ant Design Pro入门介绍_第5张图片

这个时候有同学要问了,既然是脚手架,我还歹在里面进行开发其他页面,如何快速引用呢?

     这个时候需要去下载Umi UI 可以去方便添加区块和模板。

$ tyarn add @umijs/preset-ui -D// 或$ npm install --save-dev @umijs/preset-ui

安装完成后,重启项目,会在右下角出现个圆圈。 点击后就可以随心所欲的添加页面了。

Ant Design Pro入门介绍_第6张图片

Ant Design Pro入门介绍_第7张图片

哥们随便添加了个表单:

Ant Design Pro入门介绍_第8张图片

注:只是前端的脚手架,此次并没有涉及到后端,数据全为官方模拟。

你可能感兴趣的:(javascript,react.js,前端,java)