UmiJS基础&UmiJS+Dva

2021-03-20 23:30:49 阅读：559 来源： 互联网

标签：src default Dva 基础 ts UmiJS export umi 路由

Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。

1️⃣了解Umi

你可以将Umi简单的理解为一个专注性能的类 next.js 前端框架，并通过约定、自动生成和解析代码等方式来辅助开发，减少我们开发者的代码量。

功能特点

开箱即用，Umi 内置了路由、构建、部署、测试等，仅需一个依赖即可上手开发。
完善的插件体系，Umi 实现了完整的生命周期，并使其插件化。此外还提供针对 React 的集成插件集。
完备路由，同时支持配置式路由和约定式路由，同时保持功能的完备性，比如动态路由、嵌套路由、权限路由等等。

技术收敛

《蚂蚁金服前端框架和工程化实践》

蚂蚁金服前端框架
在这里插入图片描述

Umi把大家常用的技术栈进行整理，收敛到一起，让大家只用 Umi 就可以完成 80% 的日常工作。

Bigfish 企业级前端开发框架，与常见的前端框架和工具不同，它从工程角度集成了各类功能，从初始化开发到最终上线整套技术方案，解决了前端开发经常遇到的前端技术栈整合配置麻烦、开发联调麻烦、前端资源发布上线麻烦三大痛点。

创建第一个Umi应用

# 使用 yarn 管理 npm 依赖 使用国内源 之后使用tyarn代替yarn即可
$ npm i yarn tyarn -g

# 创建目录
$ mkdir myapp 

# 进入目录
$ cd myapp

# 通过官方工具创建项目
$ yarn create @umijs/umi-app

# 安装依赖
$ yarn

# 启动开发
$ yarn start

启动页面效果和当前项目结构
在这里插入图片描述

.umi 临时文件

.umi 临时目录是整个 Umi 项目的发动机，你的入口文件、路由等等都在这里，这些是由 umi 内部插件及三方插件生成的。

+ .umi
  + core     # 内部插件生成
  + pluginA  # 外部插件生成
  + presetB  # 外部插件生成
  + umi.ts   # 入口文件

临时文件是 Umi 框架中非常重要的一部分，框架或插件会根据你的代码生成临时文件，这些原来需要放在项目里的脏乱差的部分都被藏在了这里。

你可以在这里调试代码，但不要在 .git 仓库里提交他，因为他的临时性，每次启动 umi 时都会被删除并重新生成。

修改配置换个页面布局

默认的脚手架内置了 @umijs/preset-react，包含布局、权限、国际化、dva、简易数据流等常用功能。

想使用 ant-design-pro 的布局

添加@ant-design/pro-layout依赖

yarm add @ant-design/pro-layout

编辑 .umirc.ts文件，加入布局配置项 +layout:{},

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  layout:{},
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
  fastRefresh: {},
});

在这里插入图片描述

部署发布

标签：src,default,Dva,基础,ts,UmiJS,export,umi,路由
来源： https://blog.csdn.net/wangfeijiu/article/details/114914712

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9