├── sub-react ├── .env.production ├── .env.development ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── src │ ├── public-path.js │ ├── setupTests.js │ ├── App.test.js │ ├── index.css │ ├── App.js │ ├── App.css │ ├── index.js │ └── logo.svg ├── .gitignore ├── config-overrides.js ├── package.json └── README.md ├── global-state ├── .gitignore ├── .npmignore ├── src │ ├── index.js │ └── store │ │ └── index.js └── package.json ├── .gitignore ├── sub-vue ├── .browserslistrc ├── babel.config.js ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── assets │ │ └── logo.png │ ├── views │ │ ├── About.vue │ │ └── Home.vue │ ├── store │ │ └── index.js │ ├── router │ │ └── index.js │ ├── App.vue │ ├── main.js │ └── components │ │ └── HelloWorld.vue ├── .gitignore ├── .eslintrc.js ├── README.md ├── vue.config.js └── package.json ├── main ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── assets │ │ └── logo.png │ ├── store.js │ ├── micro-app.js │ ├── main.js │ └── App.vue ├── .env.development ├── babel.config.js ├── .env.production ├── .gitignore ├── vue.config.js ├── README.md └── package.json └── package.json /sub-react/.env.production: -------------------------------------------------------------------------------- 1 | PUBLIC_URL=/subapp/sub-react -------------------------------------------------------------------------------- /global-state/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /global-state/.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | 4 | dist 5 | 6 | 7 | -------------------------------------------------------------------------------- /sub-vue/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /sub-react/.env.development: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | PORT=5502 3 | PUBLIC_URL=/ 4 | -------------------------------------------------------------------------------- /main/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuzhiquan/qiankun/HEAD/main/public/favicon.ico -------------------------------------------------------------------------------- /main/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuzhiquan/qiankun/HEAD/main/src/assets/logo.png -------------------------------------------------------------------------------- /sub-vue/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/cli-plugin-babel/preset"] 3 | }; 4 | -------------------------------------------------------------------------------- /main/.env.development: -------------------------------------------------------------------------------- 1 | VUE_APP_SUB_VUE=http://localhost:5501 2 | VUE_APP_SUB_REACT=http://localhost:5502 3 | -------------------------------------------------------------------------------- /sub-react/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /sub-vue/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuzhiquan/qiankun/HEAD/sub-vue/public/favicon.ico -------------------------------------------------------------------------------- /sub-vue/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuzhiquan/qiankun/HEAD/sub-vue/src/assets/logo.png -------------------------------------------------------------------------------- /global-state/src/index.js: -------------------------------------------------------------------------------- 1 | import globalRegister from './store' 2 | 3 | export { 4 | globalRegister, 5 | } 6 | -------------------------------------------------------------------------------- /main/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /sub-react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuzhiquan/qiankun/HEAD/sub-react/public/favicon.ico -------------------------------------------------------------------------------- /sub-react/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuzhiquan/qiankun/HEAD/sub-react/public/logo192.png -------------------------------------------------------------------------------- /sub-react/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuzhiquan/qiankun/HEAD/sub-react/public/logo512.png -------------------------------------------------------------------------------- /sub-vue/src/views/About.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /main/.env.production: -------------------------------------------------------------------------------- 1 | VUE_APP_SUB_VUE=http://localhost:5050/subapp/sub-vue/ 2 | VUE_APP_SUB_REACT=http://localhost:5050/subapp/sub-react/ 3 | -------------------------------------------------------------------------------- /sub-vue/src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import Vuex from "vuex"; 3 | 4 | Vue.use(Vuex); 5 | 6 | export default new Vuex.Store({ 7 | state: {}, 8 | mutations: {}, 9 | actions: {}, 10 | modules: {} 11 | }); 12 | -------------------------------------------------------------------------------- /sub-react/src/public-path.js: -------------------------------------------------------------------------------- 1 | if (window.__POWERED_BY_QIANKUN__) { 2 | // eslint-disable-next-line 3 | __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; 4 | //__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; 5 | } 6 | -------------------------------------------------------------------------------- /sub-react/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /global-state/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "global-state", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "wuzhiquan", 10 | "license": "MIT" 11 | } 12 | -------------------------------------------------------------------------------- /sub-react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | import React from 'react'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /main/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /main/vue.config.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: wuzhiquan 3 | * @Date: 2020-11-25 4 | */ 5 | module.exports = { 6 | devServer: { 7 | port: 5500, 8 | }, 9 | chainWebpack: config => { 10 | config.plugin('html') 11 | .tap((args) => { 12 | args[0].title = 'qiankun-wuzhiquan' 13 | return args 14 | }) 15 | } 16 | }; 17 | -------------------------------------------------------------------------------- /sub-vue/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /main/README.md: -------------------------------------------------------------------------------- 1 | # main 2 | 3 | ## Project setup 4 | ``` 5 | yarn install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | yarn serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | yarn build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | yarn lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /sub-react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /sub-vue/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"], 7 | parserOptions: { 8 | parser: "babel-eslint" 9 | }, 10 | rules: { 11 | "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", 12 | "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off" 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /sub-vue/src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | -------------------------------------------------------------------------------- /sub-vue/README.md: -------------------------------------------------------------------------------- 1 | # sub-vue 2 | 3 | ## Project setup 4 | ``` 5 | yarn install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | yarn serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | yarn build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | yarn lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /sub-react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /sub-vue/vue.config.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: wuzhiquan 3 | * @Date: 2020-11-25 4 | */ 5 | const port = 5501; 6 | const { name } = require("../package.json"); 7 | module.exports = { 8 | publicPath: "./", 9 | transpileDependencies: ["global-state"], 10 | devServer: { 11 | port, 12 | headers: { 13 | "Access-Control-Allow-Origin": "*" 14 | } 15 | }, 16 | configureWebpack: { 17 | output: { 18 | // 把子应用打包成 umd 库格式 19 | library: `${name}-[name]`, 20 | libraryTarget: "umd", 21 | jsonpFunction: `webpackJsonp_${name}` 22 | } 23 | } 24 | }; 25 | -------------------------------------------------------------------------------- /sub-react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /sub-react/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import logo from './logo.svg'; 3 | import './App.css'; 4 | 5 | function App() { 6 | return ( 7 |
8 |
9 | logo 10 |

11 | Edit src/App.js and save to reload. 12 |

13 | 19 | Learn React! 20 | 21 |
22 |
23 | ); 24 | } 25 | 26 | export default App; 27 | -------------------------------------------------------------------------------- /main/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /sub-vue/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /sub-react/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /sub-vue/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import VueRouter from "vue-router"; 3 | import Home from "../views/Home.vue"; 4 | import { name } from "../../package.json"; 5 | 6 | Vue.use(VueRouter); 7 | 8 | let prefix = window.__POWERED_BY_QIANKUN__ ? `/micrApp/${name}` : "/"; 9 | 10 | const routes = [ 11 | { 12 | path: prefix, 13 | name: "Home", 14 | component: Home 15 | }, 16 | { 17 | path: `${prefix}/about`, 18 | name: "About", 19 | // route level code-splitting 20 | // this generates a separate chunk (about.[hash].js) for this route 21 | // which is lazy-loaded when the route is visited. 22 | component: () => 23 | import(/* webpackChunkName: "about" */ "../views/About.vue") 24 | } 25 | ]; 26 | 27 | export default routes; 28 | -------------------------------------------------------------------------------- /main/src/store.js: -------------------------------------------------------------------------------- 1 | import { initGlobalState } from 'qiankun' 2 | import Vue from 'vue' 3 | 4 | // 父应用的初始state 5 | // Vue.observable是为了让initialState变成可响应：https://cn.vuejs.org/v2/api/#Vue-observable。 6 | const initialState = Vue.observable({ 7 | user: { 8 | name: 'wuzhiquan' 9 | } 10 | }) 11 | 12 | const actions = initGlobalState(initialState) 13 | 14 | actions.onGlobalStateChange((newState, prev) => { 15 | // state: 变更后的状态; prev 变更前的状态 16 | console.log('main change', newState, prev) 17 | 18 | for (const key in newState) { 19 | initialState[key] = newState[key] 20 | } 21 | }) 22 | 23 | // 定义一个获取state的方法下发到子应用 24 | actions.getGlobalState = (key) => { 25 | // 有key，表示取globalState下的某个子级对象 26 | // 无key，表示取全部 27 | 28 | return key ? initialState[key] : initialState 29 | } 30 | 31 | export default actions 32 | -------------------------------------------------------------------------------- /sub-react/config-overrides.js: -------------------------------------------------------------------------------- 1 | const { name } = require('./package.json'); 2 | 3 | module.exports = { 4 | webpack: function override(config, env) { 5 | config.entry = config.entry.filter( 6 | (e) => !e.includes('webpackHotDevClient') 7 | ); 8 | 9 | config.output.library = `${name}-[name]`; 10 | config.output.libraryTarget = 'umd'; 11 | config.output.jsonpFunction = `webpackJsonp_${name}`; 12 | return config; 13 | }, 14 | devServer: (configFunction) => { 15 | return function (proxy, allowedHost) { 16 | const config = configFunction(proxy, allowedHost); 17 | config.open = false; 18 | config.hot = false; 19 | config.headers = { 20 | 'Access-Control-Allow-Origin': '*', 21 | }; 22 | // Return your customised Webpack Development Server config. 23 | return config; 24 | }; 25 | }, 26 | }; 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "qiankun", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "install": "npm-run-all --serial install:*", 8 | "install:main": "cd main && yarn install", 9 | "install:sub-vue": "cd sub-vue && yarn install", 10 | "install:sub-react": "cd sub-react && yarn install", 11 | "start": "npm-run-all --parallel start:*", 12 | "start:sub-react": "cd sub-react && yarn start", 13 | "start:sub-vue": "cd sub-vue && yarn start", 14 | "start:main": "cd main && yarn start", 15 | "build": "npm-run-all --serial build:*", 16 | "build:main": "cd main && yarn build", 17 | "build:sub-vue": "cd sub-vue && yarn build", 18 | "build:sub-react": "cd sub-react && yarn build", 19 | "test": "echo \"Error: no test specified\" && exit 1" 20 | }, 21 | "author": "wuzhiquan", 22 | "license": "ISC", 23 | "devDependencies": { 24 | "npm-run-all": "^4.1.5" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /sub-react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sub-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-app-rewired start", 15 | "build": "react-app-rewired build", 16 | "test": "react-app-rewired test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": [ 21 | "react-app", 22 | "react-app/jest" 23 | ] 24 | }, 25 | "browserslist": { 26 | "production": [ 27 | ">0.2%", 28 | "not dead", 29 | "not op_mini all" 30 | ], 31 | "development": [ 32 | "last 1 chrome version", 33 | "last 1 firefox version", 34 | "last 1 safari version" 35 | ] 36 | }, 37 | "devDependencies": { 38 | "react-app-rewired": "^2.1.6" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /sub-vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sub-vue", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint", 9 | "start": "npm run serve" 10 | }, 11 | "dependencies": { 12 | "core-js": "^3.6.5", 13 | "global-state": "file:../global-state", 14 | "vue": "^2.6.11", 15 | "vue-router": "^3.2.0", 16 | "vuex": "^3.4.0" 17 | }, 18 | "devDependencies": { 19 | "@vue/cli-plugin-babel": "~4.5.0", 20 | "@vue/cli-plugin-eslint": "~4.5.0", 21 | "@vue/cli-plugin-router": "~4.5.0", 22 | "@vue/cli-plugin-vuex": "~4.5.0", 23 | "@vue/cli-service": "~4.5.0", 24 | "@vue/eslint-config-prettier": "^6.0.0", 25 | "babel-eslint": "^10.1.0", 26 | "eslint": "^6.7.2", 27 | "eslint-plugin-prettier": "^3.1.3", 28 | "eslint-plugin-vue": "^6.2.2", 29 | "prettier": "^1.19.1", 30 | "sass": "^1.26.5", 31 | "sass-loader": "^8.0.2", 32 | "vue-template-compiler": "^2.6.11" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /sub-react/src/index.js: -------------------------------------------------------------------------------- 1 | import './public-path' 2 | import React from 'react'; 3 | import ReactDOM from 'react-dom'; 4 | import './index.css'; 5 | import App from './App'; 6 | 7 | function render() { 8 | ReactDOM.render( 9 | , 10 | document.getElementById('root') 11 | ); 12 | } 13 | 14 | if (!window.__POWERED_BY_QIANKUN__) { 15 | render(); 16 | } 17 | /** 18 | * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。 19 | * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。 20 | */ 21 | export async function bootstrap() { 22 | console.log('react app bootstraped'); 23 | } 24 | /** 25 | * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法 26 | */ 27 | export async function mount(props) { 28 | render(); 29 | } 30 | /** 31 | * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例 32 | */ 33 | export async function unmount() { 34 | ReactDOM.unmountComponentAtNode(document.getElementById('root')); 35 | } 36 | /** 37 | * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效 38 | */ 39 | export async function update(props) { 40 | console.log('update props', props); 41 | } 42 | -------------------------------------------------------------------------------- /main/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "main", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint", 9 | "start": "npm run serve" 10 | }, 11 | "dependencies": { 12 | "core-js": "^3.6.5", 13 | "qiankun": "^2.3.2", 14 | "vue": "^2.6.11" 15 | }, 16 | "devDependencies": { 17 | "@vue/cli-plugin-babel": "~4.5.0", 18 | "@vue/cli-plugin-eslint": "~4.5.0", 19 | "@vue/cli-service": "~4.5.0", 20 | "babel-eslint": "^10.1.0", 21 | "custom-event-polyfill": "^1.0.7", 22 | "eslint": "^6.7.2", 23 | "eslint-plugin-vue": "^6.2.2", 24 | "vue-template-compiler": "^2.6.11", 25 | "whatwg-fetch": "^3.5.0" 26 | }, 27 | "eslintConfig": { 28 | "root": true, 29 | "env": { 30 | "node": true 31 | }, 32 | "extends": [ 33 | "plugin:vue/essential", 34 | "eslint:recommended" 35 | ], 36 | "parserOptions": { 37 | "parser": "babel-eslint" 38 | }, 39 | "rules": {} 40 | }, 41 | "browserslist": [ 42 | "> 1%", 43 | "last 2 versions", 44 | "not dead" 45 | ] 46 | } 47 | -------------------------------------------------------------------------------- /main/src/micro-app.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 注意name应与子项目的package里的name字段保持一致，activeRule后面的地址与name保持一致。这个地址不管在生产环境还是开发环境，访问子项目时的地址都不会变的，但是子项目的访问地址entry会随环境变化。比如本例vue子项目在开发环境地址是http://localhost:5501，生产环境是http://localhost:5050/subapp/sub-vue/#/ 3 | * 增加micrApp前缀主要是给路由守卫做判断，如果以micrApp开头则表示是子项目 4 | * VUE_APP_SUB_VUE/VUE_APP_SUB_REACT： 5 | * 开发环境是子项目运行的地址加端口（注意留意子项目的publicPath，需要保持一致。本例子是纯IP地址加端口，publicPath应为./，vue项目在vue.config.js中配置，react项目在.env.development中配置） 6 | * 生产环境下需要注意要和发布地址保持一致。本例子发布需要在main中创建subapp，在subapp下分别在创建sub-vue和sub-react，所以地址为http://localhost:5050/subapp/sub-vue/格式 7 | */ 8 | import store from './store' 9 | const microApps = [ 10 | { 11 | name: 'sub-vue', 12 | entry: process.env.VUE_APP_SUB_VUE, 13 | activeRule: '/#/micrApp/sub-vue' 14 | }, 15 | { 16 | name: 'sub-react', 17 | entry: process.env.VUE_APP_SUB_REACT, 18 | activeRule: '/#/micrApp/sub-react' 19 | } 20 | ] 21 | 22 | const apps = microApps.map(item => { 23 | return { 24 | ...item, 25 | container: '#subapp-viewport', // 子应用挂载的div 26 | props: { 27 | routerBase: item.activeRule, // 下发基础路由 28 | getGlobalState: store.getGlobalState, // 下发getGlobalState方法 29 | } 30 | } 31 | }) 32 | 33 | export default apps 34 | -------------------------------------------------------------------------------- /sub-vue/src/App.vue: -------------------------------------------------------------------------------- 1 | 12 | 35 | 36 | 58 | -------------------------------------------------------------------------------- /main/src/main.js: -------------------------------------------------------------------------------- 1 | import 'whatwg-fetch'; 2 | import 'custom-event-polyfill'; // 如果还报错，需要引入这个 3 | import 'core-js/stable/promise'; 4 | import 'core-js/stable/symbol'; 5 | import 'core-js/stable/string/starts-with'; 6 | import 'core-js/web/url'; 7 | 8 | import Vue from 'vue' 9 | import App from './App.vue' 10 | import { registerMicroApps, start, setDefaultMountApp } from 'qiankun' 11 | import microApps from './micro-app' 12 | 13 | Vue.config.productionTip = false 14 | 15 | new Vue({ 16 | render: h => h(App), 17 | }).$mount('#app') 18 | 19 | const config = { 20 | beforeLoad: [ 21 | app => { 22 | console.log("%c before load", 23 | 'background:#0f0 ; padding: 1px; border-radius: 3px; color: #fff', 24 | app); 25 | } 26 | ], // 挂载前回调 27 | beforeMount: [ 28 | app => { 29 | console.log("%c before mount", 30 | 'background:#f1f ; padding: 1px; border-radius: 3px; color: #fff', 31 | app); 32 | } 33 | ], // 挂载后回调 34 | afterUnmount: [ 35 | app => { 36 | console.log("%c after unload", 37 | 'background:#a7a ; padding: 1px; border-radius: 3px; color: #fff', 38 | app); 39 | } 40 | ] // 卸载后回调 41 | } 42 | 43 | registerMicroApps(microApps, config) 44 | // 默认打开第一个子项目 45 | setDefaultMountApp(microApps[0].activeRule) 46 | start() 47 | -------------------------------------------------------------------------------- /global-state/src/store/index.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * 4 | * @param {vuex实例} store 5 | * @param {qiankun下发的props} props 6 | */ 7 | function globalRegister (store, props = {}) { 8 | 9 | if (!store || !store.hasModule) { 10 | return; 11 | } 12 | 13 | // 获取初始化的state 14 | const initState = props.getGlobalState && props.getGlobalState() || { 15 | menu: [], 16 | user: {} 17 | }; 18 | 19 | // 将父应用的数据存储到子应用中，命名空间固定为global 20 | if (!store.hasModule('global')) { 21 | const globalModule = { 22 | namespaced: true, 23 | state: initState, 24 | actions: { 25 | // 子应用改变state并通知父应用 26 | setGlobalState ({ commit }, payload) { 27 | commit('setGlobalState', payload); 28 | commit('emitGlobalState', payload); 29 | }, 30 | // 初始化，只用于mount时同步父应用的数据 31 | initGlobalState ({ commit }, payload) { 32 | commit('setGlobalState', payload); 33 | }, 34 | }, 35 | mutations: { 36 | setGlobalState (state, payload) { 37 | // eslint-disable-next-line 38 | state = Object.assign(state, payload); 39 | }, 40 | // 通知父应用 41 | emitGlobalState (state) { 42 | if (props.setGlobalState) { 43 | props.setGlobalState(state); 44 | } 45 | }, 46 | }, 47 | }; 48 | store.registerModule('global', globalModule); 49 | } else { 50 | // 每次mount时，都同步一次父应用数据 51 | store.dispatch('global/initGlobalState', initState); 52 | } 53 | }; 54 | 55 | export default globalRegister; 56 | -------------------------------------------------------------------------------- /sub-vue/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "./App.vue"; 3 | import routes from "./router"; 4 | import store from "./store"; 5 | import { globalRegister } from "global-state"; 6 | import VueRouter from "vue-router"; 7 | import { name } from "../package.json"; 8 | 9 | Vue.config.productionTip = false; 10 | 11 | let install = null; 12 | function render(props = {}) { 13 | const { container } = props; 14 | const router = new VueRouter({ 15 | // base: window.__POWERED_BY_QIANKUN__ ? routerBase : process.env.BASE_URL, 16 | // mode: "history", 17 | routes 18 | }); 19 | if (window.__POWERED_BY_QIANKUN__) { 20 | router.beforeEach((to, from, next) => { 21 | if (!to.path.includes("/micrApp")) { 22 | next({ path: `/micrApp/${name}${to.path}` }); 23 | } else { 24 | next(); 25 | } 26 | }); 27 | } 28 | install = new Vue({ 29 | router, 30 | store, 31 | render: h => h(App) 32 | }).$mount(container ? container.querySelector("#app") : "#app"); 33 | } 34 | if (window.__POWERED_BY_QIANKUN__) { 35 | // eslint-disable-next-line 36 | __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; 37 | } else { 38 | // 这里是子应用独立运行的环境，实现子应用的登录逻辑 39 | // 独立运行时，也注册一个名为global的store module 40 | globalRegister(store); 41 | // 模拟登录后，存储用户信息到global module 42 | const userInfo = { name: "我是独立运行时名字叫张三" }; // 假设登录后取到的用户信息 43 | store.commit("global/setGlobalState", { user: userInfo }); 44 | render(); 45 | } 46 | 47 | export async function bootstrap() {} 48 | 49 | export async function mount(props) { 50 | console.log("[vue] props from main framework", props); 51 | globalRegister(store, props); 52 | render(props); 53 | } 54 | export async function unmount() { 55 | install.$destroy(); 56 | install.$el.innerHTML = ""; // 子项目内存泄露问题 57 | install = null; 58 | } 59 | -------------------------------------------------------------------------------- /sub-react/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /main/src/App.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 48 | 49 | 81 | -------------------------------------------------------------------------------- /sub-react/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /sub-react/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `yarn start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.\ 15 | You will also see any lint errors in the console. 16 | 17 | ### `yarn test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `yarn build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `yarn eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 35 | 36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 39 | 40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `yarn build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /sub-vue/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 104 | 105 | 113 | 114 | 115 | 131 | --------------------------------------------------------------------------------