├── .gitignore ├── README.md ├── main-nuxt ├── .editorconfig ├── .gitignore ├── .prettierrc ├── README.md ├── assets │ └── README.md ├── components │ ├── Logo.vue │ └── README.md ├── layouts │ ├── README.md │ ├── default.vue │ └── empty.vue ├── middleware │ └── README.md ├── nuxt.config.js ├── package.json ├── pages │ ├── 404.vue │ ├── README.md │ └── index.vue ├── plugins │ ├── README.md │ ├── element-ui.js │ └── resolveApps.js ├── static │ ├── README.md │ └── favicon.ico └── store │ ├── README.md │ └── index.js ├── main-react ├── .env ├── .gitignore ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── micro-app.js │ ├── reportWebVitals.js │ └── setupTests.js ├── main-vue ├── .browserslistrc ├── .eslintrc.js ├── .gitignore ├── README.md ├── babel.config.js ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ └── HelloWorld.vue │ ├── main.js │ ├── micro-app.js │ ├── router │ └── index.js │ └── views │ ├── About.vue │ └── Home.vue ├── package.json ├── sub-nuxt ├── .editorconfig ├── .gitignore ├── README.md ├── assets │ └── README.md ├── components │ ├── Logo.vue │ └── README.md ├── layouts │ ├── README.md │ └── default.vue ├── mfe.js ├── middleware │ └── README.md ├── nuxt.config.js ├── package.json ├── pages │ ├── README.md │ └── index.vue ├── plugins │ └── README.md ├── router │ ├── index.js │ └── routes.js ├── static │ ├── README.md │ └── favicon.ico ├── store │ └── README.md └── views │ ├── about │ └── index.vue │ └── home │ └── index.vue ├── sub-react ├── .env ├── .gitignore ├── .rescriptsrc.js ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── public-path.js │ ├── reportWebVitals.js │ └── setupTests.js ├── sub-vue ├── .browserslistrc ├── .eslintrc.js ├── .gitignore ├── README.md ├── babel.config.js ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── HelloWorld.vue │ ├── main.js │ ├── public-path.js │ ├── router │ │ └── index.js │ └── views │ │ ├── About.vue │ │ └── Home.vue └── vue.config.js └── sub-vue3 ├── .browserslistrc ├── .eslintrc.js ├── .gitignore ├── README.md ├── babel.config.js ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ └── logo.png ├── components │ └── HelloWorld.vue ├── main.js ├── public-path.js ├── router │ └── index.js └── views │ ├── About.vue │ └── Home.vue └── vue.config.js /.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 | 25 | package.lock.json 26 | yarn.lock -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # qiankun-demo 2 | 3 | 🚀qiankun + vue + react + angular 模板；多环境基座 + 多微应用 4 | 5 | ## 基座 6 | - [x] Nuxt.js => main-nuxt 7 | - [x] React => main-react 8 | - [x] Vue2 => main-vue 9 | - [ ] Vue3 => main-vue3 10 | - [ ] Angular => main-angular 11 | 12 | ## 子应用 13 | - [x] Nuxt.js => sub-nuxt 14 | - [x] React => sub-react 15 | - [x] Vue2 => sub-vue 16 | - [x] Vue3 => sub-vue3 17 | - [ ] Angular => sub-angular 18 | 19 | ## install 20 | ```shell 21 | npm run install 22 | ``` 23 | 24 | ## start 25 | ```shell 26 | npm run start 27 | 28 | # 切换主应用可在 package.json 中修改。 29 | ``` 30 | -------------------------------------------------------------------------------- /main-nuxt/.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /main-nuxt/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | -------------------------------------------------------------------------------- /main-nuxt/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true 4 | } 5 | -------------------------------------------------------------------------------- /main-nuxt/README.md: -------------------------------------------------------------------------------- 1 | ## start 2 | 3 | ```shell 4 | yarn install:all && yarn serve:all 5 | ``` 6 | 7 | ## access 8 | 9 | open http://localhost:7100 in your browser 10 | -------------------------------------------------------------------------------- /main-nuxt/assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /main-nuxt/components/Logo.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 30 | -------------------------------------------------------------------------------- /main-nuxt/components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /main-nuxt/layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /main-nuxt/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 21 | 57 | 58 | 59 | 87 | -------------------------------------------------------------------------------- /main-nuxt/layouts/empty.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /main-nuxt/middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages. 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /main-nuxt/nuxt.config.js: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | /* 4 | ** Nuxt rendering mode 5 | ** See https://nuxtjs.org/api/configuration-mode 6 | */ 7 | mode: 'spa', 8 | /* 9 | ** Nuxt target 10 | ** See https://nuxtjs.org/api/configuration-target 11 | */ 12 | target: 'server', 13 | /* 14 | ** Headers of the page 15 | ** See https://nuxtjs.org/api/configuration-head 16 | */ 17 | head: { 18 | title: process.env.npm_package_name || '', 19 | meta: [ 20 | { charset: 'utf-8' }, 21 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 22 | { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } 23 | ], 24 | link: [{ rel: 'icon', type: 'image/x-icon', href: 'https://img.jiguang.cn/jiguang/20180929/assets/img/new-logo/favicon2-big.ico' }], 25 | script: [ 26 | { 27 | type: 'text/javascript', 28 | src: 29 | 'https://webapi.amap.com/maps?v=1.4.15&key=e47759e367e75a2e4b7aa5e00d19b19f&plugin=AMap.MouseTool,AMap.PolyEditor,AMap.LabelMarker,AMap.Autocomplete,AMap.ToolBar,AMap.PlaceSearch,AMap.Heatmap,AMap.Geocoder,AMap.Scale,AMap.DistrictSearch' 30 | }, 31 | { 32 | type: 'text/javascript', 33 | src:'https://webapi.amap.com/loca?v=1.3.0&key=e47759e367e75a2e4b7aa5e00d19b19f' 34 | } 35 | ] 36 | }, 37 | /* 38 | ** Global CSS 39 | */ 40 | css: [ 41 | 'element-ui/lib/theme-chalk/index.css' 42 | ], 43 | /* 44 | ** Plugins to load before mounting the App 45 | ** https://nuxtjs.org/guide/plugins 46 | */ 47 | plugins: [ 48 | '@/plugins/element-ui', 49 | '@/plugins/resolveApps' 50 | ], 51 | /* 52 | ** Auto import components 53 | ** See https://nuxtjs.org/api/configuration-components 54 | */ 55 | components: true, 56 | /* 57 | ** Nuxt.js dev-modules 58 | */ 59 | buildModules: [ 60 | ], 61 | /* 62 | ** Nuxt.js modules 63 | */ 64 | modules: [ 65 | // Doc: https://axios.nuxtjs.org/usage 66 | '@nuxtjs/axios', 67 | ], 68 | /* 69 | ** Axios module configuration 70 | ** See https://axios.nuxtjs.org/options 71 | */ 72 | axios: {}, 73 | /* 74 | ** Build configuration 75 | ** See https://nuxtjs.org/api/configuration-build/ 76 | */ 77 | build: { 78 | transpile: [/^element-ui/], 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /main-nuxt/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-qiankun-project", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "cross-env PORT=7100 nuxt", 7 | "build": "nuxt build", 8 | "start": "nuxt start", 9 | "generate": "nuxt generate" 10 | }, 11 | "dependencies": { 12 | "@nuxtjs/axios": "^5.12.0", 13 | "element-ui": "^2.13.2", 14 | "nuxt-edge": "latest", 15 | "qiankun": "^2.0.16" 16 | }, 17 | "devDependencies": { 18 | "cross-env": "^7.0.2", 19 | "eslint-config-prettier": "^6.11.0", 20 | "eslint-plugin-prettier": "^3.1.4", 21 | "prettier": "^2.0.5" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /main-nuxt/pages/404.vue: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 14 | 15 | 20 | -------------------------------------------------------------------------------- /main-nuxt/pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /main-nuxt/pages/index.vue: -------------------------------------------------------------------------------- 1 | 3 | 4 | 33 | 34 | 57 | -------------------------------------------------------------------------------- /main-nuxt/plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /main-nuxt/plugins/element-ui.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Element from 'element-ui' 3 | import locale from 'element-ui/lib/locale/lang/en' 4 | 5 | Vue.use(Element, { locale }) 6 | -------------------------------------------------------------------------------- /main-nuxt/plugins/resolveApps.js: -------------------------------------------------------------------------------- 1 | 2 | export default async ({ store }, inject) => { 3 | await store.dispatch('getMenus') 4 | } 5 | -------------------------------------------------------------------------------- /main-nuxt/static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | Thus you'd want to delete this README.md before deploying to production. 8 | 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 10 | 11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 12 | -------------------------------------------------------------------------------- /main-nuxt/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mk965/qiankun-demo/ca7ec8534da03992e40e97309381169b2b8ae488/main-nuxt/static/favicon.ico -------------------------------------------------------------------------------- /main-nuxt/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /main-nuxt/store/index.js: -------------------------------------------------------------------------------- 1 | 2 | import { Message } from 'element-ui' 3 | import { 4 | initGlobalState, 5 | } from 'qiankun' 6 | 7 | const TYPES = { 8 | INIT_APPS: 'init_apps' 9 | } 10 | 11 | export const state = () => ({ 12 | apps: [], 13 | name: 'femessage', 14 | sdk: null 15 | }) 16 | 17 | export const mutations = { 18 | [TYPES.INIT_APPS](state, apps) { 19 | 20 | // 初始化全局变量 21 | const actions = initGlobalState({ 22 | name: state.name, 23 | }) 24 | 25 | 26 | // 使用 sdk 方式进行 父子应用通信, 这里大家可以根据自己项目进行增加删除 27 | const sdk = { 28 | globalState: actions, 29 | toast: (...args) => { 30 | Message(...args) 31 | }, 32 | go2404: () => { 33 | this.$router.push('404') 34 | }, 35 | name: state.name 36 | } 37 | 38 | // 处理 apps 列表 39 | apps = apps.map((item) => ({ 40 | ...item, 41 | container: '#subapp', 42 | props: { 43 | sdk, 44 | }, 45 | })) 46 | 47 | // 处理路由表 48 | const routes = apps.map((item, i) => ({ 49 | path: `${item.activeRule}(.*)`, 50 | name: `${item.name}-i`, 51 | component: () => import('@/pages/index.vue').then(m => m.default || m) 52 | })) 53 | 54 | // 动态增加路由, 这里要注意 404 页面不能直接写在 pages 中 55 | // 不然匹配的时候会根据顺序匹配到 * 就直接返回了 从而匹配不到我们后续添加的动态路由 56 | this.$router.addRoutes([].concat(...routes, 57 | { 58 | path: `*`, 59 | name: `404`, 60 | component: () => import('@/pages/404.vue').then(m => m.default || m) 61 | } 62 | )) 63 | 64 | state.apps = apps 65 | state.sdk = sdk 66 | } 67 | } 68 | 69 | export const actions = { 70 | async getMenus({ commit }) { 71 | const { payload } = await getMenus() 72 | 73 | commit(TYPES.INIT_APPS, payload) 74 | } 75 | } 76 | 77 | 78 | 79 | async function getMenus() { 80 | 81 | return { 82 | code: 0, 83 | payload: [ 84 | { 85 | name: 'sub-react', 86 | entry: '//localhost:9001/', 87 | activeRule: '/sub-react', 88 | container: '#subapp-viewport', // 子应用挂载的div 89 | props: { 90 | routerBase: '/sub-react' 91 | } 92 | }, 93 | { 94 | name: 'sub-vue', 95 | entry: '//localhost:9002/', 96 | activeRule: '/sub-vue', 97 | container: '#subapp-viewport', // 子应用挂载的div 98 | props: { 99 | routerBase: '/sub-vue' 100 | } 101 | }, 102 | { 103 | name: 'sub-vue3', 104 | entry: '//localhost:9003/', 105 | activeRule: '/sub-vue3', 106 | container: '#subapp-viewport', // 子应用挂载的div 107 | props: { 108 | routerBase: '/sub-vue3' 109 | } 110 | }, 111 | { 112 | name: 'sub-nuxt', 113 | entry: '//localhost:9004/', 114 | activeRule: '/sub-nuxt', 115 | container: '#subapp-viewport', // 子应用挂载的div 116 | props: { 117 | routerBase: '/sub-nuxt' 118 | } 119 | } 120 | ], 121 | message: 'success', 122 | } 123 | 124 | } 125 | -------------------------------------------------------------------------------- /main-react/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | BROWSER=none 3 | PORT=9000 4 | WDS_SOCKET_PORT=9000 -------------------------------------------------------------------------------- /main-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 | 25 | package.lock.json 26 | yarn.lock -------------------------------------------------------------------------------- /main-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 | -------------------------------------------------------------------------------- /main-react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "main-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.4", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "qiankun": "^2.4.4", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-scripts": "4.0.3", 13 | "web-vitals": "^1.0.1" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /main-react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mk965/qiankun-demo/ca7ec8534da03992e40e97309381169b2b8ae488/main-react/public/favicon.ico -------------------------------------------------------------------------------- /main-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-react/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mk965/qiankun-demo/ca7ec8534da03992e40e97309381169b2b8ae488/main-react/public/logo192.png -------------------------------------------------------------------------------- /main-react/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mk965/qiankun-demo/ca7ec8534da03992e40e97309381169b2b8ae488/main-react/public/logo512.png -------------------------------------------------------------------------------- /main-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 | -------------------------------------------------------------------------------- /main-react/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /main-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 | -------------------------------------------------------------------------------- /main-react/src/App.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | import { registerMicroApps, start } from 'qiankun'; 3 | import microApps from './micro-app'; 4 | 5 | function App() { 6 | useEffect(() => { 7 | registerMicroApps(microApps); 8 | start(); 9 | }) 10 | return ( 11 |
12 | ); 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /main-react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /main-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 | -------------------------------------------------------------------------------- /main-react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /main-react/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /main-react/src/micro-app.js: -------------------------------------------------------------------------------- 1 | const microApps = [ 2 | { 3 | name: 'sub-react', 4 | entry: '//localhost:9001/', 5 | activeRule: '/sub-react', 6 | container: '#subapp-viewport', // 子应用挂载的div 7 | props: { 8 | routerBase: '/sub-react' 9 | } 10 | }, 11 | { 12 | name: 'sub-vue', 13 | entry: '//localhost:9002/', 14 | activeRule: '/sub-vue', 15 | container: '#subapp-viewport', // 子应用挂载的div 16 | props: { 17 | routerBase: '/sub-vue' 18 | } 19 | }, 20 | { 21 | name: 'sub-vue3', 22 | entry: '//localhost:9003/', 23 | activeRule: '/sub-vue3', 24 | container: '#subapp-viewport', // 子应用挂载的div 25 | props: { 26 | routerBase: '/sub-vue3' 27 | } 28 | }, 29 | { 30 | name: 'sub-nuxt', 31 | entry: '//localhost:9004/', 32 | activeRule: '/sub-nuxt', 33 | container: '#subapp-viewport', // 子应用挂载的div 34 | props: { 35 | routerBase: '/sub-nuxt' 36 | } 37 | } 38 | ] 39 | 40 | export default microApps; -------------------------------------------------------------------------------- /main-react/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /main-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 | -------------------------------------------------------------------------------- /main-vue/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /main-vue/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/essential', 8 | 'eslint:recommended' 9 | ], 10 | parserOptions: { 11 | parser: 'babel-eslint' 12 | }, 13 | rules: { 14 | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 15 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /main-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-vue/README.md: -------------------------------------------------------------------------------- 1 | # main-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 | -------------------------------------------------------------------------------- /main-vue/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /main-vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "main-vue", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.6.5", 12 | "qiankun": "^2.4.5", 13 | "vue": "^2.6.11", 14 | "vue-router": "^3.2.0" 15 | }, 16 | "devDependencies": { 17 | "@vue/cli-plugin-babel": "~4.5.0", 18 | "@vue/cli-plugin-eslint": "~4.5.0", 19 | "@vue/cli-plugin-router": "~4.5.0", 20 | "@vue/cli-service": "~4.5.0", 21 | "babel-eslint": "^10.1.0", 22 | "eslint": "^6.7.2", 23 | "eslint-plugin-vue": "^6.2.2", 24 | "sass": "^1.26.5", 25 | "sass-loader": "^8.0.2", 26 | "vue-template-compiler": "^2.6.11" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /main-vue/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mk965/qiankun-demo/ca7ec8534da03992e40e97309381169b2b8ae488/main-vue/public/favicon.ico -------------------------------------------------------------------------------- /main-vue/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /main-vue/src/App.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 23 | 24 | 25 | 27 | -------------------------------------------------------------------------------- /main-vue/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mk965/qiankun-demo/ca7ec8534da03992e40e97309381169b2b8ae488/main-vue/src/assets/logo.png -------------------------------------------------------------------------------- /main-vue/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 42 | 43 | 44 | 60 | -------------------------------------------------------------------------------- /main-vue/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | 5 | Vue.config.productionTip = false 6 | 7 | new Vue({ 8 | router, 9 | render: h => h(App) 10 | }).$mount('#app') 11 | -------------------------------------------------------------------------------- /main-vue/src/micro-app.js: -------------------------------------------------------------------------------- 1 | const microApps = [ 2 | { 3 | name: 'sub-react', 4 | entry: '//localhost:9001/', 5 | activeRule: '/sub-react', 6 | container: '#subapp-viewport', // 子应用挂载的div 7 | props: { 8 | routerBase: '/sub-react' 9 | } 10 | }, 11 | { 12 | name: 'sub-vue', 13 | entry: '//localhost:9002/', 14 | activeRule: '/sub-vue', 15 | container: '#subapp-viewport', // 子应用挂载的div 16 | props: { 17 | routerBase: '/sub-vue' 18 | } 19 | }, 20 | { 21 | name: 'sub-vue3', 22 | entry: '//localhost:9003/', 23 | activeRule: '/sub-vue3', 24 | container: '#subapp-viewport', // 子应用挂载的div 25 | props: { 26 | routerBase: '/sub-vue3' 27 | } 28 | } 29 | ] 30 | 31 | export default microApps; -------------------------------------------------------------------------------- /main-vue/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | import Home from '../views/Home.vue' 4 | 5 | Vue.use(VueRouter) 6 | 7 | const routes = [ 8 | { 9 | path: '/', 10 | name: 'Home', 11 | component: Home 12 | }, 13 | { 14 | path: '/about', 15 | name: 'About', 16 | // route level code-splitting 17 | // this generates a separate chunk (about.[hash].js) for this route 18 | // which is lazy-loaded when the route is visited. 19 | component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') 20 | } 21 | ] 22 | 23 | const router = new VueRouter({ 24 | mode: 'history', 25 | base: process.env.BASE_URL, 26 | routes 27 | }) 28 | 29 | export default router 30 | -------------------------------------------------------------------------------- /main-vue/src/views/About.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /main-vue/src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "install": "npm-run-all --serial install:*", 4 | "start": "npm-run-all --parallel start:*", 5 | "install:main-react": "cd main-react && npm install", 6 | "install:sub-react": "cd main-react && npm install", 7 | "install:sub-vue": "cd main-vue && npm install", 8 | "install:sub-vue3": "cd main-vue3 && npm install", 9 | "start:main-react": "cd main-react && npm start", 10 | "start:sub-react": "cd sub-react && npm start", 11 | "start:sub-vue": "cd sub-vue && npm start", 12 | "start:sub-vue3": "cd sub-vue3 && npm start", 13 | "start:sub-nuxt": "cd sub-nuxt && npm run dev" 14 | }, 15 | "devDependencies": { 16 | "npm-run-all": "^4.1.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /sub-nuxt/.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /sub-nuxt/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | -------------------------------------------------------------------------------- /sub-nuxt/README.md: -------------------------------------------------------------------------------- 1 | # nuxt-sub-app 2 | 3 | ## Build Setup 4 | 5 | ```bash 6 | # install dependencies 7 | $ yarn install 8 | 9 | # serve with hot reload at localhost:3000 10 | $ yarn dev 11 | 12 | # build for production and launch server 13 | $ yarn build 14 | $ yarn start 15 | 16 | # generate static project 17 | $ yarn generate 18 | ``` 19 | 20 | For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org). 21 | -------------------------------------------------------------------------------- /sub-nuxt/assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /sub-nuxt/components/Logo.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 30 | -------------------------------------------------------------------------------- /sub-nuxt/components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /sub-nuxt/layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /sub-nuxt/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 27 | -------------------------------------------------------------------------------- /sub-nuxt/mfe.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | export default function(render) { 4 | if (!window.__POWERED_BY_QIANKUN__) { 5 | render() 6 | } 7 | } 8 | 9 | const Log = (msg) => { 10 | console.log( 11 | `%c sub-nuxt %c ${msg} %c`, 12 | 'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px; color: #fff', 13 | 'background:#41b883 ; padding: 1px; border-radius: 0 3px 3px 0; color: #fff', 14 | 'background:transparent' 15 | ); 16 | } 17 | 18 | export function bootstrap() { 19 | Log('bootstrap'); 20 | } 21 | 22 | export async function mount(render, props) { 23 | Log('mount'); 24 | await render() 25 | Log('render'); 26 | } 27 | 28 | export async function update() { 29 | Log('update'); 30 | } 31 | 32 | export function mounted(instance, props) { 33 | Log('mounted'); 34 | if (props.sdk) { 35 | Vue.prototype.$sdk = props.sdk 36 | } 37 | } 38 | 39 | export function beforeUnmount(instance) { 40 | Log('beforeUnmount'); 41 | } 42 | export function unmount() { 43 | Log('unmount'); 44 | } 45 | -------------------------------------------------------------------------------- /sub-nuxt/middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages. 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /sub-nuxt/nuxt.config.js: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | /* 4 | ** Nuxt rendering mode 5 | ** See https://nuxtjs.org/api/configuration-mode 6 | */ 7 | mode: 'spa', 8 | /* 9 | ** Nuxt target 10 | ** See https://nuxtjs.org/api/configuration-target 11 | */ 12 | target: 'server', 13 | /* 14 | ** Headers of the page 15 | ** See https://nuxtjs.org/api/configuration-head 16 | */ 17 | head: { 18 | title: process.env.npm_package_name || '', 19 | meta: [ 20 | { charset: 'utf-8' }, 21 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 22 | { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } 23 | ], 24 | link: [ 25 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } 26 | ] 27 | }, 28 | /* 29 | ** Global CSS 30 | */ 31 | css: [ 32 | ], 33 | /* 34 | ** Plugins to load before mounting the App 35 | ** https://nuxtjs.org/guide/plugins 36 | */ 37 | plugins: [ 38 | ], 39 | /* 40 | ** Auto import components 41 | ** See https://nuxtjs.org/api/configuration-components 42 | */ 43 | components: true, 44 | /* 45 | ** Nuxt.js dev-modules 46 | */ 47 | buildModules: [ 48 | [ 49 | '@nuxtjs/router', 50 | // 51 | { keepDefaultRouter: true, path: './router', fileName: 'index.js' }, 52 | ], 53 | ], 54 | /* 55 | ** Nuxt.js modules 56 | */ 57 | modules: [ 58 | '@femessage/nuxt-micro-frontend', 59 | ], 60 | 61 | MFE: { 62 | force: true 63 | }, 64 | /* 65 | ** Build configuration 66 | ** See https://nuxtjs.org/api/configuration-build/ 67 | */ 68 | build: { 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /sub-nuxt/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-subapp", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "cross-env PORT=9004 nuxt", 7 | "build": "nuxt build", 8 | "start": "nuxt start", 9 | "generate": "nuxt generate" 10 | }, 11 | "dependencies": { 12 | "@nuxtjs/router": "^1.5.0", 13 | "nuxt-edge": "latest" 14 | }, 15 | "devDependencies": { 16 | "@femessage/nuxt-micro-frontend": "^1.5.0", 17 | "cross-env": "^7.0.2" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /sub-nuxt/pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /sub-nuxt/pages/index.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 33 | 34 | 74 | -------------------------------------------------------------------------------- /sub-nuxt/plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /sub-nuxt/router/index.js: -------------------------------------------------------------------------------- 1 | import Router from 'vue-router' 2 | import routes from './routes' 3 | 4 | export function createRouter(ssrContext, createDefaultRouter, routerOptions) { 5 | const options = routerOptions 6 | ? routerOptions 7 | : createDefaultRouter(ssrContext).options 8 | 9 | return new Router({ 10 | ...options, 11 | routes: fixRoutes(options.routes), 12 | }) 13 | } 14 | 15 | function fixRoutes() { 16 | // default routes that come from `pages/` 17 | return [].concat(routes) 18 | } 19 | -------------------------------------------------------------------------------- /sub-nuxt/router/routes.js: -------------------------------------------------------------------------------- 1 | const BASE = window.__POWERED_BY_QIANKUN__ ? '/sub-nuxt' : '' 2 | 3 | function dynamicImport(path) { 4 | return import(`~/views/${path}/index.vue`).then(m => m.default || m) 5 | } 6 | 7 | const resolveRoute = route => ({ 8 | ...route, 9 | component: () => dynamicImport(route.component), 10 | }) 11 | 12 | function dynamicImportRoute(routes) { 13 | return routes.map(route => ({ 14 | ...resolveRoute(route), 15 | children: route.children ? route.children.map(resolveRoute) : [], 16 | })) 17 | } 18 | 19 | let routes = [ 20 | { 21 | path: `${BASE}/home`, 22 | name: 'Home', 23 | component: 'home', 24 | alias: `${BASE}` 25 | }, 26 | { 27 | path: `${BASE}/about`, 28 | name: 'About', 29 | component: 'about', 30 | }, 31 | ] 32 | 33 | export default dynamicImportRoute(routes) 34 | -------------------------------------------------------------------------------- /sub-nuxt/static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | Thus you'd want to delete this README.md before deploying to production. 8 | 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 10 | 11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 12 | -------------------------------------------------------------------------------- /sub-nuxt/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mk965/qiankun-demo/ca7ec8534da03992e40e97309381169b2b8ae488/sub-nuxt/static/favicon.ico -------------------------------------------------------------------------------- /sub-nuxt/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /sub-nuxt/views/about/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | 14 | 17 | -------------------------------------------------------------------------------- /sub-nuxt/views/home/index.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 26 | 27 | 30 | -------------------------------------------------------------------------------- /sub-react/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | BROWSER=none 3 | PORT=9001 4 | WDS_SOCKET_PORT=9001 -------------------------------------------------------------------------------- /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 | 25 | package.lock.json 26 | yarn.lock -------------------------------------------------------------------------------- /sub-react/.rescriptsrc.js: -------------------------------------------------------------------------------- 1 | const { name } = require('./package'); 2 | 3 | module.exports = { 4 | webpack: config => { 5 | config.output.library = `${name}-[name]`; 6 | config.output.libraryTarget = 'umd'; 7 | config.output.jsonpFunction = `webpackJsonp_${name}`; 8 | config.output.globalObject = 'window'; 9 | config.output.publicPath = `//localhost:${process.env.PORT}/` 10 | 11 | return config; 12 | }, 13 | 14 | devServer: (_) => { 15 | const config = _; 16 | 17 | config.headers = { 18 | 'Access-Control-Allow-Origin': '*', 19 | }; 20 | config.historyApiFallback = true; 21 | config.hot = false; 22 | config.watchContentBase = false; 23 | config.liveReload = false; 24 | 25 | return config; 26 | }, 27 | }; -------------------------------------------------------------------------------- /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-react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sub-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.4", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-router-dom": "^5.2.0", 12 | "react-scripts": "4.0.3", 13 | "web-vitals": "^1.0.1" 14 | }, 15 | "scripts": { 16 | "start": "rescripts start", 17 | "build": "rescripts build", 18 | "test": "rescriptss test", 19 | "eject": "rescripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /sub-react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mk965/qiankun-demo/ca7ec8534da03992e40e97309381169b2b8ae488/sub-react/public/favicon.ico -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /sub-react/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mk965/qiankun-demo/ca7ec8534da03992e40e97309381169b2b8ae488/sub-react/public/logo192.png -------------------------------------------------------------------------------- /sub-react/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mk965/qiankun-demo/ca7ec8534da03992e40e97309381169b2b8ae488/sub-react/public/logo512.png -------------------------------------------------------------------------------- /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/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /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-react/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from './logo.svg'; 2 | import './App.css'; 3 | import { BrowserRouter } from 'react-router-dom'; 4 | 5 | function App() { 6 | return ( 7 | 8 |
9 |
10 | logo 11 |

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

14 | 20 | Learn React 21 | 22 |
23 |
24 | 25 | ); 26 | } 27 | 28 | export default App; 29 | -------------------------------------------------------------------------------- /sub-react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /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-react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | 8 | 9 | function render() { 10 | ReactDOM.render( 11 | 12 | 13 | , 14 | document.getElementById('sub-react-root') 15 | ); 16 | } 17 | 18 | if (!window.__POWERED_BY_QIANKUN__) { 19 | render({}); 20 | } 21 | 22 | export async function bootstrap() { 23 | console.log('[react16] react app bootstraped'); 24 | } 25 | 26 | export async function mount(props) { 27 | console.log('[react16] props from main framework', props); 28 | render(props); 29 | } 30 | 31 | export async function unmount(props) { 32 | const { container } = props; 33 | ReactDOM.unmountComponentAtNode(container ? container.querySelector('#root') : document.querySelector('#root')); 34 | } 35 | 36 | 37 | 38 | // If you want to start measuring performance in your app, pass a function 39 | // to log results (for example: reportWebVitals(console.log)) 40 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 41 | reportWebVitals(); 42 | -------------------------------------------------------------------------------- /sub-react/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /sub-react/src/public-path.js: -------------------------------------------------------------------------------- 1 | if (window.__POWERED_BY_QIANKUN__) { 2 | // eslint-disable-next-line no-undef 3 | __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; 4 | } -------------------------------------------------------------------------------- /sub-react/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /sub-vue/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /sub-vue/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/essential', 8 | 'eslint:recommended' 9 | ], 10 | parserOptions: { 11 | parser: 'babel-eslint' 12 | }, 13 | rules: { 14 | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 15 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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-vue/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /sub-vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sub-vue", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.6.5", 12 | "vue": "^2.6.11", 13 | "vue-router": "^3.2.0" 14 | }, 15 | "devDependencies": { 16 | "@vue/cli-plugin-babel": "~4.5.0", 17 | "@vue/cli-plugin-eslint": "~4.5.0", 18 | "@vue/cli-plugin-router": "~4.5.0", 19 | "@vue/cli-service": "~4.5.0", 20 | "babel-eslint": "^10.1.0", 21 | "eslint": "^6.7.2", 22 | "eslint-plugin-vue": "^6.2.2", 23 | "vue-template-compiler": "^2.6.11" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /sub-vue/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mk965/qiankun-demo/ca7ec8534da03992e40e97309381169b2b8ae488/sub-vue/public/favicon.ico -------------------------------------------------------------------------------- /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-vue/src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 33 | -------------------------------------------------------------------------------- /sub-vue/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mk965/qiankun-demo/ca7ec8534da03992e40e97309381169b2b8ae488/sub-vue/src/assets/logo.png -------------------------------------------------------------------------------- /sub-vue/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 42 | 43 | 44 | 60 | -------------------------------------------------------------------------------- /sub-vue/src/main.js: -------------------------------------------------------------------------------- 1 | // import Vue from 'vue' 2 | // import App from './App.vue' 3 | // import router from './router' 4 | 5 | // Vue.config.productionTip = false 6 | 7 | // new Vue({ 8 | // router, 9 | // render: h => h(App) 10 | // }).$mount('#app') 11 | 12 | 13 | 14 | 15 | 16 | 17 | import './public-path'; 18 | import Vue from 'vue'; 19 | import VueRouter from 'vue-router'; 20 | import App from './App.vue'; 21 | import routes from './router'; 22 | // import store from './store'; 23 | 24 | Vue.config.productionTip = false; 25 | 26 | let router = null; 27 | let instance = null; 28 | 29 | function render(props = {}) { 30 | const { container } = props; 31 | router = new VueRouter({ 32 | base: window.__POWERED_BY_QIANKUN__ ? '/sub-vue' : '/', 33 | mode: 'history', 34 | routes, 35 | }); 36 | 37 | instance = new Vue({ 38 | router, 39 | // store, 40 | render: h => h(App), 41 | }).$mount(container ? container.querySelector('#sub-vue') : '#sub-vue'); 42 | } 43 | 44 | if (!window.__POWERED_BY_QIANKUN__) { 45 | render(); 46 | } 47 | 48 | function storeTest(props) { 49 | props.onGlobalStateChange && 50 | props.onGlobalStateChange( 51 | (value, prev) => console.log(`[onGlobalStateChange - ${props.name}]:`, value, prev), 52 | true, 53 | ); 54 | props.setGlobalState && 55 | props.setGlobalState({ 56 | ignore: props.name, 57 | user: { 58 | name: props.name, 59 | }, 60 | }); 61 | } 62 | 63 | export async function bootstrap() { 64 | console.log('[vue] vue app bootstraped'); 65 | } 66 | 67 | export async function mount(props) { 68 | console.log('[vue] props from main framework', props); 69 | storeTest(props); 70 | render(props); 71 | } 72 | 73 | export async function unmount() { 74 | instance.$destroy(); 75 | instance.$el.innerHTML = ''; 76 | instance = null; 77 | router = null; 78 | } 79 | -------------------------------------------------------------------------------- /sub-vue/src/public-path.js: -------------------------------------------------------------------------------- 1 | if (window.__POWERED_BY_QIANKUN__) { 2 | __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; 3 | } -------------------------------------------------------------------------------- /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 | 5 | Vue.use(VueRouter) 6 | 7 | const routes = [ 8 | { 9 | path: '/', 10 | name: 'Home', 11 | component: Home 12 | }, 13 | { 14 | path: '/about', 15 | name: 'About', 16 | // route level code-splitting 17 | // this generates a separate chunk (about.[hash].js) for this route 18 | // which is lazy-loaded when the route is visited. 19 | component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') 20 | } 21 | ] 22 | 23 | // const router = new VueRouter({ 24 | // routes 25 | // }) 26 | 27 | export default routes 28 | -------------------------------------------------------------------------------- /sub-vue/src/views/About.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /sub-vue/src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | -------------------------------------------------------------------------------- /sub-vue/vue.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const { name } = require('./package'); 3 | 4 | function resolve(dir) { 5 | return path.join(__dirname, dir); 6 | } 7 | 8 | const port = 9002; 9 | 10 | module.exports = { 11 | outputDir: 'dist', 12 | assetsDir: 'static', 13 | filenameHashing: true, 14 | devServer: { 15 | hot: true, 16 | disableHostCheck: true, 17 | port, 18 | overlay: { 19 | warnings: false, 20 | errors: true, 21 | }, 22 | headers: { 23 | 'Access-Control-Allow-Origin': '*', 24 | }, 25 | }, 26 | // 自定义webpack配置 27 | configureWebpack: { 28 | resolve: { 29 | alias: { 30 | '@': resolve('src'), 31 | }, 32 | }, 33 | output: { 34 | // 把子应用打包成 umd 库格式 35 | library: `${name}-[name]`, 36 | libraryTarget: 'umd', 37 | jsonpFunction: `webpackJsonp_${name}`, 38 | }, 39 | }, 40 | }; 41 | -------------------------------------------------------------------------------- /sub-vue3/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /sub-vue3/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/vue3-essential', 8 | 'eslint:recommended' 9 | ], 10 | parserOptions: { 11 | parser: 'babel-eslint' 12 | }, 13 | rules: { 14 | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 15 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /sub-vue3/.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 | -------------------------------------------------------------------------------- /sub-vue3/README.md: -------------------------------------------------------------------------------- 1 | # sub-vue3 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-vue3/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /sub-vue3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sub-vue3", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.6.5", 12 | "vue": "^3.0.0", 13 | "vue-router": "^4.0.0-0" 14 | }, 15 | "devDependencies": { 16 | "@vue/cli-plugin-babel": "~4.5.0", 17 | "@vue/cli-plugin-eslint": "~4.5.0", 18 | "@vue/cli-plugin-router": "~4.5.0", 19 | "@vue/cli-service": "~4.5.0", 20 | "@vue/compiler-sfc": "^3.0.0", 21 | "babel-eslint": "^10.1.0", 22 | "eslint": "^6.7.2", 23 | "eslint-plugin-vue": "^7.0.0", 24 | "sass": "^1.26.5", 25 | "sass-loader": "^8.0.2" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /sub-vue3/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mk965/qiankun-demo/ca7ec8534da03992e40e97309381169b2b8ae488/sub-vue3/public/favicon.ico -------------------------------------------------------------------------------- /sub-vue3/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /sub-vue3/src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 33 | -------------------------------------------------------------------------------- /sub-vue3/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mk965/qiankun-demo/ca7ec8534da03992e40e97309381169b2b8ae488/sub-vue3/src/assets/logo.png -------------------------------------------------------------------------------- /sub-vue3/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 42 | 43 | 44 | 60 | -------------------------------------------------------------------------------- /sub-vue3/src/main.js: -------------------------------------------------------------------------------- 1 | import './public-path'; 2 | import { createApp } from 'vue'; 3 | import { createRouter, createWebHistory } from 'vue-router'; 4 | import App from './App.vue'; 5 | import routes from './router'; 6 | 7 | let router = null; 8 | let instance = null; 9 | let history = null; 10 | 11 | 12 | function render(props = {}) { 13 | const { container } = props; 14 | history = createWebHistory(window.__POWERED_BY_QIANKUN__ ? '/sub-vue3' : '/'); 15 | router = createRouter({ 16 | history, 17 | routes, 18 | }); 19 | 20 | instance = createApp(App); 21 | instance.use(router); 22 | instance.mount(container ? container.querySelector('#sub-vue3') : '#sub-vue3'); 23 | } 24 | 25 | if (!window.__POWERED_BY_QIANKUN__) { 26 | render(); 27 | } 28 | 29 | export async function bootstrap() { 30 | console.log('%c ', 'color: green;', 'vue3.0 app bootstraped'); 31 | } 32 | 33 | function storeTest(props) { 34 | props.onGlobalStateChange && 35 | props.onGlobalStateChange( 36 | (value, prev) => console.log(`[onGlobalStateChange - ${props.name}]:`, value, prev), 37 | true, 38 | ); 39 | props.setGlobalState && 40 | props.setGlobalState({ 41 | ignore: props.name, 42 | user: { 43 | name: props.name, 44 | }, 45 | }); 46 | } 47 | 48 | export async function mount(props) { 49 | storeTest(props); 50 | render(props); 51 | instance.config.globalProperties.$onGlobalStateChange = props.onGlobalStateChange; 52 | instance.config.globalProperties.$setGlobalState = props.setGlobalState; 53 | } 54 | 55 | export async function unmount() { 56 | instance.unmount(); 57 | instance._container.innerHTML = ''; 58 | instance = null; 59 | router = null; 60 | history.destroy(); 61 | } 62 | -------------------------------------------------------------------------------- /sub-vue3/src/public-path.js: -------------------------------------------------------------------------------- 1 | if (window.__POWERED_BY_QIANKUN__) { 2 | // eslint-disable-next-line no-undef 3 | __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; 4 | } -------------------------------------------------------------------------------- /sub-vue3/src/router/index.js: -------------------------------------------------------------------------------- 1 | // import { createRouter, createWebHistory } from 'vue-router' 2 | import Home from '../views/Home.vue' 3 | 4 | const routes = [ 5 | { 6 | path: '/', 7 | name: 'Home', 8 | component: Home 9 | }, 10 | { 11 | path: '/about', 12 | name: 'About', 13 | // route level code-splitting 14 | // this generates a separate chunk (about.[hash].js) for this route 15 | // which is lazy-loaded when the route is visited. 16 | component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') 17 | } 18 | ] 19 | 20 | // const router = createRouter({ 21 | // history: createWebHistory(process.env.BASE_URL), 22 | // routes 23 | // }) 24 | 25 | export default routes 26 | -------------------------------------------------------------------------------- /sub-vue3/src/views/About.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /sub-vue3/src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | -------------------------------------------------------------------------------- /sub-vue3/vue.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const { name } = require('./package'); 3 | 4 | function resolve(dir) { 5 | return path.join(__dirname, dir); 6 | } 7 | 8 | const port = 9003; 9 | 10 | module.exports = { 11 | outputDir: 'dist', 12 | assetsDir: 'static', 13 | filenameHashing: true, 14 | devServer: { 15 | hot: true, 16 | disableHostCheck: true, 17 | port, 18 | overlay: { 19 | warnings: false, 20 | errors: true, 21 | }, 22 | headers: { 23 | 'Access-Control-Allow-Origin': '*', 24 | }, 25 | }, 26 | // 自定义webpack配置 27 | configureWebpack: { 28 | resolve: { 29 | alias: { 30 | '@': resolve('src'), 31 | }, 32 | }, 33 | output: { 34 | // 把子应用打包成 umd 库格式 35 | library: `${name}-[name]`, 36 | libraryTarget: 'umd', 37 | jsonpFunction: `webpackJsonp_${name}`, 38 | }, 39 | }, 40 | }; 41 | --------------------------------------------------------------------------------