怀安网站制作,做网站要实名吗,没有域名 怎么做网站链接,邢台新闻最新事件什么是 umi
umi 是由 dva 的开发者 云谦 编写的一个新的 React 开发框架。umi 既是一个框架也是一个工具#xff0c;可以将它简单的理解为一个专注性能的类 next.js 前端框架#xff0c;并通过约定、自动生成和解析代码等方式来辅助开发#xff0c;减少开发者的代码量。
u…什么是 umi
umi 是由 dva 的开发者 云谦 编写的一个新的 React 开发框架。umi 既是一个框架也是一个工具可以将它简单的理解为一个专注性能的类 next.js 前端框架并通过约定、自动生成和解析代码等方式来辅助开发减少开发者的代码量。
umi 是通用方案适用于现在几乎所有的 web 环境。
umi 的优势
umi 是一个专注性能的类 next.js 端框架它的优势是
内置大量的性能优化多端无缝支持容器和浏览器访问类 webpack 的插件机制针对 antd 和 dva 有友好的支持
umi 最显著的特点就是「文件即路由」——在 pages 文件夹下新建文件umi 将自动生成与文件路径对应的路由。在大部分其他前端框架中路由配置一直是一个很麻烦的事情而对于多人协作开发的项目公共的配置文件则可能面临着更多的冲突。
umi 的可扩展性
作者称“umi 有着类 webpack 般灵活的插件机制他就是一个架子”。 主要的 umi 项目不到 700 行代码umi 负责搭好骨架把框架的生命周期钩子暴露出来然后通过插件来丰富功能。
你可以用高达玩具类比 umi 的可扩展性刚入手的玩家可以根据说明书一步一步地组装出自己心爱的玩具对于高玩来说官方提供了一个骨架保证了高达的可动性然后你自己可以随意 DIY、任意地使用材料和设计方式。
刚接触前端的同学可以很好的完成公司的业务需求对前端有一定了解的同学可以随意地修改包括配置、编译、开发、模板、请求方式、数据流等等几乎所有能想到的前端工程化的内容都允许自定义。在一步步接触这些可配置项的时候你也会一步步对前端工程化更多的认识和理解。
umi 的性能
在项目性能方面 umi 已经做了很多优化包括构建产物的大小、执行效率、首屏加载、用户体验等方面但这些优化对于开发者是无感知的有时候你升级了一下插件版本整个项目可能就跟着优化了而不需要你进行其他调整。作者称“你只管写业务代码我会负责性能并且随着 umi 的迭代我保证你的应用会越来越快”。
umi 的特点
可扩展 Umi 实现了完整的生命周期并使其插件化Umi 内部功能也全由插件完成。此外还支持插件和插件集以满足功能和垂直域的分层需求。开箱即用 Umi 内置了路由、构建、部署、测试等仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集内涵丰富的功能完备路由同时支持配置式路由和约定式路由同时保持功能的完备性比如动态路由、嵌套路由、权限路由等等。兼容性低 不支持 IE 8 及以下浏览器不支持 React 16.8.0 以下的 React不支持Node 10 以下的环境
快速上手
环境准备
首先得有 node并确保 node 版本是 10.13 或以上。mac 下推荐使用 nvm 来管理 node 版本 $ node -vv10.13.0
推荐使用 yarn 管理 npm 依赖并使用国内源阿里用户使用内网源。
国内源
$ npm i yarn tyarn -g# 后面文档里的 yarn 换成 tyarn$ tyarn -v# 阿里内网源$ tnpm i yarn ali/yarn -g# 后面文档里的 yarn 换成 ayarn$ ayarn -v
脚手架
先找个地方建个空目录。
$ mkdir myapp cd myapp
通过官方工具创建项目
$ yarn create umijs/umi-app# 或 npx umijs/create-umi-appCopy: .editorconfigWrite: .gitignoreCopy: .prettierignoreCopy: .prettierrcWrite: .umirc.tsCopy: mock/.gitkeepWrite: package.jsonCopy: README.mdCopy: src/pages/index.lessCopy: src/pages/index.tsxCopy: tsconfig.jsonCopy: typings.d.ts
安装依赖
$ yarnyarn install v1.21.1[1/4] Resolving packages...success Already up-to-date.✨ Done in 0.71s.
启动项目 $ yarn startStarting the development server...✔ WebpackCompiled successfully in 17.84sDONE Compiled successfully in 17842ms 8:06:31 PMApp running at:- Local: http://localhost:8000 (copied to clipboard)- Network: http://192.168.12.34:8000
页面展示
