当前位置: 首页 > 编程日记 > 正文

【Ant Design Pro 一】 环境搭建,创建一个demo

技术交流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

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

é¦é¡µæªå¾

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

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


相关文章:

JOptionPane

JOptionPane类 1、属于javax.swing 包。 2、功能:定制四种不同种类的标准对话框。 ConfirmDialog 确认对话框。提出问题,然后由用户自己来确认(按"Yes"或"No"按钮) InputDialog 提示输入文本 MessageDialog …

react 错误边界_React with GraphQL和错误边界中的自定义错误页面

react 错误边界by Abi Noda通过Abi Noda React with GraphQL和错误边界中的自定义错误页面 (Custom error pages in React with GraphQL and Error Boundaries) If you like this article please support me by checking out Pull Reminders, a Slack bot that sends your tea…

UITextField 限制用户输入小数点后位数的方法

UITextField 限制用户输入小数点后位数的方法 位数限制: limited 在UITextField的代理方法中添加类似如下代码 - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string {NSMutableString * futureStr…

[BZOJ 1002] [FJOI 2007] 轮状病毒

1002: [FJOI2007]轮状病毒 Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 3045 Solved: 1687[Submit][Status][Discuss]Description 给定n(N<100)&#xff0c;编程计算有多少个不同的n轮状病毒。 Input 第一行有1个正整数n。 Output 将编程计算出的不同的n轮状病毒数输出…

微信小程序左上角返回按钮跳转到指定页面

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 在当前页面的 onUnload 执行页面跳转 onUnload: function () {wx.reLaunch({url: ../logs/logs})}, 代码讲解&#xff1a;监听页面卸载的函数&#xff0c;把页面重定向到指定的 页面&#xff1b;

过度沉思_从沉思到演出:我如何开始我的自由职业

过度沉思by Ashley MacWhirter作者&#xff1a;Ashley MacWhirter 从沉思到演出&#xff1a;我如何开始我的自由职业 (From grit to gigs: how I started my freelancing business) In less than one year, I went from a Georgia Tech Coding Bootcamp graduate to a busines…

拾人牙慧篇之———QQ微信的第三方登录实现

一、写在前面 关于qq微信登录的原理之流我就不一一赘述了&#xff0c;对应的官网都有&#xff0c;在这里主要是展示我是怎么实现出来的&#xff0c;看了好几个博客&#xff0c;有的是直接复制官网的&#xff0c;有的不知道为什么实现不了。我只能保证我的这个是我实现后才贴出来…

win7旗舰版下配置IIS服务器

选择上述的插件后&#xff0c;Windows 需要更新一段时间&#xff0c;并重启电脑 测试是否安装成功&#xff1a;http://localhost 注意&#xff1a;默认端口号是 80&#xff0c;不能和tomcat 的 80 端口同时重启 常见问题&#xff1a; 1.默认页面或者新添加的网站一直出现…

微信小程序 加载中 动画效果

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 效果图&#xff1a; 代码&#xff1a; <view class"line"><image src"../../img/line.png"></image></view>.line {height:1px;position:absolute;animat…

java开放源码_开放源码的第一周:我是如何参与的,以及我学到的东西

java开放源码by Chak Shun Yu泽顺宇 开放源码的第一周&#xff1a;我是如何参与的&#xff0c;以及我学到的东西 (My first week of open source: how I got involved, and what I’ve learned) When I started to write this post, I had finished my first serious week of …

几个不错的开源的.net界面控件

转自原文 几个不错的开源的.net界面控件 (转) 几个不错的开源的.net界面控件 - zt 介绍几个自己觉得不错的几个开源的.net界面控件&#xff0c;不知道是否有人介绍过。 DockPanel Suite&#xff1a;开发类似VS.NET的界面&#xff0c;#Develop就是使用的这个控件。 网址&#…

CSS 盒子模型(转)

CSS中&#xff0c; Box Model叫盒子模型&#xff08;或框模型&#xff09;&#xff0c;Box Model规定了元素框处理元素内容&#xff08;element content&#xff09;、内边距&#xff08;padding&#xff09;、边框&#xff08;border&#xff09; 和 外边距&#xff08;margin…

React 入门笔记 1

React的核心&#xff1a;JSX 首先&#xff0c;React 的页面就是js文件&#xff0c;看到这会有朋友疑惑了&#xff0c;js怎么写标签组件&#xff1f; 解&#xff1a;首先&#xff0c;我们需要了解JSX&#xff0c;什么是JSX&#xff1f; JSX就是JavaScript XML。一种在React组件…

自学成才翁_如何发挥自学成才的内在游戏

自学成才翁by Victor Cassone由Victor Cassone 如何发挥自学成才的内在游戏 (How to play the inner game of self-taught development) Teaching yourself software development is hard. Anyone who tells you otherwise most likely hasn’t done it before.自学软件开发非…

C语言回溯算法解决N皇后问题

回溯算法的模型是 x, not satisfy ? x-- : continue. 代码中x作列号&#xff0c;y[x]保存第x列上皇后放置的位置。 1 #include<stdio.h>2 #include<math.h>3 #define N 54 int position_check(int,int*);5 void print_board(int count,int* y);6 int main()7 {8 …

React 创建组件 使用组件 2

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 组件&#xff1a; 通过组件&#xff0c;可以将UI拆分成独立的&#xff0c;可重复使用的部分&#xff0c;从概念上讲&#xff0c;组件就像javaScript函数&#xff0c;它们接受任意输入&#xff08;称之为…

如何征服Webpack 4并构建一个出色的React应用

This article has been outdated with the new release for babel, kindly check the updated article “How to combine Webpack 4 and Babel 7 to create a fantastic React app”, last updated October 13th, 2018本文与babel的新版本已经过时&#xff0c;请查看更新的文章…

React State和生命周期 3

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 一&#xff1a;组件的生命周期 组件的生命周期可分成三个状态&#xff1a; 安装&#xff1a;已插入真实DOM更新&#xff1a;正在被重新渲染卸载&#xff1a;已移出真实DOM 生命周期的方法有&#xff1a…

TCP/IP 笔记 1.3 IP:网际协议

---恢复内容开始--- I P是T C P / I P协议族中最为核心的协议。所有的 T C P、U D P、I C M P及I G M P数据都以I P数据报格式传输。  不可靠( u n r e l i a b l e)的意思是它不能保证 I P数据报能成功地到达目的地。 I P仅提供最好的传输服务。如果发生某种错误时&#xff…

keras bi-lstm_LSTM用于文本生成的应用介绍-使用Keras和启用GPU的Kaggle Kernels

keras bi-lstmby Megan Risdal梅根里斯达尔(Megan Risdal) LSTM用于文本生成的应用介绍-使用Keras和启用GPU的Kaggle Kernels (An applied introduction to LSTMs for text generation — using Keras and GPU-enabled Kaggle Kernels) Kaggle recently gave data scientists …

201521123013 《Java程序设计》第13周学习总结

1. 本周学习总结 2. 书面作业 Q1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn&#xff0c;分析返回结果有何不同&#xff1f;为什么会有这样的不同&#xff1f; ping值不同&#xff08;time列&#xff09;&#xff0c;cec.jmu.edu.cn的ping值比较小。ping值&am…

React 事件 4

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 将参数传递给事件处理程序 在循环内部&#xff0c;通常需要将额外的参数传递给事件处理程序。例如&#xff0c;如果id是行ID&#xff0c;则以下任何一个都可以工作&#xff1a; <button onClick{(e…

border-radius

周知&#xff1a;OPPO R819T Android 4.2.1和红米某些机型上&#xff0c;webview中&#xff0c;如果一个元素定义了 border border-radius&#xff0c;这时如果该元素有背景&#xff0c;那么背景将会溢出圆角之外&#xff0c;Yo新增了一个方法来fix这个问题&#xff0c;大家之…

javascript调试_如何提高JavaScript调试技能

javascript调试Almost all software developers who have written even a few lines of code for the Web have had at least a quick glance at JavaScript. After all, it is currently one of the most in-demand programming languages.几乎所有甚至为Web编写了几行代码的软…

Java transient

原文出自&#xff1a;http://www.importnew.com/21517.html 1. transient的作用及使用方法 我们都知道一个对象只要实现了Serilizable接口&#xff0c;这个对象就可以被序列化&#xff0c;java的这种序列化模式为开发者提供了很多便利&#xff0c;我们可以不必关系具体序列化的…

KBMMW 的日志管理器

kbmmw 4.82 最大的新特性就是增加了 日志管理器。 新的日志管理器实现了不同类型的日志、断言、异常处理、计时等功能。 首先。引用kbmMWLog.pas 单元后&#xff0c;系统就默认生成一个IkbmMWLog 实例&#xff1a; Log:IkbmMWLog; log 默认使用对应操作系统的日志功能。 为了能…

React 循环渲染 5

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 使用循环渲染的demo&#xff1a; const todoItems todos.map((todo) ><li key{todo.id}>{todo.text}</li> ); const todoItems todos.map((todo, index) >// Only do this if item…

面试时与人事交谈时间_如何与您的技术负责人交谈并解决通讯故障

面试时与人事交谈时间by Greg Sabo由格雷格萨博(Greg Sabo) 如何与您的技术负责人交谈并解决通讯故障 (How to talk to your tech lead and fix your communication glitches) Here’s where you messed up.这是你搞砸的地方。 Your tech lead told you to build out a new A…

inotify简介

一、inotify简介 inotify是Linux内核2.6.13 (June 18, 2005)版本新增的一个子系统&#xff08;API&#xff09;&#xff0c;它提供了一种监控文件系统&#xff08;基于inode的&#xff09;事件的机制&#xff0c;可以监控文件系统的变化如文件修改、新增、删除等&#xff0c;并…

链路层寻址与 ARP

一、 MAC 地址 不是主机或路由器具有链路层地址&#xff0c;而是它们的适配器&#xff08;即网络接口&#xff09;具有链路层地址。因此&#xff0c;具有多个网络接口的主机或路由器将具有与之相关联的多个链路层地址。 然而&#xff0c;链路层交换机并不具有与它们接口相关联的…