ant design学习第一天

最新推荐文章于 2025-10-22 16:53:31 发布

原创最新推荐文章于 2025-10-22 16:53:31 发布 · 259 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#学习

umi的始终控制不好，老实用antdesign吧

1、创建antdesign样例程序

npm i @ant-design/pro-cli -g 创建一个ant design pro的程序

pro create fapi-frontend 开始一个程序，提供一个脚手架

2、运行yarn，安装依赖

3、npm install react-icons增加运行库

React icons preview for gr

4、新增加布局

新增布局
在脚手架中我们通过嵌套路由来实现布局模板。routes.ts 是一个数组，其中第一级数据就是我们的布局，如果你需要新增布局可以再直接增加一个新的一级数据。

layouts 文件时一个约定，layout 都应该放入其中。v5 没有了内置的布局，所以没有这个文件夹，如果你的项目中没有手动创建即可。


export default [
 // user
 {
  path: '/user',
  component: '../layouts/UserLayout',
  routes:[...]
 },
 // app
 {
  path: '/',
  component: '../layouts/BasicLayout',
  routes:[...]
 },
 // new
 {
  path: '/new',
  component: '../layouts/new_page',
  routes:[...]
 },
]

5、组件 ant design的Card和PageContainer