Ant Design Pro V5 包含演示效果创建方法

Ant Design Pro V5 包含演示效果创建方法
1、node版本 v16.13.1
2、创新项目
2.1、执行命令：

yarn create umi mywebapp

2.2、选择 ant-design-pro

2.3、选择 TypeScript

2.4、选择 complete

自此初步完成

建议安装 cnpm ,安装方式：npm i -g cnpm -registry=https://registry.npm.taobao.org

执行命令：

cd mywebapp
cnpm install 

支持基本功能已近和演示的一致了。可以执行

npm run start

访问：http://localhost:8000

如果需要包含主题切换功能，需要以下操作：

3、主题切换功能
3.1、执行以下安装:

cnpm i umi-plugin-setting-drawer --save
cnpm i umi-plugin-antd-theme  --save
cnpm i @ant-design/pro-layout --save

到此时就可以支持主题切换了

4、为了拥有更多的功能，请安装ProComponents 参考:https://procomponents.ant.design/

组件如下：

• ProLayout 解决布局的问题，提供开箱即用的菜单和面包屑功能
• ProTable 表格模板组件，抽象网络请求和表格格式化
• ProForm 表单模板组件，预设常见布局和行为
• ProCard 提供卡片切分以及栅格布局能力
• ProDescriptions 定义列表模板组件，ProTable 的配套组件
• ProSkeleton 页面级别的骨架屏

安装命令：

cnpm i @ant-design/pro-form --save
cnpm i @ant-design/pro-layout --save
cnpm i @ant-design/pro-table --save
cnpm i @ant-design/pro-list --save
cnpm i @ant-design/pro-descriptions --save
cnpm i @ant-design/pro-card --save
cnpm i @ant-design/pro-skeleton --save