初入umi遇到的问题(一)

1 篇文章 0 订阅

umi官方入门指南:https://umijs.org/guide/getting-started.html

当按照官方入门指南进行安装和环境配置的时候,使用yarn安装好umi后,检查umi版本号的时候,即umi -v,显示umi并不是内部或外部命令,然后使用npm安装,npm install -g umi,安装好后,检查umi版本,umi是可以识别的,但是版本号确实1.x版本,版本有些老。

为什么使用yarn安装好后,却检查不到umi命令,而npm却可以?当时想问题的时候并不是第一次就是这样想到问题的根源的,而是直接在搜索引擎中搜索umi不是内部或外部命令,结果搜索出了一大堆无关紧要的答案。

后来还是询问了过来人,过来人一针见血指出了问题,即yarn安装检测不到umi命令。解决方案贴上:http://www.easysb.cn/index.php/2017/06/04/11/,并对好心人进行感谢!

 

总结:

遇到问题,首先明确问题出在哪里,这很重要!

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
`micro-app` 是一种微前端解决方案,而 `umi` 是一个企业级前端应用框架,提供了非常完善的开发、打包和部署体系。在 `umi` 接入 `micro-app`,可以让我们更加方便地开发和维护微前端应用。 接入 `micro-app` 的基本步骤如下: 1. 在主应用安装 `qiankun` 包: ```bash yarn add qiankun ``` 2. 在主应用创建一个 `micro-app` 配置文件,例如 `micro-apps.js`,将需要接入的子应用注册到 `qiankun` : ```javascript import { registerMicroApps } from 'qiankun'; registerMicroApps([ { name: 'app1', entry: '//localhost:8001', container: '#subapp-container', activeRule: '/app1', }, { name: 'app2', entry: '//localhost:8002', container: '#subapp-container', activeRule: '/app2', }, ]); ``` 其,`name` 是子应用的名称,`entry` 是子应用的入口地址,`container` 是子应用的容器,`activeRule` 是用于匹配子应用路由的规则。 3. 在主应用的路由配置文件,为需要接入的子应用配置路由规则: ```javascript export default [ { path: '/', component: '@/layouts/index', routes: [ { path: '/app1', microApp: 'app1', }, { path: '/app2', microApp: 'app2', }, ], }, ]; ``` 其,`microApp` 是指定路由对应的子应用名称。 4. 在主应用的模板文件,添加子应用容器: ```html <div id="subapp-container"></div> ``` 这个容器会用于挂载子应用的内容。 5. 在需要接入的子应用,使用 `qiankun` 的 `start` 方法启动子应用: ```javascript import { start } from 'qiankun'; start(); ``` 6. 在需要接入的子应用,导出一个 `bootstrap` 函数、一个 `mount` 函数和一个 `unmount` 函数,用于子应用的生命周期管理: ```javascript export const bootstrap = () => { // 子应用初始化时调用 }; export const mount = () => { // 子应用渲染时调用 }; export const unmount = () => { // 子应用卸载时调用 }; ``` 以上就是在 `umi` 接入 `micro-app` 的基本步骤。需要注意的是,在开发模式下,需要同时启动主应用和子应用,才能看到微前端的效果。在生产环境,可以将所有子应用打包成独立的文件,再由主应用进行加载和管理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值