Ant Design Pro入门介绍

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

应用介绍：

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

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

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

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

npm install --global yarn

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

三、开始安装

官方文档给了两种安装方式，使用方法就是给它粘贴到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即可。

后访问给的路由即可：

http://localhost:8000/welcome

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

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

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

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

哥们随便添加了个表单：

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

Ant Design Pro入门介绍相关推荐

Ant Design Pro入门之简介
Ant Design Pro入门了解Ant Design Pro Ant Design Pro 是基于Ant Design的一个开箱即用的,企业级中后台前端/设计解决方案. 效果: 源码地址:htt ...
Ant Design pro入门教程
Ant Design pro入门教程最近公司再开项目又要用antd 这次刚好给大家写一个入门安装教程 ( v5 typescript版本 ) 这套模板使用了react框架为基础哦 1. 准备环境 ...
Ant Design Pro入门教程安装框架
介绍一下Ant Design Pro,说白了就是基于React的一套脚手架,UI是 Ant Design ,框架是 Ant Design Pro 脚手架安装完成,运行起来的样子: 下面我们来看看怎么安 ...
Ant Design Pro入门
目录一:了解Ant Design Pro 二:快速入门一:了解Ant Design Pro Ant Design Pro 是基于Ant Design的一个开箱即用的,企业级中 ...
Ant Design Pro入门之部署安装
部署安装下载地址:https://github.com/ant-design/ant-design-pro 我们使用资料中提供的,已经下载好的文件:ant-design-pro-master.zip ...
ant design pro入门踩坑：删除页面文件报错
前提:用ant design pro新增注册页,没有显示在菜单,在项目Page文件夹删除原因:配置路由没有删总结: 手动删除页面需要删1.Page目录下的页面文件 2.src/Page/.umi/ ...
使用ant design Pro开发项目的小结
一.关于上手. 1. 关于ant design Pro的介绍,自己看官网,大致上可以理解为ant design(组件库) ant design Pro (完整的项目) dva(路由数据流管理)的组合 ...
ant design pro模板_Ant Design Pro入门教程，安装，运行（V5 Typescript版）
[前言] 找了很多Admin模板,最后还是看中了AntDesignPro这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 该套模板是使用了React开发框架作为基础,AntDesig ...
后端工程师入门Ant Design Pro
本文适用于后端程序员入门ant design pro,基于官方文档,不探讨底层,仅为实用,效果预览:https://preview.pro.ant.design/dashboard/analysis ...

Ant Design Pro入门介绍

Ant Design Pro入门介绍相关推荐

最新文章

热门文章