初次使用antdesignpro时对其理解

小小感触

  • 我仅仅只是将antdesignsnpro 初始化了一下项目，这套基于react为基础的开箱即用的脚手架真是惊讶到我了。深深感受到它的确是从实际的项目开发中提炼的精华，并将其整理成大家共用的资源，这对于很多中后台的开发，真是节省的很多时间，减少了很多的重复工作量。
  • 往往我们开始一个项目，需要去搭建脚手架，包含对sass或是less的编译、对es6的编译、对ts的编译、html模块的编译、路由的计划、数据请求的封装、数据流的结构搭建、性能优化的方案考虑、编码规范等。
  • 简单的瞄了一下Antdesign pro初始化出来的项目，这些都已经做好了。甚至包含一个新的项目的基础功能，不，不能说是基础功能，连很多复杂的功能细节全都已经实现好，这真的是开箱即用。产品的确是超级用心，相应的文档也是写的非常详细，然而，对于这么方便的产品，不得不说是超好用，但是它毕竟封装的有点厉害，对于个人成长来讲益处比较少，最终能获得的是快速构建好产品，查看api实现产品的定制化，基于他人的代码进行修改代码，原理完全理解不了，只能拿来用。如果是研究它的源码，收货还是能挺大。
  • 阐述利弊，大概就能知道这个东西到底该去怎么研究了。要研究源码，还是需要从运用层面先下手研究。

使用流程

  1. 用以下命令从GitHub仓库中直接克隆最新的项目模板

    1
    git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project

  2. 进入项目目录，安装依赖，启动项目

    1
    2
    3
    cd my-project
    npm install
    npm run start

  3. 接下来就可以借鉴该脚手架的优势之处了

  • 清晰的目录结构，具体可以去官网api查看。https://pro.ant.design/docs/getting-started-cn#%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84
  • 主题颜色可配置化，修改一处，全局变化。src/defaultSettings中的primaryColor
  • 网站布局可配置化。脚手架提供了两种，一种是左右结构，一种是上下结构的。
  • 菜单无需单独配置，只要配置好路由即可生成对应菜单。若是菜单有权限等问题，需要从服务端获取相应的菜单数据。只需要在model/menu中发起请求，返回正确格式的json数据就好。
  • ui组件不仅是视图比较完善且整体风格一致，其中还带有缓和的动态效果交互，已经将体验优化到了一定程度。
  • umi乌米是什么？一个让人开发起来更简单的webpack和路由的结合体，无非就是给你的webpack的初始化参数简化，路由的添加及优化自动化添加。如此当你需要添加一个功能页面时，你可能就只是跑一下umi g user。
  • 布局待理解

n. 感觉比较还可以优化的一些东西

  • 可以将redux中的state状态查看器内置于开发模式中，控制台可直观查看到state更新前和更新后的数据结果，而不需要去手动安装react-developer-tools。
  • 路由跳转为什么有直接router.push(‘/dashboard/anyParams’);是直接push写死的路由，而不是push到以别名来代替的东西，这个如果是多处使用跳转的化，会使代码的维护难道增大。