1、安装
1.1、首先 cd 到项目目录，然后执行 cmd，键入命令：
> npm create umi pnpm create umi yarn create umi bunx create-umi1.2、选择模板
> Simple App Ant Design Pro Vue Simple App1.3、选择方式
> npm cnpm tnpm yarn pnpm1.4、选择镜像
npm> taobao1.5、安装依赖
npm i @umijs/plugins -Dnpm i antd axios @ant-design/pro-layout -S2、启动
npm run devumi devinfo - Umi v4.0.46 ╔════════════════════════════════════════════════════╗ ║ App listening at: ║ ║ > Local: ║ready - ║ > Network: *********:8000 ║ ║ ║ ║ Now you can open browser with the above addresses↑ ║ ╚════════════════════════════════════════════════════╝3、路由
3.1、新建
npx umi g page bs/productsWrite: src/pages/products.tsxWrite: src/pages/products.less3.2、注册
修改.umirc.ts
import { defineConfig } from "umi";export default defineConfig({ routes: [ { path: "/", component: "index" }, { path: "/docs", component: "docs" },+ { path: "/products", component: "@/pages/products"" }, ], npmClient: "pnpm",});3.3、使用
修改src/layouts/index.tsx
Docs + + Products+ 4、实现 ProductList UI 组件
组件src/components/productList/ProductList.tsx
import { Button, Popconfirm, Table } from 'antd';import React from 'react';const ProductList: React.FC<{ products: { name: string }[]; onDelete: (id: string) => void }> = ({ onDelete, products,}) => { const columns = [ { title: 'Name', dataIndex: 'name', }, { title: 'Actions', render(text: string, record: object) { return ( onDelete(record.id)}> ); }, }, ]; return
;};export default ProductList;5、完成 productList 页面
修改.umirc.ts
import { defineConfig } from "umi";export default defineConfig({+ plugins: ['@umijs/plugins/dist/react-query'],+ reactQuery: {}, routes: [ { path: "/", component: "index" }, { path: "/docs", component: "docs" }, { path: "/products", component: "products" }, ], npmClient: 'pnpm',});修改src/pages/bs/products/products.tsx
import ProductList from '@/components/ProductList';import axios from 'axios';import React from 'react';import { useMutation, useQuery, useQueryClient } from 'umi';import styles from './products.less';export default function Page() { const queryClient = useQueryClient(); const productsQuery = useQuery(['products'], { queryFn() { return axios.get('/api/products').then((res) => res.data); }, }); const productsDeleteMutation = useMutation({ mutationFn(id: string) { return axios.delete(`/api/products/${id}`); }, onSettled: () => { queryClient.invalidateQueries({ queryKey: ['products'] }); }, }); if (productsQuery.isLoading) return null; return ( Page products
{ productsDeleteMutation.mutate(id); }} /> );}6、ProLayout
.umirc.ts
import { defineConfig } from "umi";export default defineConfig({ routes: [- { path: "/", component: "index" },+ { path: "/", component: "index", name: "home" },- { path: "/docs", component: "docs" },+ { path: "/docs", component: "docs", name: "docs" },- { path: "/products", component: "products" },+ { path: "/products", component: "products", name: "products" }, ], plugins: ["@umijs/plugins/dist/react-query"], reactQuery: {}, npmClient: "pnpm",});编辑src/layouts/index.tsx
import { ProLayout } from '@ant-design/pro-layout';import { Link, Outlet, useAppData, useLocation } from 'umi';export default function Layout() { const { clientRoutes } = useAppData(); const location = useLocation(); return ( { if (menuItemProps.isUrl || menuItemProps.children) { return defaultDom; } if (menuItemProps.path && location.pathname !== menuItemProps.path) { return ( {defaultDom} ); } return defaultDom; }} > );}7、构建
npm run buildinfo - Umi v4.0.46✔ Webpack Compiled successfully in 5.31sinfo - File sizes after gzip: 122.45 kB dist/umi.js 575 B dist/src__pages__products.async.js 312 B dist/src__pages__index.async.js 291 B dist/layouts__index.async.js 100 B dist/layouts__index.chunk.css 55 B dist/src__pages__products.chunk.cssevent - Build index.html
