Ant Design Pro从零到一(认识AntD)

2023-11-19

废话

在我们第一次接触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 umi

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.

至此项目创建,开始拉取依赖

npm install

接着运行

npm start

然后浏览器访问项目http://localhost:8000,要停止项目就Ctrl+CV或者关闭窗口

目录介绍

具体目录还有相关文档,去官网查看

开始使用 - Ant Design Pro

接下来我们要做的是用WebStorm打开项目,整理一下,记住下面这几个开始时候基本够用:

image.png

配置一下运行选项

image.png

接下来花几分钟熟悉一下项目的写法,然后看下一篇博客

相关链接

上一篇:

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Ant Design Pro从零到一(认识AntD) 的相关文章

随机推荐

  • Java解析XML的四种方法详解

    XML现在已经成为一种通用的数据交换格式 它的平台无关性 语言无关性 系统无关性 给数据集成与交互带来了极大的方便 对于XML本身的语法知识与技术细节 需要阅读相关的技术文献 这里面包括的内容有DOM Document Object Mod
  • c语言下列编程段的错误,C语言编程题目(有错误)

    问题描述 C语言编程题目 有错误 输入精度e 用下列公式求cosx的近似值 精确到最后一项的绝对值小雨e 要求调用和定义函数funcos e x 求余弦函数的近似值 cosx x的0次方 0 x的2次方 2 x的4次方 4 x的6次方 6
  • 58同城 -- 前端一面

    面我的是一个小哥哥 面试体验挺好的 大概进行了35分钟左右 自我介绍 面试内容 为什么向做前端 怎么学习的前端 本人非科班哈 然后问我项目 直接问项目 没问笔试令我有点意外 问我印象最深的项目 印象最深的功能 遇到的难点 前端存储的区别 C
  • python格式化字符串 时间戳 转 UTC(2023-01-11T16:00:00Z)格式时间

    前言 公司前端的时间参数分为两类 一种是时间戳传参 另一种是 2023 01 11T16 00 00Z UTC 时间传参 有些脚本需要用到datatime datatime因此要整理一下相关方法 获取时间戳 my timestamp tim
  • mysql引擎机制_Mysql存储引擎以及锁机制

    一 常用命令 1 查看引擎 默认为InnoDB 查看mysql提供的存储引擎 show engienes 查看mysql当前默认的存储引擎 show variables like storage engine 查看某张表用了什么引擎 sho
  • 解决css中上下外边距(margin)在父元素中溢出的问题

    两个办法 给父元素添加overflow hidden 即可 给父元素添加透明边框border 1px solid transparent 给父元素添加伪元素 before after content display table 改变光标的颜
  • Unity Application.OpenURL Unity打开网页链接

    一般情况下 在电脑上使用Application OpenURL可以正常打开网页 但是如果网页以www开头 例如www baidu com 在电脑上可以正常打开 但是发布成apk后就没有反应了 此时应将Application OpenURL
  • 怎样管理计算机启动项,启动项管理,详细教您电脑开机启动项怎么设置

    电脑开机启动项 就是电脑开机的时候系统会在前台或者后台运行的程序 一般我们主要说的是windows系统的开机启动项 在Windows的配置文件也会加载一些自动运行的程序 那电脑开机启动项怎么设置 下面 小编给大家介绍设置电脑开机启动项的步骤
  • 【华为OD统一考试A卷

    华为OD统一考试A卷 B卷 新题库说明 2023年5月份 华为官方已经将的 2022 0223Q 1 2 3 4 统一修改为OD统一考试 A卷 和OD统一考试 B卷 你收到的链接上面会标注A卷还是B卷 请注意 根据反馈 目前大部分收到的都是
  • ESP32C3 移植ST7735 LVGL

    关于lvgl LVGL是一个C语言编写的免费的开源图形库 其提供了用于嵌入式GUI的各种元素 用户可以利用丰富的图形库资源 在消耗极低内存的情况下构建视觉效果丰富多彩的GUI 只需 64kB 闪存和 8kB RAM 就足以满足简单的用户界面
  • vue构建路由,报错Cannot read properties of undefined (reading ‘forEach‘)

    构建vue路由 这个foreach报错 意味着有一个进入循环的值为null 如果看了其他文章的标准还没有解决的话 建议加一个routes constantRoutes 即在定义router时手动加上一个routes属性 完整的代码 App
  • Linux 如何设置开机自启动脚本

    Linxu开机自启动脚本 一 CentOS系统和Redhat系统如下 1 修改 etc rc d rc local为 bin bash THIS FILE IS ADDED FOR COMPATIBILITY PURPOSES It is
  • Android开发-在Android应用里接入AdMob广告进行变现的实现

    前 言 前段时间 自己开发了一款个人的Android应用想上线 但是由于国内的应用商城对个人开发者不是很友好 即使应用已经申请了软件著作权了也不能上线的了 有些应用只能以企业的名义来上线不能以个人的名义来上线 如影视类 新闻资讯类的应用 无
  • 遇见VS,scanf中_s不能少,要不然Bug报到家,如何解决这个问题呢?

    相信大家第一次用VS时 都会遇到这样的问题 VS莫名其妙的跟你说要用scanf s 使用scanf这个函数不安全 这里说一下为什么我们要用scanf而不使用它推荐的scanf s 我们写代码总不能是写给自己看吧 我们要写的代码可能是要发给别
  • Nginx基础03:配置文件nginx.conf(Part2)

    上一篇文章概述与罗列了 全局配置块 events配置块 http全局块 的基本配置与属性 本篇文章将继续深入server块的配置项 以及相关应用 上篇文章地址 Nginx基础02 配置文件nginx conf Part1 如何使用本篇文章
  • webpack代码混淆

    作者 桑榆 QQ 934440653 有问题 评论留言 或qq联系 安装 npm install save dev webpack obfuscator 属性 compact true 压缩 无换行 controlFlowFlattenin
  • 网络安全体系方法论

    安全牛整合多位资深安全顾问的一线咨询经验 首次公开发布 网络安全体系方法论 旨在给企业或机构提供一个最佳实践的参考 以帮助企业真正提升对网络安全工作的认识 并在安全建设和运营中不断成长 本架构方法论参考了NIST Cybersecurity
  • 什么是流程图

    什么是流程图 流程图是对过程 算法 流程的一种图像表示 在技术设计 交流及商业简报等领域有广泛的应用 通常用一些图框来表示各种类型的操作 在框内写出各个步骤 然后用带箭头的线把它们连接起来 以表示执行的先后顺序 用图形表示算法 直观形象 易
  • How does double arrow (=>) operator work in Perl?

    原文链接 https stackoverflow com questions 4093895 how does double arrow operator work in perl The use of the gt operator ca
  • Ant Design Pro从零到一(认识AntD)

    废话 在我们第一次接触AntD的时候 会遇到两个东西 一个是Ant Design 另一个是Ant Design Pro 他们的官网分别是 Ant Design 一套企业级 UI 设计语言和 React 组件库 Ant Design Pro
Powered by Hwhale