antdesignpro安装学习(代码片段)

关键词：

Ant Design Pro学习

Ant Design Pro 官网：https://pro.ant.design/index-cn

开箱即用的中台前端/设计解决方案

基于 React 的中后台管理控制台的脚手架，UI是Ant Design，，框架是 Ant Design Pro

安装前，你的本地环境需要安装 yarn、node 和 git

一、前序准备

windows下yarn安装

yarn中文文档：https://yarn.bootcss.com/docs

1、使用安装包安装（可以自行选择路径）

　  官方下载.msi安装包：https://yarn.bootcss.com/docs/install/#windows-stable

      安装完毕后，一定要设置环境变量　　

2、使用npm 安装（全局安装）

npm i yarn -g

-i：install 

-g：全局安装（global）,使用 -g 或 --global

     ps：可以使用 yarn -v 检测是由安装成功，也可以直接输入 yarn 查看安装yarn的信息

二、安装

1、新建一个空的文件夹作为项目目录，并在目录下执行：

yarn create umi

or

npm create umi

2、选择  ant-design-pro ：

 Select the boilerplate type (Use arrow keys)
? ant-design-pro  - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
  app             - Create project with a simple boilerplate, support typescript.
  block           - Create a umi block.
  library         - Create a library with umi.
  plugin          - Create a umi plugin.

Ant Design Pro 脚手架将会自动安装。

三、本地开发

1、安装依赖

npm install

2、尝试运行

npm start

　运行成功后，会出现地址，可以在浏览器中访问

　运行效果如下；

 ps：如果遇到了“运行 create-umi 报错“文件名、目录名或卷标语法不正确”的问题，可以参考 https://www.cnblogs.com/xyann/p/12733803.html

006-antdesignpro样式(代码片段)

...属性，可以参考 MDN文档。二、详细介绍2.1、less　　AntDesignPro默认使用less作为样式语言，建议在使用前或者遇到疑问时学习一下 less 的相关特性。2.2、cssmodules　　　　在样式开发过程中，有两个问题比较突出：　　 查看详情

nginx部署antdesignpro(代码片段)

利用Ant Design pro开发的项目，如何用Nginx部署呢？第一步：把项目打包，打包命令如下：npmrunbuild运行完毕会在项目目录下生成dist文件夹。第二步：想要测试打包好的代码是否可以正常运行，安装serve，如下命令npmi serv... 查看详情

004-antdesignpro安装目录结构项目加载启动(代码片段)

一、概述1.1、脚手架概念　　编程领域中的“脚手架（Scaffolding）”指的是能够快速搭建项目“骨架”的一类工具。例如大多数的React项目都有src，public，webpack配置文件等等，而src目录中又包含components目录等等。每... 查看详情

009-antdesignpro引入外部模块(代码片段)

一、概述原文地址：https://pro.ant.design/docs/import-cn除了antd组件以及脚手架内置的业务组件，有时我们还需要引入其他外部模块，这里以引入富文本组件 react-quill 为例进行介绍。二、使用2.1、引入依赖在终端输入下面的命... 查看详情

antdesignpro（十四）advanced使用cli工具(代码片段)

...了如下功能：pronew 新建一个脚手架，会自动将最新的AntDesignPro脚手架下载到本地并安装progenerate 新建一个模板，包含model、servic 查看详情

vue开发实战实战篇#26：antdesignpro介绍(代码片段)

说明【Vue开发实战】学习笔记。AntDesignProhttps://pro.ant.design/zh-CNANTDESIGNPRO：开箱即用的中台前端/设计解决方案特性高效快速：基于ModuleFederation，项目秒启动模板组件：内置模板组件，高效开发国际化：提供... 查看详情

antdesignpro数据加载流程(代码片段)

AntDesignPro数据加载流程作为后端研究两天什么reactesdvareduxstateprops单向传递，似懂非懂，这里记录AntDesignPro数据加载流程，可能不对，自己理解就好，可以做出增删改查页面，没必要死扣原理dispatch->model-&... 查看详情

antdesignpro数据加载流程(代码片段)

AntDesignPro数据加载流程作为后端研究两天什么reactesdvareduxstateprops单向传递，似懂非懂，这里记录AntDesignPro数据加载流程，可能不对，自己理解就好，可以做出增删改查页面，没必要死扣原理dispatch->model-&... 查看详情

007-antdesignpro和服务端进行交互(代码片段)

...、概述　　原文地址：https://pro.ant.design/docs/server-cn　　AntDesignPro是一套基于React技术栈的单页面应用，我们提供的是前端代码和本地模拟数据的开发模式，通过RestfulAPI的形式和任何技术栈的服务端应用一起工作。下面将简单介... 查看详情

008-antdesignpro构建和发布(代码片段)

...只需要运行一行命令就可以打包你的应用：npmrunbuild由于AntDesignPro底层使用的 roadhog 工具，已经将复杂的流程封装完毕，对于大部分场景，构建打包文件只需要一个命令 roadhogbuild，构建打包成功之后，会在根 查看详情

实战antdesignpro中的坑(代码片段)

1.前戏：1,替换mock数据:1.将：.roadhogrc.mock.js中的代理模式替换当不使用代理的时候就会将所有/api/*的链接换成http://localhost:8080/exportdefaultnoProxy?'GET/api/*':'http://localhost:8080/':delay(proxy,1000);2.启动:window:n 查看详情

antdesignpro基本语法使用(javascript版)(代码片段)

组件的定义constFirmwareList=()=>//整个页面所有的代码;exportdefaultFirmwareList;组件的引入importUpload,Form,message,Button,Row,Colfrom'antd';importUploadOutlinedfrom'@ant-design/icons' 查看详情

antdesignpro文件上传(javascript版)(代码片段)

服务器可以成功接收文件，浏览器Data内容前端代码constformData=newFormData();formData.append('file',file);formData.append('filetype',fileType);formData.append('filepath',filePath);request(& 查看详情

antdesignpro中的服务端交互(代码片段)

前端请求流程　　在AntDesignPro中，一个完整的前端UI交互到服务端处理流程是这样的：UI组件交互操作；调用model的effect；调用统一管理的service请求函数；使用封装的request.js发送请求；获取服务端返回；然后调用reducer改变state；... 查看详情

002-antdesignpro布局(代码片段)

一、概述　　参看地址：https://pro.ant.design/docs/layout-cn　　其实在上述地址ant-design上已经有详细介绍，本文知识简述概要。　　页面整体布局是一个产品最外层的框架结构，往往会包含导航、页脚、侧边栏、通知栏以及内容等。... 查看详情

004-antdesignpro新增页面(代码片段)

一、概述　　参看地址：https://pro.ant.design/docs/new-page-cn　　这里的『页面』指配置了路由，能够通过链接直接访问的模块，要新建一个页面，通常只需要在脚手架的基础上进行简单的配置。二、开发步骤2.1、新增js、less文件　　... 查看详情

003-antdesignpro路由和菜单(代码片段)

一、概述　　参看地址：https://pro.ant.design/docs/router-and-nav-cn二、原文摘要　　路由和菜单是组织起一个应用的关键骨架，我们的脚手架提供了一些基本的工具及模板，帮助你更方便的搭建自己的路由/菜单。　　如果你想了解更... 查看详情

005-antdesignpro新增业务组件(代码片段)

一、概述参看地址：https://pro.ant.design/docs/new-component-cn　　对于一些可能被多处引用的功能模块，建议提炼成业务组件统一管理。这些组件一般有以下特征：　　只负责一块相对独立，稳定的功能；　　没有单独的路由配置；　... 查看详情