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

目录

🤍前言

🚀项目构建

🌞目录介绍


🤍前言

在我们第一次接触AntD的时候,会遇到两个东西,一个是Ant Design 另一个是Ant Design Pro,他们的官网分别是:

Ant Design - 一套企业级 UI 设计语言和 React 组件库

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

Ant Design Pro 是Ant Design 的脚手架,当你构建项目基本框架用Pro ,然后要使用其中一些组件就去Ant Design中去查。

🚀项目构建

🤎初始化

我们有pro-cli来快速提供初始脚手架。

# use npm
npm i @ant-design/pro-cli -g
pro create myapp

选择 umi 的版本

🐂 Use umi@4 or umi@3 ? (use arrow keys)
❯ umi@4
  umi@3

如果存在umi@4版本,则显示屏不支持完整块选择。

有了umi@3,就是一个很好的模板,pro就是基础模板,它只提供框架操作的内容,完全包含所有的板块,如果pro适合作为二次开发选择的基本模板

🚀 Do you want the full amount or a simple scaffolding? (use arrow keys)
❯ simple
  complete

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

$ cd myapp && tyarn
// or
$ cd myapp && npm install

运行此脚本将启动服务并自动打开默认浏览器以显示页面。重新编辑代码时,页面也将自动刷新。

npm run start

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

🤎或者安装

yarn create umi

🌞目录介绍

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

开始使用 - Ant Design Pro

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

image.png

配置一下运行选项

image.png

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

🎉相关链接

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值