小知识,大挑战!本文正在参与“程序员必备小知识”创作活动
前言
我们创建了微前端的根配置之后,我们就先创建一个子应用吧!
npm install -g vue
npm install -g @vue/cli-service-global(本次子应用是使用vue所以需要先安装vue...)
create-single-spa --moduleType app-parcel
创建我们的子应用
- 创建子应用名称
- 子应用使用框架
这里我们选用vue
3.识别名称
ps: 如果这里没有安装vue-cli,会出现如下报错
4.是否需要使用淘宝镜像(按需选择吧!)
5.版本选择
这里使用vue2
运行完毕之后,项目结构如下
恭喜恭喜,你已经完成了一个大步骤了!
完毕之后我们运行一下
npm run serve
进入服务,是不是很期待vue项目启动的界面?那你可能要失望了!
会出现如下提示,大概意思是,微前端以“集成”模式运行,因为 standalone-single-spa-webpack-plugin 被禁用。这意味着它不能在不更改配置的情况下作为独立应用程序工作。不过别着急,我们运行的方式有问题,接下来我们要进行的根配置的修改息息相关!
如果你就需要看效果是否完毕的话,我们可以运行
npm run serve:standalone
直接启动服务!
总结
本章我们创建了一个叫navbar的应用,下一节我们要在我们弄好的根配置中进行引入了!