Ant Design Pro 使用之 CodeSandbox 模版

正文

最近在用 Ant Design Pro 做前端框架，试用的时候乍一看各种组件布局挺齐全的，有种站在巨人肩膀上的感觉。不过，开始开发之后就有点懵了，因为太丰富了反而思路受到限制，改起来有点无从下手 ( 比如 权限和菜单 这块内容耦合就挺严重的 ) ，各种代码混在一起对于初入者来说完全分不清哪些是有用的哪些是没用的。所以，经过一番研究决定还是应该换个使用姿势：

• 单独新建项目从头搭建，而不是在 antd pro 原有代码的基础上开发。

  目前的 pro@v4 已经基本上只剩一个框架了，按官方步骤创建即可。

• antd pro 和 antd 一样以 组件包 的形式引入 ( 参考 ) ，直接使用其中的业务组件，也方便后续的升级。另外也可以借鉴其现有的 布局效果 ，就不必花太多的精力在过细的样式调整上了。

• 按照 V4 版本 中提出的区块 ( 物料 ) 思想，按模块划分页面 ( 每个页面独立开发调试 ) ，结构更加清晰，减小耦合，也方便已有页面的复用和扩展，开发新项目的时候就可以快速剔除无关内容。

按照上面的思路我对原项目做了一个精简，整理出一个新项目的模版，效果可以看 这里 ，使用 node 作为基础模版，这样 CodeSandbox 会在后台建立容器来跑代码，就可以和本地开发有一样的体验了。 CodeSandbox 上原先也没有 antd pro 的模版，现在小伙伴们可以基于这个模版来复现问题了。

• 模版地址：https://codesandbox.io/s/pk76nllkn7

  考虑到编译构建和网络因素，初次加载会比较慢，请耐心等待

转载请注明出处：https://www.jianshu.com/p/ed9fee06a8f3