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 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

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

相关链接

上一篇:👀

React从零到一Demo演练(下)

下一篇:👀

Ant Design Pro从零到一(页面创建)

Ant Design Pro 系列:👀

Ant Design Pro 从零到一教程

React从零到一Demo演练(上)

React从零到一Demo演练(下)

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

Ant Design Pro从零到一(页面创建)

Ant Design Pro从零到一(Mock使用)

Ant Design Pro 从零到一(学习Model)

Ant Design Pro 从零到一 (总结)

  • 4
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sirwsl

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值