构建一个react + umi项目

2023-04-04 19:05| 来源: 网络整理| 查看: 265

前言：umi项目越来越受到越多人的喜爱，为什么会这个样子？那肯定是umi有自己强大的地方。比如内置了react、ant design、等插件不需要我们再手动的安装。

umi官方地址

一. 新建一个文件用于放置我们生成的umi项目然后执行

npm create @umijs/umi-app 会看到如下

Need to install the following packages: @umijs/[email protected] Ok to proceed? (y)

此时键入y即可随后会看到

Ok to proceed? (y) y npm WARN deprecated [email protected]: core-js@ { // Object.assign(initialState, { // salesgoodsList: salesGoods?.data, // allgoodsList: allGoods?.data, // }); // }); return initialState; }

在access.js/access.ts中引入

export default function access(initialState: any) { const { permissions } = initialState || {}; // menu上的值需要一个初始值,undefined会默认显示菜单 return { home: true, mainMenu1: true, childMenu1: true, childMenu2: false, childMenu3: false, mainMenu2: true, childMenu4: true, childMenu5: false, childMenu6: false, ...permissions, }; }

也可以在tsx页面中使用

import { useModel, useAccess } from 'umi'; const { initialState, loading, // getInitialState 是否处于 loading 状态，在首次获取到初始状态前，页面其他部分的渲染都会被阻止。loading 可用于判断 refresh 是否在进行中。 error, // 当运行时配置中，getInitialState throw Error 时，会将错误储存在 error 中。 refresh, // 重新执行 getInitialState 方法，并获取新数据。相当于刷新了一遍初始化数据，但是页面无感知。// refresh() setInitialState, // 手动设置 initialState 的值，手动设置完毕会将 loading 置为 false. // setInitialState({ ...initialState, allgoodsList: data }) } = useModel('@@initialState'); console.log('initialState', initialState); 或 const access = useAccess(); console.log('access', access);

注意：useAccess专用于获取权限信息，而使用useModel可以获取所有全局的变量 3-3. 配置多环境打包机制安装插件

npm install --save-dev cross-env

在config文件夹下新建config.dev.ts, config.prod.ts文件 config.dev.ts

export default { define: { 'process.env': { NODE_ENV: 'dev', }, } }

config.prod.ts

export default { define: { 'process.env': { NODE_ENV: 'prod', }, } }

package.json配置不同环境打包命令

"scripts": { "start": "umi dev", "build": "umi build", "build:dev": "cross-env NODE_ENV=dev umi build", "build:prod": "cross-env NODE_ENV=prod umi build", "postinstall": "umi generate tmp", "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'", "test": "umi-test", "test:coverage": "umi-test --coverage" }, 三. 安装一些插件协助我们开发生产环境去掉调试使用的console.log() 1-1 安装插件 2-2 在config.prod.ts中使用 # 安装 `babel-plugin-transform-remove-console` 插件 npm i -D babel-plugin-transform-remove-console import { defineConfig } from 'umi'; export default defineConfig({ // 配置是否让生成的文件包含 hash 后缀，通常用于增量发布和避免浏览器加载缓存。 hash: true, extraBabelPlugins: ['transform-remove-console'], define: { // 重点就是这个属性了，设置全局变量 // 在项目中，可以通过process.env.NODE_ENV 或者 // process.env.UMI_ENV 或者process.env.date得到对应环境的值 'process.env': { NODE_ENV: 'prod', UMI_ENV: 'prod', date: '2023-03-17', }, }, }); 使用less书写页面样式注意：umi已内置less直接使用即可无需安装 example: import lessStyles from './index.less'; import sassStyles from './index.sass'; import scssStyles from './index.scss'; export default function () { return Hello World

I am blue

I am red

; } 配置用于请求的代理在config.dev.ts中加入 proxy: { '/api': { target: 'http://jsonplaceholder.typicode.com/', changeOrigin: true, pathRewrite: { '^/api': '' }, }, }, 封装request用于发起真正的请求此篇文章尚未写完后续会将其补充完整

【本文地址】

公司简介

联系我们