目录
前言
项目构建
目录介绍
前言 在我们第一次接触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打开项目，整理一下，记住下面这几个开始时候基本够用：
文章图片
配置一下运行选项
文章图片
接下来花几分钟熟悉一下项目的写法，然后看下一篇博客
相关链接 【Ant|Ant Design Pro从零到一（认识AntD）】
推荐阅读
- React报错之React hook 'useState' cannot be called
- React报错之React Hook 'useEffect' is called in function
- React报错之React hook 'useState' is called conditionally
- react.js|react学习----jsx语法
- react.js|react学习----组件
- React报错之Expected an assignment or function
- React报错之Unexpected default export of anonymous function
- 前端|前端食堂技术周刊第 44 期（Bun、Vue.js 挑战、React 状态管理的新浪潮、Can I DevTools、函数式编程）
- React报错之Expected `onClick` listener to be a function