开发前的输入
Ant Design Pro 作为一个前端脚手架，默认读者已经懂了一些前端的基础知识，并且了解 umi 和 Ant Design, 如果你是纯粹的新手，第一次来跑项目建议读一下 新手需知。磨刀不误砍柴工，了解一些基础知识可以让学习曲线更加平滑。(以上文字引自Ant Design Pro 官网)
使用背景
近期由于想对现有后台前端进行改造升级,准备将搁置了很久很久的Antd(全称:Ant Design Pro,后面用缩写代替)捡起来,顺便看看更新到现在的情况,正好发现了Cloud Studio这个平台,也算是一个契机吧.
使用速览
我们登录了Cloud Studio后会进入如下界面,我们没有发现自己所需的目标模板,直接选择:All in One
Cloud Studio首页
根据Antd官网最新版的文档,走初始化流程
初始化,使用 npm
# 使用 npm
npm i @ant-design/pro-cli -g
pro create myapp 复制
选择 umi 的版本
? 🐂 使用 umi@4 还是 umi@3 ? (Use arrow keys)
❯ umi@4
umi@3 复制
如果选择了 umi@4 版本，暂时还不支持全量区块。
如果选择了 umi@3，还可以选择 pro 的模板，pro 是基础模板，只提供了框架运行的基本内容，complete 包含所有区块，不太适合当基础模板来进行二次开发
? 🚀 要全量的还是一个简单的脚手架? (Use arrow keys)
❯ simple
complete 复制
安装依赖：
$ cd myapp && tyarn
// 或
$ cd myapp && npm install 复制
实战
我这第一步就卡壳了...
先升级一下npm版本吧.
升级npm版本
我选择简单的脚手架好像还是翻车了???
简单的脚手架
安装依赖真的翻车了!
安装依赖
尝试启动项目
尝试启动项目
不服输的我又尝试创建几次不同的项目
再次尝试
尝试失败了,决定从官网上找历史版本再试一下,[手动狗头]可能新版本不兼容呢(前端菜鸡)
开始按照V4版本安装
安装v4版本
以下是操作流程图...
当然是选择npm
继续npm
现在是看到报错就慌...老天保佑!!!
看到错误就慌
安装依赖
启动
我**,跑起来了?不对啊,怎么跟官网的不太一样,是官网停止更新了,还是我这哪里又出问题了...
预览效果
附antd官方预览图
antd官方预览图
结语
初次尝试Cloud Studio,不确定是不是打开方式不对还是怎么着,总的来说没有达到自己的预期吧,但是能把项目跑起来,也是值得开心的.由于本人是前端菜鸟,可能打开方式不对,如果有官方大大能指正,感谢留言,希望Cloud Studio越来越好!