Loading

盲撸 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,
},

  • 具体涉及到代码中的一些处理，例如如何状态传递，数据传递等处理等

参考文档

posted @ 2022-05-26 17:09  jesn  阅读(354)  评论(0)    收藏  举报