macOS上进行Ant Design Pro实战教程（一）
由于一个AI项目的前端使用了umi，本教程根据阿里官网上的 《Ant Design 实战教程（beta 版）》来实操一下，我使用macOS操作系统，VS Code 开发环境。
一、开发环境
1、安装nodejs, npm, yarn
官网上建议使用cnpm，由于阿里不维护cnpm了，后续安装使用yarn来实现。安装好后，我的相关版本如下：
node -v
v22.11.0
npm -v
10.9.1
yarn -v
4.4.12、安装umi依赖
首先，新建一个空的文件夹，用来存放本课程后续所有的代码。然后，调用 yarn init 来初始化 package.json，它是 NodeJS 约定的用来存放项目的信息和配置等信息的文件。接着，安装 umi 的依赖。
mkdir antd-course
cd antd-course
yarn init -y
yarn add umi --dev安装完成之后你会发现 package.json 中多出了一项 devDependencies 的配置，里面包含了 "umi": "^4.3.34"。这样其它开发者下载代码后就只需要执行 npm install 后就会自动安装项目依赖的包。
二、第一个页面
1、初始化 umi 的配置
在 umi 中，大量的使用了配置和约定来帮助你快速开发代码。首先，我们先来创建配置文件。配置文件被约定为 config/config.js。为了让后面的开发更加高效，我们推荐你下载一款适合你的编辑器或者 IDE 来创建和编写代码。本课程中我们使用 VS Code。
在vscode中新建config文件夹，然后新建config.js文件，输入如下代码：
export default {};一开始它只是 export 了一个默认的空的对象 {}，并没有什么作用，但是在后面我们会用到。
我们所说的页面是指由一个独立路由对应的 UI 界面。在这一章节中你只需要知道对于这个例子，就是指我们期望通过浏览器访问 127.0.0.1:8000 的时候可以得到一个显示 hello world 的页面。
2、创建hello world页面
首先我们新建一个 src 目录，它用来存放项目的除了配置以及单测以外的主要代码。
在 umi 中，约定的存放页面代码的文件夹是 pages，我们创建pages文件夹，每个页面在pages下再建立一个文件夹，我们建立一个HelloWorld文件夹。需要修改配置文件为：
export default {
routes: [{
path: '/',
component: './HelloWorld/HelloWorld',
}],
}接下来让我们创建第一个页面组件，新建 src/pages/HelloWorld/HelloWorld.js 文件，代码如下：
export default () => {
return <div>hello world</div>;
}这样第一个页面就创建完成了，代码的具体含义我们会在后面的章节介绍。接下来你就可以通过 umi 来启动你的代码了。首先你需要在 package.json 中的 scripts 里面添加三个命令：
{
"name": "antd-course",
"packageManager": "yarn@4.4.1",
"scripts": {
"start": "umi dev",
"build": "umi build",
"preview": "umi preview"
},
"devDependencies": {
"umi": "^4.3.34"
}
}
我们在项目目录下运行 yarn start 输出如下：
antd-course % yarn start
info - [你知道吗？] COMPRESS=none umi build 可以关闭项目构建时的代码压缩功能, 方便调试项目的构建产物。
Mako https://makojs.dev is a new fast Rust based bundler from us, which is heavily optimized for umi and much faster than webpack. Visit https://makojs.dev/docs/getting-started#bundle-with-umi for more details if you want to give it a try.
info - Umi v4.3.34
info - Preparing...
info - MFSU eager strategy enabled
event - [MFSU][eager] start build deps
info - [MFSU] buildDeps since cacheDependency has changed
╔════════════════════════════════════════════════════╗
║ App listening at: ║
║ > Local: http://localhost:8000 ║
ready - ║ > Network: http://10.192.197.77:8000 ║
║ ║
║ Now you can open browser with the above addresses↑ ║
╚════════════════════════════════════════════════════╝
info - [MFSU][eager] worker init, takes 347ms
info - [MFSU][eager] build worker start to build
event - [Webpack] Compiled in 470 ms (334 modules)
wait - [Webpack] Compiling...
event - [Webpack] Compiled in 55 ms (334 modules)
wait - [Webpack] Compiling...
event - [Webpack] Compiled in 30 ms (334 modules)
event - [Webpack] Compiled in 754 ms (785 modules)
info - [MFSU][eager] write cache
info - [MFSU] buildDepsAgain
info - [MFSU] skip buildDeps
wait - [Webpack] Compiling...
event - [MFSU][eager] start build deps
info - [MFSU] skip buildDeps
event - [Webpack] Compiled in 492 ms (334 modules)打开浏览器，输入网址http://127.0.0.1:8000/，然后你将会看到页面上出现Hello world。我们修改HelloWorld.js如下
return <div>hello world, Ant Design Pro!</div>;
不需要重启启动项目，刷新网址http://127.0.0.1:8000/，界面上就自动更新了，如下图所示：
2、添加 umi-plugin-react 插件
umi 是一个可插拔的企业级 react 应用框架，它的很多功能都是通过插件实现。尤其是 umi 官方的 umi-plugin-react 这个插件集成了常用的一些进阶的功能，为了后面的课程需要，我们需要添加该插件集到项目中。
首先通过yarn add umi-plugin-react --dev来安装该插件集。在package.json下会自动生成dev依赖：
"devDependencies": {
"umi": "^4.3.34",
"umi-plugin-react": "^1.15.9"
}3、构建和部署
你可以通过 yarn build 来构建出最终的产物，执行该命令后会生成最终的 HTML、CSS 和 JS 到 dist 目录下。它们是浏览器可以直接识别并运行的代码，这样你就可以将它们部署到你想要的服务器上了。
需要注意的是，如果你直接用浏览器打开 HTML 那是无法正确展示的，因为直接打开无法识别出 HTML 引入的 JS 和 CSS 的路径。你需要确保的的 HTML 在一个 HTTP 的 web 容器中，并保证对应的页面的访问路径正确。更多关于部署的问题可以查看 umi 的部署文档。
三、使用 Ant Design 组件
通过前面的学习，你应该已经搭建完成了脚手架，并且了解了 React 的基本概念。这一节，我们就来教大家如何使用 Ant Design 组件库，完成一个卡片组件（card）。
1、引入 antd
Ant Design 是一个服务于企业级产品的设计体系，组件库是它的 React 实现，antd 被发布为一个 npm 包方便开发者安装并使用。
如果使用我们的脚手架，Ant Design 已经自带了，否则你需要自己安装。
# 脚手架所在的目录
$ yarn add antd安装完成后，检查 package.json 文件，确认 antd 已正确添加到 dependencies 中：
"dependencies": {
"antd": "^5.22.2"
}2、使用 antd
打开src/pages/HelloWorld/HelloWorld.js, 首先，在页面的头部加入一行。
import { Card } from 'antd';
这行代码表示从 antd 引入 Card 组件。接着，把模块默认输出的 hello world 改成下面的样子。
import { Card } from 'antd';
export default () => {
const style = {
width: '400px',
margin: '30px',
boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2)',
border: '1px solid #e8e8e8',
};
return (
<Card style={style} actions={[<a>操作一</a>, <a>操作二</a>]}>
<Card.Meta
avatar={<img
alt=""
style={{ width: '64px', height: '64px', borderRadius: '32px' }}
src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png"
/>}
title="Alipay"
description="在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。"
/>
</Card>
);
}上面代码应该很容易看懂。
程序运行效果如下：
原文地址：https://blog.csdn.net/weixin_56460049/article/details/144008941
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！