Ant Desing Pro2.0(一)项目初始化

BigNerdCoding 发布于2019-08-23 15:41 / 3402人阅读

摘要：写在前面最近做毕设的时候发现网络上关于版本的基础入门资料太少，我一个后端开发人员当时入门也是跌跌撞撞，现在我将我所学的分享出来，避免大家少走一些弯路。

1.写在前面

</>复制代码 
最近做毕设的时候发现网络上关于ant designpro2.0版本的基础入门资料太少，我一个后端开发人员当时入门也是跌跌撞撞，现在我将我所学的分享出来，避免大家少走一些弯路。

2.开发环境

</>复制代码 
你的本地环境需要安装 node 和 git。ant desing pro框架基于 ES2015+、React、UmiJS、dva、g2 和 antd，提前了解和学习这些知识会非常有帮助。

3.参考资料

参考ant design pro

参考DvaJs

4.目录地址

Ant Desing Pro2.0(一)项目初始化

Ant Desing Pro2.0(二)新增页面

Ant Desing Pro2.0(三)设置代理

Ant Desing Pro2.0(四)与服务端交互

1.下载项目源码

从github上面下载源码，代码如下

</>复制代码 
git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
cd my-project

下载好的项目如图

2.删除无关代码

</>复制代码 
2.1下图是删除跟开发无关的文件夹以及无关的文件后的效果

</>复制代码 
2.2删除package.json中其他无关的npm命令行

删除前

删除后，图片中有个注意事项请关注以下

3.安装依赖以及启动项目

</>复制代码 
ps:我这里采用『WebStorm』开发
1.在当前目录输入以下命令

</>复制代码 
> nmp install

</>复制代码 
> nmp start

</>复制代码 
运行后浏览器会自动打开出现如下界面

</>复制代码 
这样第一部分的项目导入就算完成了

GPU云服务器云服务器 Desing Ant jenkins ant android ant

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102445.html

Ant Desing Pro2.0(三)设置代理

摘要：参考资料参考参考目录地址一项目初始化二新增页面三设置代理四与服务端交互修改文件在将行和行的注释打开代理前缀，请求格式资源地址将所有以开头的所有路由都代理到目标地址代理目标地址是否跨域访问最终请求时候忽略掉举个例子吧有个接口请求之后会返回 1.参考资料参考ant design pro 参考DvaJs 2.目录地址 Ant Desing Pro2.0(一)项目初始化 Ant D...

Lycheeee 2019-08-23 15:42 评论0 收藏0
Ant Desing Pro2.0(二)新增页面

摘要：配置路由在行新增如下内容这行是新增的内容做完如上步骤其实功能是完成了，但是版本中加入了菜单国际化中。所以你刚刚的页面如下这不是我们想要的效果，让我在进行修改修改在行新增如下内容新增菜单新增页面查看效果运行效果让我做一道连线题把 1.参考资料参考ant design pro 参考DvaJs 2.目录地址 Ant Desing Pro2.0(一)项目初始化 Ant Desing...

vboy1010 2019-08-23 15:41 评论0 收藏0
Ant Desing Pro2.0(四)与服务端交互

摘要：创建在新建文件填入以下代码导入接口文件，并采用解构的方式，将的文件里面的赋值给这里的是储存数据的地方，收到以后，会更新数据。我的理解其实是支付宝的框架传送门 1.参考资料参考ant design pro 参考DvaJs 2.目录地址 Ant Desing Pro2.0(一)项目初始化 Ant Desing Pro2.0(二)新增页面 Ant Desing Pro2.0(三)...

zhunjiee 2019-08-23 15:44 评论0 收藏0
ant design pro 新增页面

摘要：新增页面参考资料由于版本升级到所以重新做了一个分享，下面是目录地址一项目初始化二新增页面三设置代理四与服务端交互在下面的任意一个文件夹下面创建一个页面填写如下内容内容这是新页面内容将刚刚写的组件注册到路由里面，修改文件内容内容新页面添加后的 ant design pro 新增页面 ps:参考资料 1.ant design pro 2.由于pro版本升级到2.0,所以重新做了一个分享...

asoren 2019-08-22 16:44 评论0 收藏0
Ant Design Pro用小乌龟版的git提交时报错

摘要：提交报错描述刚下载好的修改后，准备提交发现报如下错误，原因是引用做和脚本做和的语法纠正。 1.Ant Desing Pro git提交报错 1.1. 描述：刚下载好的ant design pro修改后，准备提交发现报如下错误， 1.2. 原因：是Ant Desing Pro 引用eslint做和stylelintrc脚本做js和css的语法纠正。而在每次git提交的时候触发这个脚本...

source 2019-08-22 16:42 评论0 收藏0