antd pro 实践系列之一--入门

Posted 2021-07-19 就是有点不一样

antd pro 实践系列之一--入门

李现

• 缘起：

面试面的也差不多了，下一周要面试乌鸫和微店，现在空余的时间也比较多了，所以现在我在思考对于前端领域，自己的下一步的计划是什么；由于公司的业务使用的是antd , 最近看了antd 的文档，发现antd pro 提倡的开发方案是使用区块进行项目的搭建，觉得区块的开发是向着低代码的方向演进，前端工程化也在向着这样的方向发展，因此自己从本节开始实践antd pro ;

• 主页界面:

antd pro 是一套脚手架的形式进行代码的创建，使用yarn 或者 npm 安装脚手架:

在空的文件夹下使用:

yarn create umi
// 或者
npm i umi

之后选择ant-design-pro 安装;

安装之后的界面是:

antd pro 主界面

这是首页的界面样式；

• 最开始的实践:

最开始的实践是添加左侧的菜单，

首先在pages中创建一个自定义的文件夹，创建index.jsx文件， 示例如下:

antd pro 文件布局

config.ts 中的路由配置是:

         {
                "path": "/product",
                "component": dynamic({ loader: () => import(/* webpackChunkName: 'p__Product' */'D:/codes/web/node/exercises/html/lodash/umiProjet/src/pages/Product'), loading: LoadingComponent}),
                "name": "产品",
                "icon": "smile",
                "exact": true
              },

上面是"产品"的config.ts 的配置文件示例；

最终的界面展示会在左侧的菜单栏中展示新添加的菜单项；

在业务中通常需要使用组件，那么需要在components 文件夹下创建自己的组件在业务中使用，做到这里基本就可以开始写业务代码了；