使用CLI创建初始化项目
第一步 安装 create-umi
$ yarn global add create-umi
...
success Installed "create-umi@0.6.0" with binaries:
- create-umi
✨ Done in 36.07s.
create-umi主要是用来使用命令行创建umi相关的库或者项目。命令中打印success,应该就安装成功了,如果你还需要进一步确认,可以通过执行create-umi -v来打印create-umi的版本号。
第二步 使用create-umi新建项目
$ cd 你的常用项目目录
$ create-umi hero
? What functionality do you want to enable? (Press <space> to select, <a> to tog
gle all, <i> to invert selection)
◉ antd
❯◉ dva
◯ code splitting
◯ dll
◯ hard source
这里的hero指的是项目名,你可以输入任意的名字。 create-umi提供的定制化能力,你可以通过空格键来选中你需要的功能,然后通过敲击回车键,来确认开始创建项目。这里我们选中antd和dva就好。
? What functionality do you want to enable? antd, dva
create package.json
create mock/.gitkeep
create src/assets/yay.jpg
create src/layouts/index.css
create src/layouts/index.js
create src/pages/index.css
create src/pages/index.js
create src/global.css
create .gitignore
create .editorconfig
create .env
create .umirc.js
create .eslintrc
create .prettierrc
create .prettierignore
create src/models/.gitkeep
create src/app.js
📋 Copied to clipboard, just use Ctrl+V
✨ File Generate Done
如果你的命令行打印的日志如上,那就说明你新建项目完成了,如果有其他的错误,可以确认一下,当前目录下是否存在hero文件夹。注意create-umi会自动帮你新建hero文件夹,所以你可以稍微注意一下。
第三步 切换到项目目录,安装依赖
$ cd hero
$ yarn
...这个过程需要一点时间
success Saved lockfile.
✨ Done in 170.43s.
看到命令行打印success,一般就是安装成功了,但是有时候因为一些网络问题,会出现丢包的情况。所以我们继续验证。
第四步 启动开发服务器
```bash $ yarn start ✔ success webpack compiled in 2s 743ms DONE Compiled successfully in 2750ms 10:24:03
App running at:
- Local: http://localhost:8000/ (copied to clipboard)
- Network: http://192.168.199.195:8000/ ``` 打印如上日志,说明项目初始化成功了。你可以通过浏览器访问http://localhost:8000/来访问页面。
还不错吧!😁
错误说明
如果,你的表现和上面的不同,你可以通过比对下面两个情况来修正。
1.打印如下
? message Probably:
/usr/local/bin/node /Users/xiaohuoni/Documents/***/***/node_module
s/umi/lib/scripts/realDev.js dev (pid 928)
in /Users/xiaohuoni/***/***/
Would you like to run the app on another port instead? (Y/n)
这个问题是因为,你已经开启过一个umi的开发服务,占用了默认的8000端口,你只要输入Y就可以,在另一个空闲端口上,开启umi服务。最终访问路径以输出日志为准。
2.其他情况
- 可能是node版本问题引起的,确认一下你的开发环境。
- 网络问题引起的,知道的,科学上网。或者使用国内源,全局安装tyarn。