盲撸 Ant Design Pro 开篇

碎语#

  本人是从事后端开发,但是自己一直是前后端都写的,之前一直使用vue,因为vue简单么上手快,但是vue一直感觉没有特别好用的中台框架,最近打算撸一撸Ant Design Pro,Reat之前也稍微看过有点,但是也只是看了基础的语法之类的,也没有坚持下来,2022年已过去一半了,这一年貌似又要碌碌无为了,这次就当是给今年安排一个学习计划吧,后端:Abp 前端:React App:MAUI。

   写的比较乱,先暂时记录下,后续在整理,这篇主要记录下 Ant Design Pro的入门

学习路线#

web 技术#

web 技术是指通过 JavaScript,HTML,css 来构建网站的技术,mdn 提供了相当方便的文档来帮助我们学习这些知识。

Node.js 前端开发基础环境#

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时,Node.js 的出现极大的推动了 javascript 的工程化。Node.js 已经是当前前端开发的基础环境,也是任何工作流开始的地方。

Webpack 前端必学必会的打包工具#

Webpack 可以帮助我们完成一些任务。比如 js 压缩、css 压缩、编译模板文件等等,从而减少前端的工作量。当然,Webpack 功能很强大,能帮我们完成的工作远远不止这些。如果我们使用 umi 可以极大的简化 webpack 的配置,但是仍然推荐了解一下基础知识,方便 debug 和 自定义一些配置。

React 基础#

React 是一个用于构建用户界面的 JavaScript 库

React Router 路由库#

React Router 是一个基于 React 之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步。 React Router 可以把 location 转化成一个 state,帮助我们管理路由相关的所有状态。

proxy 反向代理工具#

随着开发越来越偏向的前后端分离,我们在开发中不可避免地会碰到跨域的问题。proxy 就可以完美反向代理的问题,作为 webpack-dev-server 的主打功能之一, proxy 可以帮助我们代理到任何服务器,解决开发中碰到的跨域问题。

dva 轻量级的应用框架#

dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个轻量级的应用框架。

fabric 严格但是不严苛的 lint 规则集#

pro 内置了 fabric 作为了编码规范,fabric 提供了严格但是不严苛的 lint 规则集,包含 eslint,stylelint,prettier 三种工具,可以显著的提升代码质量,规范代码风格。

TypeScript 带类型的 JavaScript#

TypeScript 是 javascript 的超集,TypeScript 不仅包含 JavaScript 的语法,同时还提供了静态类型检查和更完善的代码提示功能。任何现有的 JavaScript 程序都是合法的 TypeScript 程序,只需要简单的学习,就可以获得更佳的开发体验。

Ant Design 前端组件库#

Ant Design 是一套企业级 UI 设计语言和 React 组件库。作为西湖区最好的组件库,它极大的提升了中后台开发的效率,广受国内外开发者的喜爱。

Ant Design Chart简单好用的 React 图表库#

Ant Design Charts 是开箱即用、易于配置、具有良好视觉和交互体验的通用统计图表库,基于 g2 的高交互可视化图形语法的同时预设了配置,一个组件即可实现多种复杂的图表。

ProComponents 模板组件
ProComponents 相比于 Ant Design 更加标准化,作为模板组件一个组件就可以搭建一个页面,在牺牲部分自由度的情况下, 让 CRUD 的效率百倍提升。如果你的项目中表格和表单占主导,那么推荐使用 ProComponents 来完成开发。

useModel 简易数据流
简易数据流一种基于 hooks 范式的简易数据管理方案(部分场景可以取代 dva),通常用于中台项目的全局共享数据。在中后台开发中我们往往不需要共享很多数据,只需要用户信息或者后端下发的部分数据,简易数据流和初始化数据即可解决百分之 90 的场景,使用起来成本更低,更加自然。

两天的学习总结#

   花了一天的时间看完了React的基础语法,Ant Desigin的相关用法,初步搭建Ant Desigin Pro框架,并熟悉相关代码,并且手撸了一个Todo页面,添加路由、页面搭建,Mock数据
   第二天对接后端已经写好的API,替换Mock数据,并且完善新增、修改、删除等功能
   在这两天的学习中,遇到了不少的问题,如下:

  • yarn安装依赖,总是提示超时
    解决方案:设置阿里云镜像

  • git提交代码格式不对,无法提交上去
    解决方案:
    1、vscode安装git-commit-plugin插件
    2、 提交格式如下 git commit -m "fix: 修复一个bug", 这里需要助力下:冒号后面有一个空格
    Type类型支持:feat,fix,docs,style,refactor,perf,test,build,ci,chore,revert

  • 后端代理接口是https协议,弄了好久就是代理不通,最后查询了下需要加上secure:false

    '/api/task/': {
      target: 'https://127.0.0.1:44383',
      changeOrigin: true,
      secure: false,
    },
    
  • 具体涉及到代码中的一些处理,例如如何状态传递,数据传递等处理等

参考文档#

作者:Darren

出处:https://www.cnblogs.com/jesn/p/16314158.html

版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

posted @   jesn  阅读(302)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
more_horiz
keyboard_arrow_up dark_mode palette
选择主题
menu
点击右上角即可分享
微信分享提示