Ant Design Pro 从零到一教程

说在最前面的话

可是能全网唯一适合小白的antd教程😂 😂 😂

因为我找了接近一个周的教程,无论是视频、博客等等都没有比较完整的教程,所以才说这可能是唯一全网适合小白教程

文章末有相关学习链接👀 👀 👀

适用人群
  1. 喜欢看文字或者代码学习的人
  2. 学习的人掌握基本的HTML、CSS、JS语法,最好能够面向百度实现基本界面功能的人
  3. 之前从来没有学习过React或者VUE之类的前端框架的人
  4. 没有时间完整学习,需要快速入门、快速掌握的人
所需时间

1-2周时间,因人而异,有的可能3天就够

故事

最近一直在学前端,趁着现在写写这几天学习前端的感受。公司所采用前端框架为React语言,所用框架Ant Design Pro。然后我之前一直都在写后端,虽然前端勉强能写,但也只会普通的html,css,js,而且还是面向百度编程那种,结果现在需要前后一起写,所以就硬着头皮开始学前端。

第一次感受

开始学,同事给了两个地址,接着我点进去看了看,然后看了官网的相关文档以及组件库

Ant Design - 一套企业级 UI 设计语言和 React 组件库

Ant Design Pro - 开箱即用的中台前端/设计解决方案

接下来把环境NodeJS安装了一下,安装结束后开始按照官网文档创建项目等等,其实这才是痛苦的开端,到了后面发现越来越痛苦,俨然不知道怎么办。,然后上网查看相关教程,结果全网无论是否收费,都没完整教程,接下来就说说整个学习流程。

学习路线

  1. 安装NodeJS环境、下载编辑器(例如WebStorm之类的)、安装Git(非必须)
  2. 学习React基础语法
  3. 下载Ant Design Pro代码,直接运行样例、了解结构、文件
  4. 添加路由、尝试创建页面
  5. copy 官网组件API文档中的代码运行
  6. 尝试在组件的基础上修改页面
  7. 学习Mock使用
  8. 学习DVA相关东西
  9. 开始编写Model层
  10. 完整的View->Model->Service->Mock实现

教程连接

React从零到一Demo演练(上)

React从零到一Demo演练(下)

Ant Design Pro从零到一(认识AntD)

Ant Design Pro从零到一(页面创建)

Ant Design Pro从零到一(Mock使用)

Ant Design Pro 从零到一(学习Model)

Ant Design Pro 从零到一 (总结)

  • 19
    点赞
  • 101
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
Ant Design Pro 是一个开箱即用的企业级中后台前端/设计解决方案,它基于 Ant Design 设计体系,整合了大量的前端最佳实践,提供了丰富的功能组件和示例页面,能够帮助开发者快速构建高质量的中后台应用。 下面是一个简单的 Ant Design Pro 教程,帮助你了解如何使用该框架: 1. 安装 Ant Design Pro 首先,你需要安装 Ant Design Pro。可以通过 npm 进行安装: ``` npm install ant-design-pro-cli -g ``` 2. 创建项目 使用 Ant Design Pro CLI 创建项目非常简单,只需要执行以下命令: ``` pro new my-app ``` 其中,my-app 是你要创建的项目名称。 3. 运行项目 在项目创建完成后,进入项目目录并启动开发服务器: ``` cd my-app npm start ``` 4. 编写页面 在 Ant Design Pro 中,页面是通过组件和路由进行组织的。可以在 src/pages 目录下创建一个新的页面,例如: ``` // src/pages/HelloWorld.jsx import React from 'react'; const HelloWorld = () => ( <div>Hello, World!</div> ); export default HelloWorld; ``` 5. 添加路由 在 Ant Design Pro 中,路由是通过 config/router.config.js 定义的。可以在该文件中添加一个新的路由: ``` // config/router.config.js import HelloWorld from '@/pages/HelloWorld'; export default [ { path: '/', component: HelloWorld, }, ]; ``` 6. 编译打包 完成页面和路由的编写之后,可以通过以下命令进行编译打包: ``` npm run build ``` 7. 部署上线 最后,将打包好的文件部署到服务器上即可。 以上就是一个简单的 Ant Design Pro 教程。当然,Ant Design Pro 还提供了许多其他功能,例如国际化、权限控制、数据 Mock 等,可以根据自己的需求进行配置和使用。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sirwsl

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值