技术交流qq群   173683895

搭建 Ant Design Pro 的前期准备:你的本地环境需要安装 cnpm、node。

:代码块中的 $  代表: $后面是在命令行输入的命令,举例

$ npm start

:实际上是应该打开命令行输入

npm start

下面开始安装部署 Ant Design Pro 的运行环境:

node 安装:

如果你的系统还不支持 Node.js 及 NPM 可以参考 Node.js 安装教程。

npm 安装:

国内使用 npm 速度很慢,你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

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

这样就可以使用 cnpm 命令来安装模块了, npm 可以使用 cnpm 代替, cnpm 比 npm 速度快。

Ant Design Pro 安装

新建一个空的文件夹作为项目目录,并在目录下执行:

npm create umi

选择 ant-design-pro

执行完之后,会在你的空目录中生成很多文件,文件目录结构如下:

最后一步,安装依赖

$ npm install

安装完成就可以运行了,运行命令

$ npm start

运行完会在默认浏览器自动打开你的项目,效果如图:

接下来我们可以修改代码进行业务开发了。

建议基于框架默认的区块进行开发。区块文档链接地址


【Ant Design Pro 一】 环境搭建,创建一个demo相关推荐

  1. 环境搭建创建一个javaweb+maven+Jfinal项目

    JFinal有如下主要特点: MVC架构,设计精巧,使用简单 遵循COC原则,零配置,无xml 独创Db + Record模式,灵活便利 ActiveRecord支持,使数据库开发极致快速 自动加载修 ...

  2. Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器,桌面安装运行

    学习参考: electron-api-demos 我以下的方式,其实并把Ant Design Pro文件打包到生成的安装包里,所以,安装包=Ant Design Pro+Electron环境 ant- ...

  3. ant design pro模板_ant design pro 当中改变ant design 组件的样式和 数据管理

    ant design pro 简介 官网简介 Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 Ant Design 的设计价值观,致力于在设计规范和基础组件的基础上,继续 ...

  4. Ant Design Pro of Vue——蚂蚁金服中后台系统框架搭建

    Ant Design Pro of Vue--蚂蚁金服中后台系统框架搭建 Ant Design Pro of Vue下载安装启动步骤: 一.Ant Design Pro of Vue 的介绍 Ant ...

  5. 使用Ant Design Pro,一个企业级开箱即用的中后台前端

    #目录 ** 此文仅是个人自学理解的学习笔记,若有不对之处敬请指导更正,谢谢! ** 文章目录 @[toc] Ant Design Pro 了解 知识储备 安装使用 方法一:clone 实践 ESli ...

  6. 体验ANT DESIGN PRO V5--项目创建并安装umi气泡工作台

    ant design pro V5版beta版发布了,距离上次使用ant design pro已经过去两年,看到V587的新版本发布便迫不及待的再来体验下.首先按照官方文档创建项目,项目创建流程如下: ...

  7. 搭建Vue版Ant Design Pro后台管理系统

    搭建Vue版Ant Design Pro后台管理系统 此文章通过基于Vue实现的Ant DesignPro脚手架快速构建一个后台管理系统的前端 相关文档链接 1.[Ant Design Pro of ...

  8. React 基于ant design Pro 4 实现的一个分页, 自定义页码颜色

    标题目录 代码 样式 前言 这是在 Ant Design Pro 4 中基于 ant design 的 Pagination 分页组件的基础上开发的. 有这么一个需求, 页码的颜色基于该页是否有差异, ...

  9. ant design pro(一)安装、目录结构、项目加载启动【原始、以及idea开发】

    一.概述 1.1.脚手架概念 编程领域中的"脚手架(Scaffolding)"指的是能够快速搭建项目"骨架"的一类工具.例如大多数的React项目都有src,p ...

最新文章

  1. Unity3D所使用的第三方工具
  2. 【面试】shuffle函数的实现
  3. 设备管理系统html,蓝色的远程监控设备系统后台管理界面html模板
  4. as3分页——页数多了后自动居中类似谷歌分页
  5. 返回一个二维整数数组最大子数组的和
  6. 0x30 java_终于找到了!有了它你就可以读懂字节码了!
  7. 机器学习实战6-sklearn训练决策树实现分类和回归
  8. 100内奇数之和流程图_JavaScript基础教程(六)流程控制之循环语句
  9. Docker 系列 _ 01_ 一念缘起
  10. Android ButterKnife示例
  11. Oncomine: 一个肿瘤相关基因研究的数据库--转载
  12. 2016年读书总结(一)
  13. cad画多段线时不显示轨迹_CAD画的线段显示不出来的解决方法
  14. rampUp时间 jmeter
  15. 树莓派CM4_Tiny(双HDMI)扩展板基于Retropie的游戏配置操作演示
  16. 词典GoldenDict
  17. 构建前端项目及使用技术
  18. 微信小程序实现时间预约功能
  19. 工程测量乙级资质申请条件及具体流程
  20. 第26次Scrum会议(11/14)【欢迎来怼】

热门文章

  1. 表单高级应用和语义化
  2. Java中的static关键字的用法
  3. iOS开发技巧(系列十八:扩展UIColor,支持十六进制颜色设置)
  4. 多级页表如何节省内存
  5. VIM命令快速记忆(转自杰哥)
  6. php比较长的configure
  7. php session 二位数组
  8. YSLOW法则中,为什么yahoo推荐用GET代替POST?
  9. typedef的四个用途和两大陷阱
  10. C++拾趣——有趣的操作符重载