Ant Design Pro从零到一（认识AntD）
废话
在我们第一次接触AntD的时候，会遇到两个东西，一个是Ant Design 另一个是Ant Design Pro，他们的官网分别是：
Ant Design - 一套企业级 UI 设计语言和 React 组件库
Ant Design Pro - 开箱即用的中台前端/设计解决方案
从这个上面就可以看出来了，用小学的缩句表示就是;
Ant Design 是一套设计语言与组件库
Ant Design Pro是一套解决方案
可能这样说还不够直接，说白了就是，Ant Design Pro 是Ant Design 的脚手架，当你构建项目基本框架用Pro ，然后要使用其中一些组件就去Ant Design中去查。
项目构建
我们打开antD的官网Ant Design Pro - 开箱即用的中台前端/设计解决方案拉到下面就可以看见相关的构建方式：
npm create umiSelect 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.至此项目创建，开始拉取依赖
npm install
接着运行
npm start
然后浏览器访问项目http://localhost:8000，要停止项目就Ctrl+CV或者关闭窗口
目录介绍
具体目录还有相关文档，去官网查看
开始使用 - Ant Design Pro
接下来我们要做的是用WebStorm打开项目，整理一下，记住下面这几个开始时候基本够用：
配置一下运行选项
接下来花几分钟熟悉一下项目的写法，然后看下一篇博客
相关链接
上一篇：
未登录自动跳转到登录页面,登录成功不跳转回登录页面的实现代码调用流程. ant Design Pro 是一个企业中后台管理框架,开始做他,第一个肯定是要做登录,下面来看一下它是怎么登录的. 先看路由配 ... 微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 在 Ant Design Pro 中,一个完整的前端 UI 交互到服务端处理流程是这样的: UI 组件交互操作 ... 技术交流qq群 173683895 搭建 Ant Design Pro 的前期准备:你的本地环境需要安装 cnpm.node. 注:代码块中的 $ 代表: $后面是在命令行输入的命令,举例 $ ... 一.概述 原文地址:https://pro.ant.design/docs/deploy-cn 二.详细 2.1.构建 当项目开发完毕,只需要运行一行命令就可以打包你的应用: npm run buil ... 一.概述 1.1.脚手架概念 编程领域中的"脚手架(Scaffolding)"指的是能够快速搭建项目"骨架"的一类工具.例如大多数的React项目都有src,p ... 通过实际demo演示一个管理后台的开发过程 知识点: 1.新增router,新增models 新增菜单配置 1.如上图所示,打开/src/common/menu.js可以看到菜单列表 其中 menuD ... 一.概述 以列表页中的标准列表为主 Ant Design Pro 默认通过只需浏览器单方面就可处理的 HashHistory 来完成路由.如果要切换为 BrowserHistory,那在 src/in ... 用ant design pro框架做的项目,打包之后每一个页面加载的速度都特别慢,在.webpackrc里面配置了ignoreMomentLocale: true, disableDynamicImp ... 学习参考: electron-api-demos 我以下的方式,其实并把Ant Design Pro文件打包到生成的安装包里,所以,安装包=Ant Design Pro+Electron环境 ant- ... 一.Ant Design Pro 打包 1.1 运行 build打包 $ npm run build 1.2 将打包生成的静态文件拷贝到spring boot 项目中 构建打包成功之后,会在根目录生成 ...Ant Design Pro从零到一（认识AntD）相关推荐
最新文章
热门文章