最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

从0到1-UMI快速上手(1)

XAMPP新闻 admin 2954浏览 0评论

开发环境搭建,这篇我会介绍怎么搭建umi项目
开发环境

UMI在Windows, Mac和Linux的表现都是一致的。你只需要在电脑上安装Node.js环境。
为了便于开发,你还需要一个文本编辑器来编写代码,可能你的电脑上已经安装了其他的文本编辑器,但这里我还是推荐使用VisualStudio Code。因为后续我们会使用配套的VisualStudio Code插件来提升开发效率,并且它还自带了一个命令行执行脚本。

第一步 安装Node.js

安装Node还是挺简单的,只需要到官网下载使用与自己系统的版本就可以了。
所有的安装都是“下一步”,就可以了。
如果你已经安装过Node,那么你可以跳过前一步。
接下来在终端/控制台窗口中运行命令node -v,来验证一下你正在运行 node 8.1x以上的版本

>node -v
v8.10.1
如果终端成功打印出node的版本号,就可以进入下一步了。

第二步 安装VisualStudio Code

还是官网下载,全部下一步。

使用umi
第一步 安装Umi
我们需要使用Umi来创建页面(umi g),并执行多种开发任务,比如测试(umi test)、打包(umi build)和开发(umi dev)等。
全局安装 Umi。
使用 npm 来安装Umi,请打开终端/控制台窗口,并输入下列命令:

npm install -g umi
推荐使用 yarn 来安装Umi,因为yarn对于多次执行安装的情况做了缓存,这个在我们前期,经常新建项目的时候,能够节省很多时间。

npm install -g yarn
命令行执行结束后,判断yarn是否安装成功

yarn -v
1.12.3
使用yarn安装Umi

yarn global add umi
命令行执行结束后,判断yarn是否安装成功

umi -v
2.3.2
第二步 安装 create-umi
yarn global add create-umi

success Installed “create-umi@0.7.0” with binaries:
– create-umi
✨ Done in 36.07s
create-umi主要是用来使用命令行创建umi相关的库或者项目。命令中打印success,应该就安装成功了,如果你还需要进一步确认,可以通过执行create-umi -v来打印create-umi的版本号。

第三步 使用create-umi新建项目
注意:第一个选项先选择project。这里的system指的是项目名,你可以输入任意的名字。
create-umi system
? Select the boilerplate type (Use arrow keys)
❯ project
ant-design-pro
plugin
block

? What functionality do you want to enable?
◉ antd
❯◉ dva
◯ code splitting
◯ dll
◯ hard source
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

转载请注明:XAMPP中文组官网 » 从0到1-UMI快速上手(1)

您必须 登录 才能发表评论!