ToB企服应用市场:ToB评测及商务社交产业平台

标题: 通过Umijs从0到1搭建一个React项目 [打印本页]
作者: 徐锦洪    时间: 2024-8-30 02:31
标题: 通过Umijs从0到1搭建一个React项目
有一阵时间没写react了，今天通过umi搭建一个demo项目复习一下react；umi是一个可扩展的企业级前端应用框架，在react市场中还是比力火的一个框架。
Umi官方文档：Umi 介绍 (umijs.org)
一、构建项目。

1、安装包管理工具。

官方保举利用pnpm，我也一直在利用pnpm，如果没有请实行以下命令自行安装。
  1. npm install -g pnpm
复制代码
2、构建项目。

根据官方文档的说明，我们在已经创建好的项目文件下打开终端，输入以下命令创建umi项目
  1. pnpm dlx create-umi@latest
复制代码
根据提示一步一步选择想要的模板范例即可，我选择了Simple App,pnpm,以及taobao镜像源。


3、启动项目

上面实行完成后，我们必要启动项目，直接输入以下命令即可启动项目
  1. pnpm start
复制代码

点击链接即可看到我们以及搭建好的项目了。

二、引入依赖插件

umi的项目创建好就会自动下载好node_modules依赖包，但是像UI库这类的还是没有的，我们还是必要去手动安装下载。
1、UI组件库。

我以antd为例进行下载，实行以下命令。
  1. pnpm install antd
复制代码
安装完成后直接在页面里导入antd组件即可，非常简单，你也可以利用umi插件里的antd


2、网络哀求

你可以直接下载哀求库，比方axios；但这里可以利用umi官方的插件，在插件里也有哀求插件，实行以下命令下载插件。
详细文档:哀求 (umijs.org)
  1. pnpm add -D @umijs/plugins
复制代码
引入插件，打开.umirc.ts或者config.ts(可以先看第三部门)，将对应的插件引入，我这里直接引入了三个插件，antd，request，model
  1. //config.ts
  3. import { defineConfig } from "umi";
  4. import routers from "./routers";
  5. const { UMI_ENV } = process.env; // 打包环境变量
  6. export default defineConfig({
  7.     routes: routers,
  8.     npmClient: 'pnpm',
  9.     publicPath: "/",
  10.     plugins:['@umijs/plugins/dist/antd', '@umijs/plugins/dist/request','@umijs/plugins/dist/model'],
  11.     antd: {},
  12.     model: {},
  13.     request: {},
  14. });
  15. console.log(UMI_ENV)
复制代码
利用
  1. import {request} from '@umijs'
  3. let url = '请求地址'
  4. let options ={
  5.     method: 'get',
  6.     params: {},
  7.     url: url
  8. }
  9. export const requestFun = async () =>{
  10.     return await request(url,options)
  11. }
复制代码
3、状态管理(数据共享)

一样平常来说在react中经常利用redux进行状态管理，但是在umi中保举一种数据流model模块化管理。
详细文档：数据流 (umijs.org)
在plugins中导入'@umijs/plugins/dist/model'插件，在项目中创建一个models目录，在目录下创建组件对应的一个文件，例子如下

在对应的文件下用useModel引入model的名字，就可以访问model里的数据和方法了。

三、多情况配置。

在开发过程中，我们必要多种情况，开发情况、测试情况、以及生产情况等，那么则必要我们进行配置不同的情况。
首先我们在目录中找到.umirc.ts文件，这个文件是umi的情况配置文件，我们盼望可以进行多情况管理，则这个文件就不必要了，我们必要在根目录下创建config目录创建config配置文件，由于config配置文件没有.umirc.ts优先级高，则必要将.umirc.ts删掉。

1、创建config目录。


在目录下创建config.ts、config.dev.ts、config.pro.ts、routers.ts文件
  1. //config.ts
  3. import { defineConfig } from "umi";
  4. import routers from "./routers";
  5. const { UMI_ENV } = process.env; // 打包环境变量
  6. export default defineConfig({
  7.     routes: routers,
  8.     npmClient: 'pnpm',
  9.     publicPath: "/",
  10. });
  11. console.log(UMI_ENV)
复制代码
  1. //config.dev.ts
  3. import { defineConfig } from "umi";
  4. const { UMI_ENV } = process.env; // 打包环境变量
  5. export default defineConfig({
  6.     define:{
  7.         UMI_ENV:UMI_ENV,
  8.         BASE_SERVER:'开发环境'
  9.     }
  10. });
复制代码
  1. //config.pro.ts
  3. import { defineConfig } from "umi";
  4. const { UMI_ENV } = process.env; // 打包环境变量
  5. export default defineConfig({
  6.     define:{
  7.         UMI_ENV:UMI_ENV,
  8.         BASE_SERVER:'生产环境'
  9.     }
  10. });
复制代码
  1. //routers.ts
  3. const routes=[
  4.     { path: "/", component: "index" },
  5.     { path: "/docs", component: "docs" },
  6. ]
  7. export default routes
复制代码
2、编写实行脚本

在编写脚本之前，我们还必要下载cross-env情况变量管理工具
  1. pnpm install cross-env -D
复制代码
然后在package.json文件中编写实行脚本：
四、github所在

https://github.com/banyan666/Demo-react
 



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4