mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
1 line
24 KiB
JavaScript
1 line
24 KiB
JavaScript
(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["d41dd247"],{d41dd247:function(a,e,n){"use strict";n.d(e,"__esModule",{value:!0}),n.d(e,"texts",{enumerable:!0,get:function(){return t;}}),n("5c0ad4a4");let t=[{value:"\u5728\u771F\u5B9E\u9879\u76EE\u5F00\u53D1\u4E2D\uFF0C\u9664\u4E86 Ant Design \u8FD9\u6837\u7684 UI \u5E93\uFF0C\u4F60\u53EF\u80FD\u4F1A\u8FD8\u4F1A\u9700\u8981\u6784\u5EFA\u5DE5\u5177\u3001\u8DEF\u7531\u65B9\u6848\u3001CSS \u65B9\u6848\u3001\u6570\u636E\u6D41\u65B9\u6848\u3001\u8BF7\u6C42\u5E93\u548C\u8BF7\u6C42\u65B9\u6848\u3001\u56FD\u9645\u5316\u65B9\u6848\u3001\u6743\u9650\u65B9\u6848\u3001Icons \u65B9\u6848\u7B49\u7B49\uFF0C\u624D\u80FD\u5B8C\u6210\u4E00\u4E2A\u5B8C\u6574\u7684\u9879\u76EE\u3002\u6211\u4EEC\u57FA\u4E8E\u4E1A\u52A1\u573A\u666F\uFF0C\u63A8\u51FA\u4E86\u57FA\u4E8E React \u7684\u4F01\u4E1A\u7EA7\u5E94\u7528\u6846\u67B6 ",paraId:0},{value:"Umi",paraId:0},{value:"\uFF0C\u63A8\u8350\u4F60\u5728\u9879\u76EE\u4E2D\u4F7F\u7528\u3002",paraId:0},{value:"Umi\uFF0C\u4E2D\u6587\u53D1\u97F3\u4E3A\u300C\u4E4C\u7C73\u300D\uFF0C\u662F\u53EF\u6269\u5C55\u7684\u4F01\u4E1A\u7EA7\u524D\u7AEF\u5E94\u7528\u6846\u67B6\uFF0C\u4E5F\u662F\u8682\u8681\u96C6\u56E2\u7684\u5E95\u5C42\u524D\u7AEF\u6846\u67B6\uFF0C\u5DF2\u76F4\u63A5\u6216\u95F4\u63A5\u5730\u670D\u52A1\u4E86 10000+ \u5E94\u7528\u3002Umi \u4EE5\u8DEF\u7531\u4E3A\u57FA\u7840\uFF0C\u540C\u65F6\u652F\u6301\u914D\u7F6E\u5F0F\u8DEF\u7531\u548C\u7EA6\u5B9A\u5F0F\u8DEF\u7531\uFF0C\u4FDD\u8BC1\u8DEF\u7531\u7684\u529F\u80FD\u5B8C\u5907\uFF0C\u5E76\u4EE5\u6B64\u8FDB\u884C\u529F\u80FD\u6269\u5C55\u3002\u7136\u540E\u914D\u4EE5\u751F\u547D\u5468\u671F\u5B8C\u5584\u7684\u63D2\u4EF6\u4F53\u7CFB\uFF0C\u8986\u76D6\u4ECE\u6E90\u7801\u5230\u6784\u5EFA\u4EA7\u7269\u7684\u6BCF\u4E2A\u751F\u547D\u5468\u671F\uFF0C\u652F\u6301\u5404\u79CD\u529F\u80FD\u6269\u5C55\u548C\u4E1A\u52A1\u9700\u6C42\u3002",paraId:1},{value:"\u672C\u6587\u4F1A\u5F15\u5BFC\u4F60\u4F7F\u7528 Umi\u3001Ant Design \u548C ",paraId:2},{value:"Ant Design Pro",paraId:2},{value:" \u4ECE 0 \u5F00\u59CB\u521B\u5EFA\u4E00\u4E2A\u7B80\u5355\u5E94\u7528\u3002",paraId:2},{value:"\u63A8\u8350\u4F7F\u7528 ",paraId:3,tocIndex:0},{value:"pnpm",paraId:3,tocIndex:0},{value:" \u521B\u5EFA Umi \u811A\u624B\u67B6\uFF0C\u6267\u884C\u4EE5\u4E0B\u547D\u4EE4\u3002",paraId:3,tocIndex:0},{value:"$ mkdir myapp && cd myapp\n$ pnpm create umi\n",paraId:4,tocIndex:0},{value:"\u5982\u679C\u4F60\u4F7F\u7528 npm\uFF0C\u53EF\u6267\u884C \xa0",paraId:5,tocIndex:0},{value:"npm create umi",paraId:5,tocIndex:0},{value:"\uFF0C\u6548\u679C\u4E00\u81F4\uFF1B\u5982\u679C\u4F60\u4F7F\u7528 yarn\uFF0C\u53EF\u6267\u884C \xa0",paraId:5,tocIndex:0},{value:"yarn create umi",paraId:5,tocIndex:0},{value:"\uFF0C\u6548\u679C\u4E5F\u4E00\u81F4\uFF1B\u5982\u679C\u4F60\u4F7F\u7528 bun\uFF0C\u90A3\u8BF4\u660E\u4F60\u662F\u4E2A\u975E\u5E38\u6F6E\u7684\u4EBA\uFF0C\u53EF\u6267\u884C ",paraId:5,tocIndex:0},{value:"bunx create-umi",paraId:5,tocIndex:0},{value:"\uFF08\u6CE8\u610F\uFF0C",paraId:5,tocIndex:0},{value:"create",paraId:5,tocIndex:0},{value:" \u548C ",paraId:5,tocIndex:0},{value:"umi",paraId:5,tocIndex:0},{value:" \u4E4B\u95F4\u6709\u4E2A ",paraId:5,tocIndex:0},{value:"-",paraId:5,tocIndex:0},{value:"\uFF09\u3002",paraId:5,tocIndex:0},{value:"\u8FD9\u91CC\u9009\u300CSimple App\u300D\uFF0C\u56E0\u4E3A\u6211\u4EEC\u8981\u4ECE \u201C0\u201D \u5F00\u59CB\u3002",paraId:6,tocIndex:0},{value:"? Pick Umi App Template \u203A - Use arrow-keys. Return to submit.\n\u276F Simple App\n Ant Design Pro\n Vue Simple App\n",paraId:7,tocIndex:0},{value:"\u8FD9\u91CC\u5EFA\u8BAE\u9009\u300Cpnpm\u300D\uFF0Cpnpm \u5728\u901F\u5EA6\u4EE5\u53CA\u5904\u7406\u5E7D\u7075\u4F9D\u8D56\u65B9\u9762\u90FD\u66F4\u6709\u4F18\u52BF\u3002",paraId:8,tocIndex:0},{value:"? Pick Npm Client \u203A - Use arrow-keys. Return to submit.\n npm\n cnpm\n tnpm\n yarn\n\u276F pnpm\n",paraId:9,tocIndex:0},{value:"\u8FD9\u91CC\u56FD\u5185\u7684\u670B\u53CB\u5EFA\u8BAE\u9009\u300Ctaobao\u300D\uFF0C\u5426\u5219\u9009\u300Cnpm\u300D\u3002\u9009\u62E9 npm taobao \u6E90\u5728\u5B89\u88C5\u4F9D\u8D56\u65F6\u901A\u5E38\u4F1A\u66F4\u5FEB\u4E00\u4E9B\u3002",paraId:10,tocIndex:0},{value:"? Pick Npm Registry \u203A - Use arrow-keys. Return to submit.\n npm\n\u276F taobao\n",paraId:11,tocIndex:0},{value:"\u7136\u540E\u5DE5\u5177\u4F1A\u81EA\u52A8\u5B89\u88C5\u4F9D\u8D56\uFF0C\u5E76\u6267\u884C Umi \u7684\u521D\u59CB\u5316\u811A\u672C\u3002",paraId:12,tocIndex:0},{value:"\u5728\u542F\u52A8\u9879\u76EE\u4E4B\u524D\uFF0C\u6211\u4EEC\u518D\u5B89\u88C5\u4E00\u4E9B\u672C\u6559\u7A0B\u4F1A\u7528\u5230\u7684\u4F9D\u8D56\u3002",paraId:13,tocIndex:0},{value:"$ pnpm i @umijs/plugins -D\n$ pnpm i antd axios @ant-design/pro-components -S\n",paraId:14,tocIndex:0},{value:"\u5176\u4E2D ",paraId:15,tocIndex:0},{value:"@umijs/plugins",paraId:15,tocIndex:0},{value:" \u662F Umi \u7684\u5B98\u65B9\u63D2\u4EF6\u96C6\uFF0C\u5305\u542B\u4E86 valtio\u3001react-query\u3001styled-components\u3001locale\u3001access\u3001qiankun \u7B49\u5927\u91CF\u63D2\u4EF6\uFF0C\u53EF\u8BA9\u7528\u6237\u901A\u8FC7\u914D\u7F6E\u7684\u65B9\u5F0F\u4E00\u952E\u5F00\u542F\u548C\u4F7F\u7528\uFF1B",paraId:15,tocIndex:0},{value:"antd",paraId:15,tocIndex:0},{value:" \u5C31\u4E0D\u7528\u4ECB\u7ECD\u4E86\uFF1B",paraId:15,tocIndex:0},{value:"axios",paraId:15,tocIndex:0},{value:" \u662F\u8BF7\u6C42\u5E93\uFF1B",paraId:15,tocIndex:0},{value:"@ant-design/pro-components",paraId:15,tocIndex:0},{value:" \u662F\u7528\u4E8E\u751F\u6210\u4E2D\u540E\u53F0\u5E03\u5C40\u7684\u7EC4\u4EF6\u3002\uFF08\u8FD9\u91CC\u5C06\u8FD0\u884C\u65F6\u4F9D\u8D56\u548C\u7F16\u8BD1\u65F6\u4F9D\u8D56\u5206\u522B\u4FDD\u5B58\u5230 dependencies \u548C devDependencies\uFF0C\u662F\u76EE\u524D\u793E\u533A\u63A8\u8350\u7684\u65B9\u5F0F\uFF09",paraId:15,tocIndex:0},{value:"\u5B8C\u6210\u540E\uFF0C\u6267\u884C\u4EE5\u4E0B\u547D\u4EE4\u542F\u52A8\u9879\u76EE\u3002",paraId:16,tocIndex:0},{value:"$ npm run dev\numi dev\ninfo - Umi v4.0.46\n \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\n \u2551 App listening at: \u2551\n \u2551 > Local: http://localhost:8000 \u2551\nready - \u2551 > Network: http://*********:8000 \u2551\n \u2551 \u2551\n \u2551 Now you can open browser with the above addresses\u2191 \u2551\n \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D\n",paraId:17,tocIndex:0},{value:"\u8DDF\u7740\u63D0\u793A\u70B9\u51FB\u547D\u4EE4\u884C\u91CC\u7684 url\uFF0C\u4F1A\u81EA\u52A8\u6253\u5F00\u6D4F\u89C8\u5668\u3002\u5982\u679C\u987A\u5229\uFF0C\u4F60\u4F1A\u770B\u5230\u5982\u4E0B\u754C\u9762\u3002",paraId:18,tocIndex:0},{value:"\u6211\u4EEC\u8981\u5199\u4E2A\u5E94\u7528\u6765\u5148\u663E\u793A\u4EA7\u54C1\u5217\u8868\u3002\u9996\u5148\u7B2C\u4E00\u6B65\u662F\u521B\u5EFA\u8DEF\u7531\uFF0C\u8DEF\u7531\u53EF\u4EE5\u60F3\u8C61\u6210\u662F\u7EC4\u6210\u5E94\u7528\u7684\u4E0D\u540C\u9875\u9762\u3002Umi \u7528\u6237\u901A\u5E38\u4E0D\u9700\u8981\u5173\u5FC3 Umi \u80CC\u540E\u7684\u5B9E\u73B0\uFF0C\u4F46\u5982\u679C\u4F60\u60F3\u77E5\u9053\uFF0CUmi \u7684\u8DEF\u7531\u662F\u57FA\u4E8E react-router@6.3 \u5B9E\u73B0\uFF08\u6CE8\uFF1A\u4E0D\u662F\u6700\u65B0\u7684 6.4\uFF0C6.4 \u5305\u542B\u7684 loader \u548C action \u529F\u80FD\u5E76\u4E0D\u662F Umi \u6240\u9700\u8981\u7684\uFF09\u3002",paraId:19,tocIndex:1},{value:"\u6211\u4EEC\u901A\u8FC7\u547D\u4EE4\u5373\u53EF\u521B\u5EFA\u8DEF\u7531\u3002",paraId:20,tocIndex:1},{value:"$ npx umi g page products\nWrite: src/pages/products.tsx\nWrite: src/pages/products.less\n",paraId:21,tocIndex:1},{value:"\u7136\u540E\u4FEE\u6539\u914D\u7F6E\u6587\u4EF6 ",paraId:22,tocIndex:1},{value:".umirc.ts",paraId:22,tocIndex:1},{value:" \u52A0\u4E0A\u65B0\u589E\u7684\u8DEF\u7531\u58F0\u660E\u3002",paraId:22,tocIndex:1},{value:'import { defineConfig } from "umi";\n\nexport default defineConfig({\n routes: [\n { path: "/", component: "index" },\n { path: "/docs", component: "docs" },\n+ { path: "/products", component: "products" },\n ],\n npmClient: "pnpm",\n});\n',paraId:23,tocIndex:1},{value:"\u7531\u4E8E\u811A\u624B\u67B6\u9ED8\u8BA4\u4F7F\u7528\u7684\u662F\u914D\u7F6E\u5F0F\u8DEF\u7531\uFF0C\u987E\u540D\u601D\u4E49\uFF0C\u5C31\u662F\u8DEF\u7531\u662F\u81EA\u5DF1\u4E00\u884C\u884C\u914D\u51FA\u6765\u7684\uFF0C\u867D\u7136\u7E41\u7410\uFF0C\u4F46\u7075\u6D3B\u6027\u66F4\u9AD8\uFF0C\u8FD9\u79CD\u65B9\u5F0F\u9700\u8981\u5728\u914D\u7F6E\u91CC\u52A0\u4E0A routes \u5B57\u6BB5\uFF0C\u8BE6\u89C1 ",paraId:24,tocIndex:1},{value:"Umi \u6587\u6863\u4E4B\u8DEF\u7531",paraId:24,tocIndex:1},{value:"\u3002\u6B64\u5916\uFF0CUmi \u8FD8\u652F\u6301\u7EA6\u5B9A\u5F0F\u8DEF\u7531\uFF0C\u610F\u601D\u662F\u6587\u4EF6\u7CFB\u7EDF\u5373\u8DEF\u7531\uFF0C\u6240\u4EE5\u65E0\u9700\u914D\u7F6E\u8DEF\u7531\u5373\u53EF\u751F\u6548\u3002",paraId:24,tocIndex:1},{value:"\u7136\u540E\u6211\u4EEC\u7F16\u8F91\u4E0B ",paraId:25,tocIndex:1},{value:"src/layouts/index.tsx",paraId:25,tocIndex:1},{value:" \u6587\u4EF6\uFF0C\u5728\u5168\u5C40\u5E03\u5C40\u8DEF\u7531\u91CC\u52A0\u4E0A\u5230 ",paraId:25,tocIndex:1},{value:"/products",paraId:25,tocIndex:1},{value:" \u8DEF\u5F84\u7684\u5BFC\u822A\u3002",paraId:25,tocIndex:1},{value:'<li>\n <Link to="/docs">Docs</Link>\n</li>\n+ <li>\n+ <Link to="/products">Products</Link>\n+ </li>\n',paraId:26,tocIndex:1},{value:"\u6253\u5F00 ",paraId:27,tocIndex:1},{value:"http://localhost:8000/products",paraId:27,tocIndex:1},{value:" \uFF0C\u5982\u679C\u987A\u5229\uFF0C\u4F60\u4F1A\u770B\u5230\u5982\u4E0B\u9875\u9762\u3002",paraId:27,tocIndex:1},{value:"\u968F\u7740\u5E94\u7528\u7684\u53D1\u5C55\uFF0C\u4F60\u4F1A\u9700\u8981\u5728\u591A\u4E2A\u9875\u9762\u5206\u4EAB UI \u5143\u7D20\uFF08\u6216\u5728\u4E00\u4E2A\u9875\u9762\u4F7F\u7528\u591A\u6B21\uFF09\uFF0C\u5728 Umi \u91CC\u4F60\u53EF\u4EE5\u628A\u8FD9\u90E8\u5206\u62BD\u6210 component \u3002\u6211\u4EEC\u6765\u7F16\u5199\u4E00\u4E2A ProductList \u7EC4\u4EF6\uFF0C\u8FD9\u6837\u5C31\u80FD\u5728\u4E0D\u540C\u7684\u5730\u65B9\u663E\u793A\u4EA7\u54C1\u5217\u8868\u4E86\u3002",paraId:28,tocIndex:2},{value:"\u65B0\u5EFA ",paraId:29,tocIndex:2},{value:"src/components/ProductList.tsx",paraId:29,tocIndex:2},{value:" \u6587\u4EF6\uFF0C\u5185\u5BB9\u5982\u4E0B\u3002",paraId:29,tocIndex:2},{value:"import React from 'react';\nimport { Button, Popconfirm, Table } from 'antd';\nimport type { TableProps } from 'antd';\n\ninterface DataType {\n id: string;\n name: string;\n}\n\nconst ProductList: React.FC<{ products: DataType[]; onDelete: (id: string) => void }> = ({\n onDelete,\n products,\n}) => {\n const columns: TableProps<DataType>['columns'] = [\n {\n title: 'Name',\n dataIndex: 'name',\n },\n {\n title: 'Actions',\n render(text, record) {\n return (\n <Popconfirm title=\"Delete?\" onConfirm={() => onDelete(record.id)}>\n <Button>Delete</Button>\n </Popconfirm>\n );\n },\n },\n ];\n return <Table rowKey=\"id\" dataSource={products} columns={columns} />;\n};\n\nexport default ProductList;\n",paraId:30,tocIndex:2},{value:"\u5047\u8BBE\u6211\u4EEC\u5DF2\u7ECF\u548C\u540E\u7AEF\u7EA6\u5B9A\u597D\u4E86 API \u63A5\u53E3\uFF0C\u90A3\u73B0\u5728\u5C31\u53EF\u4EE5\u4F7F\u7528 Mock \u6570\u636E\u6765\u5728\u672C\u5730\u6A21\u62DF\u51FA API \u5E94\u8BE5\u8FD4\u56DE\u7684\u6570\u636E\uFF0C\u8FD9\u6837\u4E00\u6765\u524D\u540E\u7AEF\u5F00\u53D1\u5C31\u53EF\u4EE5\u540C\u65F6\u8FDB\u884C\uFF0C\u4E0D\u4F1A\u56E0\u4E3A\u540E\u7AEF API \u8FD8\u5728\u5F00\u53D1\u800C\u5BFC\u81F4\u524D\u7AEF\u7684\u5DE5\u4F5C\u88AB\u963B\u585E\u3002Umi \u63D0\u4F9B\u4E86\u5F00\u7BB1\u5373\u7528\u7684 ",paraId:31,tocIndex:3},{value:"Mock \u529F\u80FD",paraId:31,tocIndex:3},{value:"\uFF0C\u80FD\u591F\u7528\u65B9\u4FBF\u7B80\u5355\u7684\u65B9\u5F0F\u6765\u5B8C\u6210 Mock \u6570\u636E\u7684\u8BBE\u7F6E\u3002",paraId:31,tocIndex:3},{value:"\u5728\u6839\u76EE\u5F55\u4E0B\u65B0\u5EFA ",paraId:32,tocIndex:3},{value:"mock/products.ts",paraId:32,tocIndex:3},{value:" \u6587\u4EF6\uFF0C\u5185\u5BB9\u5982\u4E0B\u3002",paraId:32,tocIndex:3},{value:"import { defineMock } from 'umi';\n\ntype Product = {\n id: string;\n name: string;\n};\n\nlet products: Product[] = [\n { id: '1', name: 'Umi' },\n { id: '2', name: 'Ant Design' },\n { id: '3', name: 'Ant Design Pro' },\n { id: '4', name: 'Dva' },\n];\n\nexport default defineMock({\n 'GET /api/products': (_, res) => {\n res.send({\n status: 'ok',\n data: products,\n });\n },\n 'DELETE /api/products/:id': (req, res) => {\n products = products.filter((item) => item.id !== req.params.id);\n res.send({ status: 'ok' });\n },\n});\n",paraId:33,tocIndex:3},{value:"\u7136\u540E\u8BBF\u95EE ",paraId:34,tocIndex:3},{value:"http://localhost:8000/api/products",paraId:34,tocIndex:3},{value:" \uFF0C\u5C31\u80FD\u770B\u5230\u63A5\u53E3\u54CD\u5E94\u7ED3\u679C\u4E86\u3002",paraId:34,tocIndex:3},{value:"\u5B8C\u6210\u4E86 UI \u7EC4\u4EF6\u548C Mock \u6570\u636E\uFF0C\u662F\u65F6\u5019\u628A\u4ED6\u4EEC\u7ED3\u5408\u5230\u4E00\u8D77\u4E86\u3002\u8FD9\u91CC\u9700\u8981\u7528\u5230\u8BF7\u6C42\u65B9\u6848\uFF0C\u6211\u4EEC\u5728\u8FD9\u91CC\u7684\u9009\u62E9\u662F react-query\uFF08\u5982\u679C\u4F60\u60F3\u8BF4 @tanstack/react-query\uFF0C\u6CA1\u9519\uFF0C\u4ED6\u4EEC\u662F\u540C\u4E00\u4E2A\u5E93\uFF0C@tanstack/react-query \u662F react-query \u6539\u540D\u540E\u7684\u5305\uFF09\u3002\u6240\u4EE5\u5728\u5F00\u59CB\u4E4B\u524D\uFF0C\u9700\u8981\u4FEE\u6539\u914D\u7F6E\u542F\u7528\u4E00\u952E\u542F\u7528 ",paraId:35,tocIndex:4},{value:"Umi \u7684 react-query \u63D2\u4EF6",paraId:35,tocIndex:4},{value:"\u3002",paraId:35,tocIndex:4},{value:"\u5148\u7F16\u8F91 ",paraId:36,tocIndex:4},{value:".umirc.ts",paraId:36,tocIndex:4},{value:"\uFF0C\u7531\u4E8E\u6709\u63A2\u6D4B\u5230\u4E0D\u80FD\u70ED\u66F4\u7684\u914D\u7F6E\u9879\u53D8\u66F4\uFF0C\u914D\u7F6E\u6587\u4EF6\u4FDD\u5B58\u540E umi dev \u7684 server \u4F1A\u81EA\u52A8\u91CD\u542F\u3002",paraId:36,tocIndex:4},{value:'import { defineConfig } from "umi";\n\nexport default defineConfig({\n+ plugins: [\'@umijs/plugins/dist/react-query\'],\n+ reactQuery: {},\n routes: [\n { path: "/", component: "index" },\n { path: "/docs", component: "docs" },\n { path: "/products", component: "products" },\n ],\n npmClient: \'pnpm\',\n});\n',paraId:37,tocIndex:4},{value:"\u518D\u7F16\u8F91 ",paraId:38,tocIndex:4},{value:"src/pages/products.tsx",paraId:38,tocIndex:4},{value:"\uFF0C\u5185\u5BB9\u5982\u4E0B\u3002",paraId:38,tocIndex:4},{value:"import React from 'react';\nimport axios from 'axios';\nimport { useMutation, useQuery, useQueryClient } from 'umi';\n\nimport styles from './products.less';\nimport ProductList from '@/components/ProductList';\n\nexport default function Page() {\n const queryClient = useQueryClient();\n const productsQuery = useQuery(['products'], {\n queryFn() {\n return axios.get('/api/products').then((res) => res.data);\n },\n });\n const productsDeleteMutation = useMutation({\n mutationFn(id: string) {\n return axios.delete(`/api/products/${id}`);\n },\n onSettled: () => {\n queryClient.invalidateQueries({ queryKey: ['products'] });\n },\n });\n if (productsQuery.isLoading) return null;\n return (\n <div>\n <h1 className={styles.title}>Page products</h1>\n <ProductList\n products={productsQuery.data.data}\n onDelete={(id) => {\n productsDeleteMutation.mutate(id);\n }}\n />\n </div>\n );\n}\n",paraId:39,tocIndex:4},{value:"\u8FD9\u91CC\uFF0C\u6211\u4EEC\u901A\u8FC7 ",paraId:40,tocIndex:4},{value:"useQuery()",paraId:40,tocIndex:4},{value:" \u62C9\u53D6\u6765\u81EA ",paraId:40,tocIndex:4},{value:"/api/products",paraId:40,tocIndex:4},{value:" \u7684\u6570\u636E\uFF0C\u7136\u540E\u5728 ",paraId:40,tocIndex:4},{value:"onDelete",paraId:40,tocIndex:4},{value:" \u4E8B\u4EF6\u91CC\u901A\u8FC7 ",paraId:40,tocIndex:4},{value:"useMutation()",paraId:40,tocIndex:4},{value:" \u63D0\u4EA4 DELETE \u8BF7\u6C42\u5230 ",paraId:40,tocIndex:4},{value:"/api/products/${id}",paraId:40,tocIndex:4},{value:" \u8FDB\u884C\u5220\u9664\u64CD\u4F5C\u3002\u5173\u4E8E react-query \u7684\u8BE6\u7EC6\u4F7F\u7528\uFF0C\u53EF\u53C2\u8003 ",paraId:40,tocIndex:4},{value:"Umi \u63D2\u4EF6\u4E4B React Query",paraId:40,tocIndex:4},{value:" \u548C ",paraId:40,tocIndex:4},{value:"React Query \u5B98\u7F51",paraId:40,tocIndex:4},{value:"\u3002",paraId:40,tocIndex:4},{value:"\u4FDD\u5B58\u540E\uFF0C\u4F60\u5E94\u8BE5\u4F1A\u770B\u5230\u5982\u4E0B\u754C\u9762\u3002",paraId:41,tocIndex:4},{value:"\u4E00\u4E2A\u6807\u51C6\u7684\u4E2D\u540E\u53F0\u9875\u9762\uFF0C\u4E00\u822C\u90FD\u9700\u8981\u4E00\u4E2A\u5E03\u5C40\uFF0C\u8FD9\u4E2A\u5E03\u5C40\u5F88\u591A\u65F6\u5019\u90FD\u662F\u9AD8\u5EA6\u96F7\u540C\u7684\uFF0C",paraId:42,tocIndex:5},{value:"ProLayout",paraId:42,tocIndex:5},{value:" \u5C01\u88C5\u4E86\u5E38\u7528\u7684\u83DC\u5355\u3001\u9762\u5305\u5C51\u3001\u9875\u5934\u7B49\u529F\u80FD\uFF0C\u63D0\u4F9B\u4E86\u4E00\u4E2A\u4E0D\u4F9D\u8D56\u7684\u6846\u67B6\u4E14\u5F00\u7BB1\u5373\u7528\u7684\u9AD8\u7EA7\u5E03\u5C40\u7EC4\u4EF6\u3002\u5E76\u4E14\u652F\u6301 \xa0",paraId:42,tocIndex:5},{value:"side",paraId:42,tocIndex:5},{value:",\xa0",paraId:42,tocIndex:5},{value:"mix",paraId:42,tocIndex:5},{value:",\xa0",paraId:42,tocIndex:5},{value:"top",paraId:42,tocIndex:5},{value:"\xa0 \u4E09\u79CD\u6A21\u5F0F\uFF0C\u66F4\u662F\u5185\u7F6E\u4E86\u83DC\u5355\u9009\u4E2D\u3001\u83DC\u5355\u751F\u6210\u9762\u5305\u5C51\u3001\u81EA\u52A8\u8BBE\u7F6E\u9875\u9762\u6807\u9898\u7684\u903B\u8F91\u3002",paraId:42,tocIndex:5},{value:"\u5148\u4FEE\u6539\u914D\u7F6E\uFF0C\u4E3A\u6BCF\u4E2A\u8DEF\u7531\u65B0\u589E name \u5B57\u6BB5\uFF0C\u7528\u4E8E\u7ED9 ProLayout \u505A\u83DC\u5355\u6E32\u67D3\u4F7F\u7528\u3002",paraId:43,tocIndex:5},{value:'import { defineConfig } from "umi";\n\nexport default defineConfig({\n routes: [\n- { path: "/", component: "index" },\n+ { path: "/", component: "index", name: "home" },\n- { path: "/docs", component: "docs" },\n+ { path: "/docs", component: "docs", name: "docs" },\n- { path: "/products", component: "products" },\n+ { path: "/products", component: "products", name: "products" },\n ],\n plugins: ["@umijs/plugins/dist/react-query"],\n reactQuery: {},\n npmClient: "pnpm",\n});\n',paraId:44,tocIndex:5},{value:"\u7F16\u8F91 ",paraId:45,tocIndex:5},{value:"src/layouts/index.tsx",paraId:45,tocIndex:5},{value:"\uFF0C\u5185\u5BB9\u5982\u4E0B\u3002",paraId:45,tocIndex:5},{value:"import { ProLayout } from '@ant-design/pro-components';\nimport { Link, Outlet, useAppData, useLocation } from 'umi';\n\nexport default function Layout() {\n const { clientRoutes } = useAppData();\n const location = useLocation();\n return (\n <ProLayout\n route={clientRoutes[0]}\n location={location}\n title=\"Umi x Ant Design\"\n menuItemRender={(menuItemProps, defaultDom) => {\n if (menuItemProps.isUrl || menuItemProps.children) {\n return defaultDom;\n }\n if (menuItemProps.path && location.pathname !== menuItemProps.path) {\n return (\n <Link to={menuItemProps.path} target={menuItemProps.target}>\n {defaultDom}\n </Link>\n );\n }\n return defaultDom;\n }}\n >\n <Outlet />\n </ProLayout>\n );\n}\n",paraId:46,tocIndex:5},{value:"\u8FD9\u91CC\u5148\u7528 Umi \u7684 ",paraId:47,tocIndex:5},{value:"useAppData",paraId:47,tocIndex:5},{value:" \u62FF\u5230\u5168\u5C40\u5BA2\u6237\u7AEF\u8DEF\u7531 ",paraId:47,tocIndex:5},{value:"clientRoutes",paraId:47,tocIndex:5},{value:"\uFF0C\u8FD9\u662F\u4E00\u4EFD\u5D4C\u5957\u7ED3\u6784\u7684\u8DEF\u7531\u8868\uFF0C\u6211\u4EEC\u628A ",paraId:47,tocIndex:5},{value:"clientRoutes[0]",paraId:47,tocIndex:5},{value:" \u4F20\u7ED9 ProLayout\uFF1B\u518D\u901A\u8FC7 ",paraId:47,tocIndex:5},{value:"useLocation()",paraId:47,tocIndex:5},{value:" \u62FF\u5230 location \u4FE1\u606F\uFF0C\u4E5F\u4F20\u7ED9 ProLayout \u6765\u51B3\u5B9A\u54EA\u4E2A\u83DC\u5355\u5E94\u8BE5\u9AD8\u4EAE\uFF1B\u540C\u65F6\u6211\u4EEC\u5E0C\u671B\u70B9\u51FB\u83DC\u5355\u65F6\u505A\u8DEF\u7531\u8DF3\u8F6C\uFF0C\u9700\u8981\u5B9A\u5236 ProLayout \u7684 ",paraId:47,tocIndex:5},{value:"menuItemRender",paraId:47,tocIndex:5},{value:" \u65B9\u6CD5\u3002",paraId:47,tocIndex:5},{value:"\u806A\u660E\u7684\u4F60\u53EF\u80FD\u5DF2\u7ECF\u53D1\u73B0 ",paraId:48,tocIndex:5},{value:"src/layouts/index.less",paraId:48,tocIndex:5},{value:" \u5DF2\u7ECF\u4E0D\u518D\u88AB\u5F15\u7528\u4E86\u3002\u4E3A\u4E86\u4FDD\u6301\u9879\u76EE\u6587\u4EF6\u7684\u6574\u6D01\uFF0C\u53EF\u4EE5\u9009\u62E9\u5C06\u5176\u5220\u9664\u3002",paraId:48,tocIndex:5},{value:"\u6B64\u65F6\u6D4F\u89C8\u5668\u4F1A\u81EA\u52A8\u5237\u65B0\uFF0C\u5982\u679C\u987A\u5229\uFF0C\u4F60\u4F1A\u770B\u5230\u5982\u4E0B\u754C\u9762\u3002",paraId:49,tocIndex:5},{value:"\u5B8C\u6210\u5F00\u53D1\u5E76\u4E14\u5728\u5F00\u53D1\u73AF\u5883\u9A8C\u8BC1\u4E4B\u540E\uFF0C\u5C31\u9700\u8981\u90E8\u7F72\u7ED9\u6211\u4EEC\u7684\u7528\u6237\u4E86\uFF0C\u6267\u884C\u4EE5\u4E0B\u547D\u4EE4\u3002",paraId:50,tocIndex:6},{value:"$ npm run build\ninfo - Umi v4.0.46\n\u2714 Webpack\n Compiled successfully in 5.31s\ninfo - File sizes after gzip:\n 122.45 kB dist/umi.js\n 575 B dist/src__pages__products.async.js\n 312 B dist/src__pages__index.async.js\n 291 B dist/layouts__index.async.js\n 100 B dist/layouts__index.chunk.css\n 55 B dist/src__pages__products.chunk.css\nevent - Build index.html\n",paraId:51,tocIndex:6},{value:"\u6784\u5EFA\u4F1A\u6253\u5305\u6240\u6709\u7684\u8D44\u6E90\uFF0C\u5305\u542B JavaScript, CSS, Web Fonts, \u56FE\u7247, HTML \u7B49\u3002\u4F60\u53EF\u4EE5\u5728 \xa0",paraId:52,tocIndex:6},{value:"dist/",paraId:52,tocIndex:6},{value:"\xa0 \u76EE\u5F55\u4E0B\u627E\u5230\u8FD9\u4E9B\u6587\u4EF6\u3002",paraId:52,tocIndex:6},{value:"\u6211\u4EEC\u5DF2\u7ECF\u5B8C\u6210\u4E86\u4E00\u4E2A\u7B80\u5355\u5E94\u7528\uFF0C\u4F60\u53EF\u80FD\u8FD8\u6709\u5F88\u591A\u7591\u95EE\uFF0C\u6BD4\u5982\uFF1A",paraId:53,tocIndex:7},{value:"\u5982\u4F55\u7EDF\u4E00\u5904\u7406\u51FA\u9519\uFF1F",paraId:54,tocIndex:7},{value:"\u5982\u4F55\u5904\u7406\u66F4\u591A\u8DEF\u7531\uFF0C\u6BD4\u5982\u52A8\u6001\u8DEF\u7531\u3001\u5D4C\u5957\u8DEF\u7531\u3001\u6743\u9650\u8DEF\u7531\u7B49\uFF1F",paraId:54,tocIndex:7},{value:"\u5982\u4F55\u4F7F\u7528\u6570\u636E\u6D41\u65B9\u6848\uFF1F",paraId:54,tocIndex:7},{value:"\u5982\u4F55\u4FEE\u6539 webpack \u914D\u7F6E\u6216\u5207\u6362\u5230 vite \u6784\u5EFA\u6A21\u5F0F\uFF1F",paraId:54,tocIndex:7},{value:"\u7B49\u7B49",paraId:54,tocIndex:7},{value:"\u4F60\u53EF\u4EE5\uFF1A",paraId:55,tocIndex:7},{value:"\u8BBF\u95EE \xa0",paraId:56,tocIndex:7},{value:"Umi \u5B98\u7F51",paraId:56,tocIndex:7},{value:"\u4E86\u89E3 \xa0",paraId:56,tocIndex:7},{value:"Umi \u7684\u8DEF\u7531",paraId:56,tocIndex:7},{value:"\u4E86\u89E3\u6BD4 Umi \u96C6\u6210\u5EA6\u66F4\u9AD8\u7684 \xa0",paraId:56,tocIndex:7},{value:"Umi Max",paraId:56,tocIndex:7},{value:"\u4E86\u89E3\u5F00\u7BB1\u5373\u7528\u7684\u4E2D\u540E\u53F0\u811A\u624B\u67B6 \xa0",paraId:56,tocIndex:7},{value:"Ant Design Pro",paraId:56,tocIndex:7},{value:"\u4E86\u89E3\u9AD8\u7EA7\u5E03\u5C40 \xa0",paraId:56,tocIndex:7},{value:"ProLayout",paraId:56,tocIndex:7},{value:"\u4E86\u89E3\u9AD8\u7EA7\u8868\u683C \xa0",paraId:56,tocIndex:7},{value:"ProTable",paraId:56,tocIndex:7}];}}]); |