UmiJS项目创建、目录结构

最新推荐文章于 2023-10-14 22:26:02 发布

Zong_0915

最新推荐文章于 2023-10-14 22:26:02 发布

阅读量2.7k

点赞数

分类专栏： UmiJs

本文链接：https://blog.csdn.net/Zong_0915/article/details/115836459

版权

UmiJs 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

UmiJS项目创建、目录结构

一. 创建UmiJS项目

一. 创建UmiJS项目

1.运行命令：

npm create @umijs/umi-app

就能看到生成对应的目录结构：
在这里插入图片描述
2.安装依赖：npm install
3.启动项目：npm run start，启动后，页面如图：

4.可以尝试在对应组件中，添加一个按钮（UmiJs同时还把antd给引入了进来），如下：

5.保存后，发现页面实时的刷新：

6.项目发布：npm run build，运行成功后，会生成dist目录：
在这里插入图片描述
7.利用serve来运行发布出来的项目：（若没有该命令，npm i serve即可）

serve dist

效果如下：
在这里插入图片描述

1.1 目录结构

目录结构图如下：
在这里插入图片描述

mock目录：存储mock文件，此目录下所有的JS和TS文件都会被解析为mock文件。
src目录：源代码目录。
.umi目录：临时文件目录，比如入口文件、路由等，都会被压缩到这里。（这里的文件在umi dev 和 umi build的时候会被删除并重新生成）
pages目录：存放一些路由组件。
.editorconfig文件：编辑器配置文件。
app.ts(本项目中没有生成)：运行时的配置文件，可以在这里扩展运行时的能力，比如修改路由、修改render方法等。

1.2 Umi常用配置

umi配置主要在.umirc.ts文件中进行配置：

hash： 配置是否让生成的文件都包含hash后缀，通常用于增量发布和避免浏览器加载缓存。

配置如下：
在这里插入图片描述
此时重新执行命令：npm run build后观察dist目录下的文件：（确实，除了html文件以外的所有文件都带上了hash后缀）

base：设置路由前缀，通常用于部署到非根目录。 默认是/，和publicPath配置有一样的效果。

添加如下配置：

base: '/abc/'

然后重启项目，访问页面如下：
在这里插入图片描述
意思如下：

原本的路由是/和/users，当设置了base为xxx的时候，就可以通过/xxx/和/xxx/users访问之前的路由。

outputPath：取值为字符串，默认为dist，指定输出路径。 效果如下：
在这里插入图片描述

title：修改页面的标题，效果如下：
在这里插入图片描述
可以见到对应的标题发生了变化。

1.3 HTML模板

Umi可以修改HTML默认模板，创建src/pages/document.ejs，那么umi约定，如果这个文件存在，就会作为默认模板。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义模板文件</title>
</head>
<body>
    <h1>自定义模板！！</h1>
</body>
</html>

那么项目重新build后，运行，页面效果如下：
在这里插入图片描述

1.4 路由

umi里面都是单页面应用，页面地址的跳转都是在浏览器完成的，并不会重新请求服务端获取HTML，HTML只有在应用初始化的时候加载一次，所有页面由不同的组件构成，页面的切换实际上就是不同组件的切换，只需要在配置中把不同的路由路径和对应的组件关联上即可。

路由的配置在.umirc.ts文件的routes属性中配置：
在这里插入图片描述
然后添加一个user组件：

页面访问：http://localhost:8000/user即可：

若有嵌套路由，写法如下：

{
  path: '/user',
  component: '@/pages/user',
  title: '用户中心',
  routes: [
  	// path:对应的路由路径，component：要渲染的组件，title：此时的页面标题
    { path: '/user/center', component: '@/pages/user/center', title: '用户中心2' }
  ]
},

1.5 整合Mock数据

Mock数据是分立前后端开发的关键链路，通过预先跟服务器端口约定好的接口，模拟请求数据甚至逻辑，能够让前端开发独立自主，不会因为服务端的开发进度而阻塞。

umi约定/mock文件下下所有文件都是mock文件。

mock配置的开关在.umirc.ts文件中，只需要标识mock: true/false即可。

编写一个mock文件Demo：

export default {
    '/api/users': ['a', 'b'],
};

访问页面：http://localhost:8000/api/users既可以得到对应的数据：
在这里插入图片描述

Zong_0915

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
UmiJS项目创建、目录结构

UmiJS项目创建、目录结构及配置一. 创建UmiJS项目1.1 目录结构一. 创建UmiJS项目1.运行命令：npm create @umijs/umi-app就能看到生成对应的目录结构：2.安装依赖：npm install3.启动项目：npm run start，启动后，页面如图：4.可以尝试在对应组件中，添加一个按钮（UmiJs同时还把antd给引入了进来），如下：5.保存后，发现页面实时的刷新：6.项目发布：npm run build，运行成功后，会生成dist目录：
复制链接

扫一扫