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

·  阅读 2517

开发环境搭建

开发环境

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
📋  Copied to clipboard, just use Ctrl+V
✨  File Generate Done
复制代码

如果你的命令行打印的日志如上,那就说明你新建项目完成了,如果有其他的错误,可以确认一下,当前目录下是否存在system文件夹。注意create-umi会自动帮你新建system文件夹,所以你可以稍微注意一下。

切换到项目目录,安装依赖

cd  system
yarn
...这个过程需要一点时间
success Saved lockfile.
✨  Done in 170.43s.
复制代码

看到命令行打印success,一般就是安装成功了,但是有时候因为一些网络问题,会出现丢包的情况。所以我们继续验证。

启动开发服务器

yarn start
yarn run v1.12.3
$ umi dev

✔ Webpack
  Compiled successfully in 5.28s

Starting the development server...

 DONE  Compiled successfully in 5289ms                                                                                  14:44:47


  App running at:
  - Local:   http://localhost:8000/ (copied to clipboard)
  - Network: http://192.168.124.10:8000/
复制代码

打印如上日志,说明项目初始化成功了。你可以通过浏览器访问http://localhost:8000/来访问页面。

第四步 项目结构

.
├── mock
├── package.json
├── src
│   ├── app.js
│   ├── assets
│   │   └── yay.jpg
│   ├── global.css
│   ├── layouts
│   │   ├── index.css
│   │   └── index.js
│   ├── models
│   └── pages
│       ├── index.css
│       └── index.js
├── .env
└── .umirc.js
复制代码

这里是我们当前项目的目录结构,使用create-umi创建的项目,是一个典型的umi项目结构,我们可以在umi约定使用的目录中,添加我们所需要的内容,达到快速实现功能需求的目的。

./mock/

约定 mock 目录里所有的 .js 文件会被解析为 mock 文件。 比如,新建 mock/users.js,内容如下:

export default {
  '/api/users': ['a', 'b'],
}
复制代码

然后在浏览器里访问 http://localhost:8000/api/users 就可以看到 ['a', 'b'] 了。

使用了mock.js后你在也不用苦苦的等后端开发完成接口了

./src/

我们约定了将项目的所有源码放在src目录里面,umi项目的大部分的工作都将在这里进行。当我们运行 umi dev 或者umi build 时,我们的代码会被转换成浏览器能够运行的正确的JavaScript版本,所以我们可以在这里使用TypeScript或者其他JavaScript新语法。

./src/layouts/index.js

约定式的全局布局,实际上是在路由外面套了一层。 比如,你的路由是:

[
  { path: '/', component: './pages/index' },
  { path: '/users', component: './pages/users' },
]
复制代码

如果有 layouts/index.js,那么路由则变为:

[
  { path: '/', component: './layouts/index', routes: [
    { path: '/', component: './pages/index' },
    { path: '/users', component: './pages/users' },
  ] }
]

复制代码

从组件角度可以简单的理解为如下关系:

<layout>
<page>1</page>
<page>2</page>
</layout>
复制代码

./src/pages/

约定 pages 下所有的 (j|t)sx? 文件即路由。在umi中可以使用约定式路由和配置式路由,在实际项目开发中,我个人偏向于使用,约定式路由。毕竟这是umi的主要特性之一。使用约定式路由,意味着不需要维护,可怕的路由配置文件。最常用的有基础路由和动态路由(用于详情页等,需要从url取参数的情况)

基础路由

假设 pages 目录结构如下

+ pages/
  + users/
    - index.js
    - list.js
  - index.js
复制代码

那么,umi 会自动生成路由配置如下:

[
  { path: '/', component: './pages/index.js' },
  { path: '/users/', component: './pages/users/index.js' },
  { path: '/users/list', component: './pages/users/list.js' },
]
复制代码

动态路由

umi 里约定,带 $ 前缀的目录或文件为动态路由。 比如以下目录结构:

+ pages/
  + $post/
    - index.js
    - comments.js
  + users/
    $id.js
  - index.js
复制代码

会生成路由配置如下:

[
  { path: '/', component: './pages/index.js' },
  { path: '/users/:id', component: './pages/users/$id.js' },
  { path: '/:post/', component: './pages/$post/index.js' },
  { path: '/:post/comments', component: './pages/$post/comments.js' },
]
复制代码

./src/pages/404.js

当访问的路由地址不存在时,会自动显示404 页面。只有build之后生效。调试的时候可以访问 /404 。

./src/pages/document.ejs

有这个文件时,会覆盖默认的 HTML 模板。需至少包含以下代码,

<div id="root"></div>
复制代码

常用于需要设置网站名称,增加meta,增加头部js

./src/pages/.umi/

这是 umi dev 时生产的临时目录,默认包含 umi.js 和 router.js,有些插件也会在这里生成一些其他临时文件。可以在这里做一些验证,但请不要直接在这里修改代码,umi 重启或者 pages 下的文件修改都会重新生成这个文件夹下的文件。

./src/pages/.umi-production/

同 src/pagers/.umi,但是是在 umi build 时生成的,会在 umi build 执行完自动删除。

文件名后缀.test.js 和 .e2e.js

测试文件,umi test 会查找所有的 .(test|e2e).(j|t)s 文件跑测试。

./src/global.(j|t)sx?

在入口文件最前面被自动引入,可以考虑在此加入 polyfill。umi区别于其他前端框架,没有显示的程序主入口,如src/app.js或src/index.js,所以在引用某些模块的时候,如果模块功能要求在程序主入口添加代码时,你就可以写到这个文件。

./src/global.(css|less|sass|scss)

这个文件不走 css modules,自动被引入,可以写一些全局样式,或者做一些样式覆盖。

.umirc.js 和 ./config/config.js

umi 的配置文件,二选一。当两者同时存在时,优先使用.umirc.js。

.env

环境变量,比如

BROWSER=none
复制代码

准备工作就是这些,接下来就是实际开发了

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改