微前端
业火之理
这个作者很懒,什么都没留下…
展开
-
【微前端】微前端笔记(三)
前言本篇手写简易single-spa流程首先初始化项目npm init -ynpm install rollup rollup-plugin-serve编写rollup.config.jsimport serve from "rollup-plugin-serve";export default { input: "./src/single-spa.js", output: { file: "./lib/umd/single-spa.js", format: "um原创 2020-08-16 10:17:54 · 354 阅读 · 0 评论 -
【微前端】微前端笔记(二)
前言第一篇的single-spa模式存在样式没有隔离,以及需要手动引入js的问题。样式隔离方案主应用与子应用解决样式隔离一般有以下几种方案:BEM 即约定项目前缀CSSMoudule 打包时生成不冲突的选择器shadowDom 真正意义上隔离css in jsshadow dom看一个例子:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" />原创 2020-08-14 22:36:25 · 555 阅读 · 0 评论 -
【微前端】微前端笔记(一)
前言第一篇是基于singlespa基本跑通功能。流程首先,需要创建子应用。vue create child-vue选择history路由。创建父应用:vue create parent-vue同样history路由。我们需要让父应用加载子应用。子应用安装single-spa-vue然后改写main.js ,需要导出3个方法,供父应用调用。import Vue from 'vue'import App from './App.vue'import router原创 2020-08-14 11:07:31 · 171 阅读 · 0 评论