本文会引导你使用 Umi、Ant Design 和Ant Design Pro从 0 开始创建一个简单应用。 初始化项目 推荐使用pnpm创建 Umi 脚手架,执行以下命令。 $mkdirmyapp&&cdmyapp $pnpmcreate umi 如果你使用 npm,可执行npm create umi,效果一致;如果你使用 yarn,可执行yarn create umi,效果也一致;如果你使用 bun,那说明你是...
本文会引导你使用 Umi、Ant Design 和Ant Design Pro从 0 开始创建一个简单应用。 初始化项目 推荐使用pnpm创建 Umi 脚手架,执行以下命令。 $mkdirmyapp&&cdmyapp $pnpmcreate umi 如果你使用 npm,可执行npm create umi,效果一致;如果你使用 yarn,可执行yarn create umi,效果也一致;如果你使用 bun,那说明你是...
按照umi 脚手架的引导,第一步先选择 ant-design-pro: ?Select the boilerplate type (Use arrow keys)> ant-design-pro - Create projectwitha layout-only ant-design-pro boilerplate, use togetherwithumi block. app- Create projectwitha simple boilerplate, support typescript. block-Create a umi bloc...
umi 可以简单地理解为 roadhog + 路由,思路类似 next.js/nuxt.js,辅以一套插件机制,目的是通过框架的方式简化 React 开发 dva 目前是纯粹的数据流,和 umi 以及 roadhog 之间并没有相互的依赖关系,可以分开使用也可以一起使用,个人觉得umi + dva 是比较搭的 #为什么不是...? #next.js next.js 的功能相对...
['umi-plugin-react', { dva: true, // 开启dva功能 antd: true // 开启Ant Design功能 }] ] }; 1. 2. 3. 4. 5. 6. 7. 8. 2.2、小试牛刀 接下来,我们开始使用antd的组件,以tabs组件为例,地址:https://ant.design/components/tabs-cn/ ...
【国际化 - Ant Design Pro】 不详查看官方文档的,那就跟我一步一步的往下走。我们来给我们的Home 页面菜单添加上国际化(多语言切换)。 1. 首先我们需要打开 config/config.ts 文件,我们需要配置国际化。 2. 其次,我们需要在src/locales中增加相应的 国际化key。例如: ...
先上页面(没有写样式,直接使用ant-design-pro的组件) image.png 没有连接数据库和联调接口,数据是由前端写死的,这里可以使用mock模拟接口 这里描述一下,如何在搭好的框架上开始修改内容: umi的项目,主要就是路由控制页面的跳转,所以一定要先找到项目的路由配置(在config -> config.ts文件中) ...
015 在 Umi 中使用 Ant Design 编写全局布局 前面14天的内容,我们几乎都在谈论 Umi 的相关概念,从这节课开始,我们就会真正进入实战阶段,如果需要给它取一个小标题,那我大概率会用《如何手写 Ant Design Pro》 这节课我们来实现页面级整体布局,所谓布局简单的理解就是网页的整体框框,也可以看成是,所有页面都共...
ant-design-pro中使用环境变量的最优方案 不用环境使用不同的APISERVERM, 这就需要定制不同的打包运行命令 umi提供了UMI_ENV的环境变量来支撑用户自定义的环境 在ant-design-pro 中稍微有些不同,因为pro中没有.umirc.js文件, 只有config/config.ts具体步骤是...
import { useIntl } from 'umi'; 2. 其次,实例化这个钩子函数。 const intl = useIntl(); 3. 在页面/方法 中可以直接使用. 与FormattedMessage 组件相比,它可以存在与方法中。 同样,我们保存下,去页面刷新试试。 显示依旧正确。 这个就是使用 Ant Design Pro的国际化。