AntDesignPro快速入门

       学习代码很简单，找对思路是关键，当我们看到一个项目的时候，总想着打开项目看一下代码，一看代码两眼发黑，互联网时代不可能把认识所有代码，当我们接触一个项目的时候，先看项目目录结构，对着目录结构写一套增删查改就算是入门了。

     安装环境node+vscode

     创建项目参考官方：入门 - 蚂蚁设计专业版 (ant.design)

     项目创建好了，打开一看，这么多目录无从入手啊，然后看官方文档，又要去了解umi，又要去了解typescript，等等各种前置条件，其实都没有必要，那么多东西如果不是职业前端开发的话怎么可能都会呢，这是不可能的。我们直接开始做项目，一般用这类东西做项目，不会做太多花里胡哨的东西，大部分都是数据展示图表之类的。现在直接开始。

   先了解一下项目目录，其实也不用完全记住，只需要关注config page service就好了

Page里面用来创建页面，config用来配置路由，service用来配置请求后台的接口。

首先创建一个页面 

在homeuser.tsx文件里面加入

export default () => {
  return <div>New Page</div>;
};

在less文件夹加入

@import '~antd/lib/style/themes/default.less'; 

 配置路由：

  {
    name: 'list.table-list',
    icon: 'table',
    path: '/UserList/HomeUser',
    component: '/UserList/HomeUser',
  },

   启动项目：

 

 到此一个页面就算添加成功了，然后就可以在这个页面里面添加你需要的组件了，比如添加一个table。

去官网ProTable - 高级表格 - ProComponents (ant.design)

随便copy一个表格，复制代码到 homeuser.tsx文件里面。表格加载完毕

多余的代码还是不用管，先将表格里的数据替换成我们自己的数据。

 整个项目介绍完毕，是不是很简单。