第二章 single-spa 子应用搭建

558 阅读1分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动

前言

我们创建了微前端的根配置之后,我们就先创建一个子应用吧!

npm install -g vue
npm install -g @vue/cli-service-global(本次子应用是使用vue所以需要先安装vue...)
create-single-spa --moduleType app-parcel

创建我们的子应用

  1. 创建子应用名称
    image.png
  2. 子应用使用框架
    这里我们选用vue
    image.png
    3.识别名称
    image.png
    ps: 如果这里没有安装vue-cli,会出现如下报错
    image.png 4.是否需要使用淘宝镜像(按需选择吧!)

image.png
5.版本选择
这里使用vue2
image.png
运行完毕之后,项目结构如下
image.png
恭喜恭喜,你已经完成了一个大步骤了! 完毕之后我们运行一下

npm run serve

进入服务,是不是很期待vue项目启动的界面?那你可能要失望了!

image.png
会出现如下提示,大概意思是,微前端以“集成”模式运行,因为 standalone-single-spa-webpack-plugin 被禁用。这意味着它不能在不更改配置的情况下作为独立应用程序工作。不过别着急,我们运行的方式有问题,接下来我们要进行的根配置的修改息息相关! 如果你就需要看效果是否完毕的话,我们可以运行

npm run serve:standalone

直接启动服务!

总结

本章我们创建了一个叫navbar的应用,下一节我们要在我们弄好的根配置中进行引入了!

u=1073611648,831330028&fm=26&fmt=auto.webp