【玩转 Cloud Studio】初体验之Ant Design Pro

开发前的输入

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越来越好!