├── vue-cli-plugin-qiankun-portal ├── index.js ├── generator │ ├── template │ │ └── src │ │ │ ├── components │ │ │ ├── demo2.vue │ │ │ ├── demo1.vue │ │ │ └── navBar.vue │ │ │ ├── assets │ │ │ ├── logo.png │ │ │ └── css │ │ │ │ └── reset.css │ │ │ ├── App.vue │ │ │ ├── store │ │ │ └── index.js │ │ │ ├── router │ │ │ └── index.js │ │ │ └── main.js │ └── index.js ├── README.md └── package.json ├── demo ├── micro-apps │ └── demo1 │ │ ├── .browserslistrc │ │ ├── babel.config.js │ │ ├── postcss.config.js │ │ ├── src │ │ ├── assets │ │ │ └── logo.png │ │ ├── store │ │ │ └── index.js │ │ ├── views │ │ │ ├── About.vue │ │ │ └── Home.vue │ │ ├── router │ │ │ └── index.js │ │ ├── components │ │ │ └── HelloWorld.vue │ │ ├── App.vue │ │ └── main.js │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ └── vue.config.js └── portal │ ├── babel.config.js │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── assets │ │ ├── logo.png │ │ └── css │ │ │ └── reset.css │ ├── components │ │ ├── demo2.vue │ │ ├── demo1.vue │ │ └── navBar.vue │ ├── App.vue │ ├── store │ │ └── index.js │ ├── router │ │ └── index.js │ └── main.js │ ├── .gitignore │ ├── README.md │ └── package.json ├── vue-cli-plugin-qiankun-microapp ├── index.js ├── prompts.js ├── README.md ├── generator │ ├── template │ │ ├── src │ │ │ ├── views │ │ │ │ ├── About.vue │ │ │ │ └── Home.vue │ │ │ ├── router │ │ │ │ └── index.js │ │ │ ├── components │ │ │ │ └── HelloWorld.vue │ │ │ ├── App.vue │ │ │ └── main.js │ │ └── vue.config.js │ └── index.js └── package.json ├── demo.png └── README.md /vue-cli-plugin-qiankun-portal/index.js: -------------------------------------------------------------------------------- 1 | module.exports = () => {} -------------------------------------------------------------------------------- /demo/micro-apps/demo1/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /vue-cli-plugin-qiankun-microapp/index.js: -------------------------------------------------------------------------------- 1 | module.exports = () => {} -------------------------------------------------------------------------------- /demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jenniferyingni/vue-cli-plugin-qiankun/HEAD/demo.png -------------------------------------------------------------------------------- /demo/micro-apps/demo1/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/cli-plugin-babel/preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /demo/micro-apps/demo1/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {}, 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /demo/portal/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /demo/portal/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jenniferyingni/vue-cli-plugin-qiankun/HEAD/demo/portal/public/favicon.ico -------------------------------------------------------------------------------- /demo/portal/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jenniferyingni/vue-cli-plugin-qiankun/HEAD/demo/portal/src/assets/logo.png -------------------------------------------------------------------------------- /demo/portal/src/components/demo2.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /demo/micro-apps/demo1/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jenniferyingni/vue-cli-plugin-qiankun/HEAD/demo/micro-apps/demo1/src/assets/logo.png -------------------------------------------------------------------------------- /vue-cli-plugin-qiankun-portal/generator/template/src/components/demo2.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /vue-cli-plugin-qiankun-microapp/prompts.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | { 3 | name: 'port', 4 | type: 'input', 5 | default: 8081, 6 | message: 'Input a project port:', 7 | } 8 | ] -------------------------------------------------------------------------------- /vue-cli-plugin-qiankun-portal/generator/template/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jenniferyingni/vue-cli-plugin-qiankun/HEAD/vue-cli-plugin-qiankun-portal/generator/template/src/assets/logo.png -------------------------------------------------------------------------------- /vue-cli-plugin-qiankun-portal/README.md: -------------------------------------------------------------------------------- 1 | **# vue-cli3 plugin for qiankun portal** 2 | 3 | ``` 4 | vue create portal 5 | cd portal 6 | vue add vue-cli-plugin-qiankun-portal 7 | ``` 8 | 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | -------------------------------------------------------------------------------- /vue-cli-plugin-qiankun-microapp/README.md: -------------------------------------------------------------------------------- 1 | **# vue-cli3 plugin for qiankun micro-application** 2 | 3 | ``` 4 | vue create demo1 5 | cd demo1 6 | vue add vue-cli-plugin-qiankun-microapp 7 | ``` 8 | 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | -------------------------------------------------------------------------------- /demo/micro-apps/demo1/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 | -------------------------------------------------------------------------------- /demo/micro-apps/demo1/src/views/About.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | -------------------------------------------------------------------------------- /vue-cli-plugin-qiankun-microapp/generator/template/src/views/About.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | -------------------------------------------------------------------------------- /demo/portal/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /demo/portal/src/components/demo1.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /demo/micro-apps/demo1/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /vue-cli-plugin-qiankun-portal/generator/template/src/components/demo1.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /vue-cli-plugin-qiankun-portal/generator/index.js: -------------------------------------------------------------------------------- 1 | module.exports = (api) => { 2 | api.render('./template') 3 | 4 | api.extendPackage({ 5 | dependencies:{ 6 | "qiankun": "^1.4.3", 7 | "vue-router":'^3.1.5', 8 | "less": "^3.10.3", 9 | "vuex": "^3.1.3", 10 | "less-loader": "^5.0.0", 11 | "whatwg-fetch": "^3.0.0" 12 | } 13 | }) 14 | } 15 | -------------------------------------------------------------------------------- /demo/micro-apps/demo1/src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | -------------------------------------------------------------------------------- /demo/portal/src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 21 | -------------------------------------------------------------------------------- /vue-cli-plugin-qiankun-portal/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-cli-plugin-qiankun-portal", 3 | "version": "1.0.1", 4 | "description": "vue-cli3 plugin for qiankun portal", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "vue-cli-plugin", 11 | "qiankun", 12 | "micro-frontend" 13 | ], 14 | "author": "Jenniferyingni <1097532862@qq.com>", 15 | "license": "ISC" 16 | } 17 | -------------------------------------------------------------------------------- /vue-cli-plugin-qiankun-microapp/generator/template/src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | -------------------------------------------------------------------------------- /vue-cli-plugin-qiankun-microapp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-cli-plugin-qiankun-microapp", 3 | "version": "1.0.2", 4 | "description": "vue-cli3 plugin for qiankun micro-application", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "vue-cli-plugin", 11 | "qiankun", 12 | "micro-frontend" 13 | ], 14 | "author": "Jenniferyingni <1097532862@qq.com>", 15 | "license": "ISC" 16 | } 17 | -------------------------------------------------------------------------------- /demo/portal/README.md: -------------------------------------------------------------------------------- 1 | # client 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /vue-cli-plugin-qiankun-portal/generator/template/src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 21 | -------------------------------------------------------------------------------- /demo/micro-apps/demo1/README.md: -------------------------------------------------------------------------------- 1 | # demo1 2 | 3 | ## Project setup 4 | 5 | ``` 6 | npm install 7 | ``` 8 | 9 | ### Compiles and hot-reloads for development 10 | 11 | ``` 12 | npm run serve 13 | ``` 14 | 15 | ### Compiles and minifies for production 16 | 17 | ``` 18 | npm run build 19 | ``` 20 | 21 | ### Run your tests 22 | 23 | ``` 24 | npm run test 25 | ``` 26 | 27 | ### Lints and fixes files 28 | 29 | ``` 30 | npm run lint 31 | ``` 32 | 33 | ### Customize configuration 34 | 35 | See [Configuration Reference](https://cli.vuejs.org/config/). 36 | -------------------------------------------------------------------------------- /demo/portal/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 | // 用户信息 9 | userInfo:{ 10 | userName:'admin', 11 | userId:'12324' 12 | }, 13 | // 其他要传递的数据 14 | micro:{ 15 | name:'micro1', 16 | data:{ 17 | id:'1', 18 | url:'http://1111' 19 | } 20 | } 21 | }, 22 | mutations: {}, 23 | actions: { 24 | setMicro({state},data){ 25 | state.micro = data 26 | } 27 | }, 28 | modules: {}, 29 | }); 30 | -------------------------------------------------------------------------------- /vue-cli-plugin-qiankun-portal/generator/template/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 | // 用户信息 9 | userInfo:{ 10 | userName:'admin', 11 | userId:'12324' 12 | }, 13 | // 其他要传递的数据 14 | micro:{ 15 | name:'micro1', 16 | data:{ 17 | id:'1', 18 | url:'http://1111' 19 | } 20 | } 21 | }, 22 | mutations: {}, 23 | actions: { 24 | setMicro({state},data){ 25 | state.micro = data 26 | } 27 | }, 28 | modules: {}, 29 | }); 30 | -------------------------------------------------------------------------------- /demo/portal/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | 4 | Vue.use(VueRouter) 5 | 6 | const routes = [ 7 | { 8 | path:'/', 9 | redirect:'/demo1' 10 | }, 11 | { 12 | path: '/demo1*', 13 | name: 'demo1', 14 | component: () => import(/* webpackChunkName: "about" */ '../components/demo1') 15 | }, 16 | { 17 | path: '/demo2*', 18 | name: 'demo2', 19 | component: () => import(/* webpackChunkName: "about" */ '../components/demo2') 20 | } 21 | ] 22 | 23 | const router = new VueRouter({ 24 | mode: 'history', 25 | routes 26 | }) 27 | 28 | 29 | export default router -------------------------------------------------------------------------------- /demo/portal/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | client 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /demo/micro-apps/demo1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo1", 3 | "version": "0.1.0", 4 | "scripts": { 5 | "start": "vue-cli-service serve", 6 | "serve": "vue-cli-service serve --port 7101", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "core-js": "^3.3.2", 11 | "element-ui": "^2.12.0", 12 | "less": "^3.10.3", 13 | "less-loader": "^5.0.0", 14 | "vue": "^2.6.10", 15 | "vue-router": "^3.1.3", 16 | "vuex": "^3.0.1" 17 | }, 18 | "devDependencies": { 19 | "@vue/cli-plugin-babel": "^4.0.0", 20 | "@vue/cli-service": "^4.0.0", 21 | "vue-template-compiler": "^2.6.10" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /vue-cli-plugin-qiankun-portal/generator/template/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | 4 | Vue.use(VueRouter) 5 | 6 | const routes = [ 7 | { 8 | path:'/', 9 | redirect:'/demo1' 10 | }, 11 | { 12 | path: '/demo1*', 13 | name: 'demo1', 14 | component: () => import(/* webpackChunkName: "about" */ '../components/demo1') 15 | }, 16 | { 17 | path: '/demo2*', 18 | name: 'demo2', 19 | component: () => import(/* webpackChunkName: "about" */ '../components/demo2') 20 | } 21 | ] 22 | 23 | const router = new VueRouter({ 24 | mode: 'history', 25 | routes 26 | }) 27 | 28 | 29 | export default router -------------------------------------------------------------------------------- /demo/micro-apps/demo1/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: '/home', 15 | name: 'home', 16 | component: Home, 17 | }, 18 | { 19 | path: '/about', 20 | name: 'about', 21 | // route level code-splitting 22 | // this generates a separate chunk (about.[hash].js) for this route 23 | // which is lazy-loaded when the route is visited. 24 | component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'), 25 | }, 26 | ]; 27 | 28 | export default routes; 29 | -------------------------------------------------------------------------------- /vue-cli-plugin-qiankun-microapp/generator/template/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: '/home', 15 | name: 'home', 16 | component: Home, 17 | }, 18 | { 19 | path: '/about', 20 | name: 'about', 21 | // route level code-splitting 22 | // this generates a separate chunk (about.[hash].js) for this route 23 | // which is lazy-loaded when the route is visited. 24 | component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'), 25 | }, 26 | ]; 27 | 28 | export default routes; 29 | -------------------------------------------------------------------------------- /demo/portal/src/assets/css/reset.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: "Microsoft Yahei", "PingFang SC" ,"Hiragino Sans GB", tahoma, arial; 3 | box-sizing: border-box; 4 | font-size: 14px; 5 | } 6 | body, 7 | ol, 8 | ul, 9 | h1, 10 | h2, 11 | h3, 12 | h4, 13 | h5, 14 | h6, 15 | p, 16 | th, 17 | td, 18 | dl, 19 | dd, 20 | form, 21 | fieldset, 22 | legend, 23 | input, 24 | textarea, 25 | select { 26 | margin: 0; 27 | padding: 0; 28 | } 29 | html { 30 | height: 100%; 31 | } 32 | body { 33 | height: 100%; 34 | overflow: auto; 35 | } 36 | body::-webkit-scrollbar { 37 | display: none; 38 | } 39 | a { 40 | color: #2d374b; 41 | text-decoration: none; 42 | } 43 | li { 44 | list-style: none; 45 | } 46 | img { 47 | border: 0; 48 | vertical-align: middle; 49 | } 50 | table { 51 | border-collapse: collapse; 52 | border-spacing: 0; 53 | } 54 | p { 55 | word-wrap: break-word; 56 | } -------------------------------------------------------------------------------- /vue-cli-plugin-qiankun-portal/generator/template/src/assets/css/reset.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: "Microsoft Yahei", "PingFang SC" ,"Hiragino Sans GB", tahoma, arial; 3 | box-sizing: border-box; 4 | font-size: 14px; 5 | } 6 | body, 7 | ol, 8 | ul, 9 | h1, 10 | h2, 11 | h3, 12 | h4, 13 | h5, 14 | h6, 15 | p, 16 | th, 17 | td, 18 | dl, 19 | dd, 20 | form, 21 | fieldset, 22 | legend, 23 | input, 24 | textarea, 25 | select { 26 | margin: 0; 27 | padding: 0; 28 | } 29 | html { 30 | height: 100%; 31 | } 32 | body { 33 | height: 100%; 34 | overflow: auto; 35 | } 36 | body::-webkit-scrollbar { 37 | display: none; 38 | } 39 | a { 40 | color: #2d374b; 41 | text-decoration: none; 42 | } 43 | li { 44 | list-style: none; 45 | } 46 | img { 47 | border: 0; 48 | vertical-align: middle; 49 | } 50 | table { 51 | border-collapse: collapse; 52 | border-spacing: 0; 53 | } 54 | p { 55 | word-wrap: break-word; 56 | } -------------------------------------------------------------------------------- /vue-cli-plugin-qiankun-microapp/generator/template/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 23 | 24 | 25 | 50 | -------------------------------------------------------------------------------- /demo/portal/src/components/navBar.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 25 | 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ***\* vue-cli-plugin-qiankun\**** 2 | 3 | > An Vue-cli3 Plugin for micro-frontend qiankun application 4 | 5 | 结合 qiankun 快速生成微前端应用的脚手架插件 6 | 7 | 8 | 9 | ## Features 10 | 11 | - qiankun 接入，子应用打包配置接入 12 | 13 | - 修改 qiankun 官网 demo 中 vue 子应用 public 下静态资源加载不出来的问题 14 | 15 | - 主应用和子应用中基础的路由处理 16 | 17 | - demo 中增加了父子组件之间通信的示例 18 | 19 | - IE下的兼容显示(关闭jsSandbox,fetch 增加 pollyfill) 20 | 21 | 22 | 23 | ## Demo 24 | 25 | ![demo](./demo.png) 26 | 27 | 28 | 29 | ## Setup 30 | 31 | 主应用生成方式 32 | 33 | ``` 34 | vue create portal 35 | cd portal 36 | vue add vue-cli-plugin-qiankun-portal 37 | ``` 38 | 39 | 子应用生成方式 40 | 41 | ``` 42 | vue create demo1 43 | cd demo1 44 | vue add vue-cli-plugin-qiankun-microapp 45 | ``` 46 | 47 | ## Inspired 48 | 49 | - [qiankun](https://github.com/umijs/qiankun) 50 | - [vue-cli-plugin-qiankun](https://github.com/F-loat/vue-cli-plugin-qiankun) 51 | - [wl-micro-frontends](https://github.com/hql7/wl-micro-frontends) 52 | 53 | 54 | ## test -------------------------------------------------------------------------------- /vue-cli-plugin-qiankun-portal/generator/template/src/components/navBar.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 25 | 26 | -------------------------------------------------------------------------------- /demo/micro-apps/demo1/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 25 | 26 | 27 | 52 | -------------------------------------------------------------------------------- /demo/micro-apps/demo1/src/App.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 27 | 28 | 50 | -------------------------------------------------------------------------------- /vue-cli-plugin-qiankun-microapp/generator/template/src/App.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 27 | 28 | 50 | -------------------------------------------------------------------------------- /vue-cli-plugin-qiankun-microapp/generator/index.js: -------------------------------------------------------------------------------- 1 | module.exports = (api) => { 2 | const { port } = api.options 3 | const { projectName } = api.rootOptions 4 | 5 | api.render('./template') 6 | 7 | api.extendPackage({ 8 | scripts: { 9 | serve: `vue-cli-service serve --port ${port}` 10 | }, 11 | dependencies:{ 12 | 'vue-router':'^3.1.5', 13 | "less": "^3.10.3", 14 | "less-loader": "^5.0.0" 15 | } 16 | }) 17 | 18 | api.postProcessFiles((files) => { 19 | const routerConfigPath = 'src/main.js' 20 | const vueConfigPath = 'vue.config.js' 21 | 22 | // 替换 vue-router 的 basePath 23 | if (files[routerConfigPath]) { 24 | files[routerConfigPath] = files[routerConfigPath].replace( 25 | /base: process.env.BASE_URL,/, 26 | `base: window.__POWERED_BY_QIANKUN__ ? '/${projectName}' : '/',` 27 | ) 28 | } 29 | 30 | // 替换 publicPath 31 | if (files[vueConfigPath]) { 32 | files[vueConfigPath] = files[vueConfigPath].replace( 33 | /TARGET_PUBLIC_PATH_TO_BE_REPLACED/, 34 | `//localhost:${port}` 35 | ) 36 | } 37 | }) 38 | } 39 | -------------------------------------------------------------------------------- /vue-cli-plugin-qiankun-microapp/generator/template/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import VueRouter from 'vue-router'; 3 | import App from './App.vue'; 4 | import routes from './router'; 5 | 6 | Vue.config.productionTip = false; 7 | 8 | let router = null; 9 | let instance = null; 10 | 11 | function render() { 12 | router = new VueRouter({ 13 | base: process.env.BASE_URL, 14 | mode: 'history', 15 | routes, 16 | }); 17 | 18 | instance = new Vue({ 19 | router, 20 | render: h => h(App), 21 | }).$mount('#app'); 22 | } 23 | 24 | if (!window.__POWERED_BY_QIANKUN__) { 25 | render(); 26 | } 27 | 28 | export async function bootstrap() { 29 | console.log('vue app bootstraped'); 30 | } 31 | 32 | export async function mount(props) { 33 | console.log('props from main framework', props); 34 | console.log(props.data.userInfo) 35 | Array.isArray(props.data.fns) && props.data.fns.map(i => { 36 | console.log(i) 37 | Vue.prototype[`$${i.name}`] = i 38 | }); 39 | render(); 40 | } 41 | 42 | export async function unmount() { 43 | instance.$destroy(); 44 | instance = null; 45 | router = null; 46 | } 47 | -------------------------------------------------------------------------------- /demo/portal/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "portal", 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 | }, 10 | "dependencies": { 11 | "axios": "^0.19.1", 12 | "core-js": "^3.4.4", 13 | "element-ui": "^2.13.0", 14 | "es6-promise": "^4.2.8", 15 | "less": "^3.10.3", 16 | "less-loader": "^5.0.0", 17 | "qiankun": "^1.4.3", 18 | "vue": "^2.6.10", 19 | "vue-router": "^3.1.5", 20 | "vuex": "^3.1.3", 21 | "whatwg-fetch": "^3.0.0" 22 | }, 23 | "devDependencies": { 24 | "@vue/cli-plugin-babel": "^4.1.0", 25 | "@vue/cli-plugin-eslint": "^4.1.0", 26 | "@vue/cli-service": "^4.1.0", 27 | "babel-eslint": "^10.0.3", 28 | "eslint": "^5.16.0", 29 | "eslint-plugin-vue": "^5.0.0", 30 | "vue-template-compiler": "^2.6.10" 31 | }, 32 | "eslintConfig": { 33 | "root": true, 34 | "env": { 35 | "node": true 36 | }, 37 | "extends": [ 38 | "plugin:vue/essential" 39 | ], 40 | "rules": {}, 41 | "parserOptions": { 42 | "parser": "babel-eslint" 43 | } 44 | }, 45 | "browserslist": [ 46 | "> 1%", 47 | "last 2 versions" 48 | ] 49 | } 50 | -------------------------------------------------------------------------------- /demo/micro-apps/demo1/src/main.js: -------------------------------------------------------------------------------- 1 | import ElementUI from 'element-ui'; 2 | import 'element-ui/lib/theme-chalk/index.css'; 3 | import Vue from 'vue'; 4 | import VueRouter from 'vue-router'; 5 | import App from './App.vue'; 6 | import routes from './router'; 7 | import store from './store'; 8 | 9 | Vue.config.productionTip = false; 10 | 11 | Vue.use(ElementUI); 12 | 13 | let router = null; 14 | let instance = null; 15 | 16 | function render() { 17 | router = new VueRouter({ 18 | base: window.__POWERED_BY_QIANKUN__ ? '/demo1' : '/', 19 | mode: 'history', 20 | routes, 21 | }); 22 | 23 | instance = new Vue({ 24 | router, 25 | store, 26 | render: h => h(App), 27 | }).$mount('#app'); 28 | } 29 | 30 | if (!window.__POWERED_BY_QIANKUN__) { 31 | render(); 32 | } 33 | 34 | export async function bootstrap() { 35 | console.log('vue app bootstraped'); 36 | } 37 | 38 | export async function mount(props) { 39 | console.log('props from main framework', props); 40 | console.log(props.data.userInfo) 41 | Array.isArray(props.data.fns) && props.data.fns.map(i => { 42 | console.log(i) 43 | Vue.prototype[`$${i.name}`] = i 44 | }); 45 | render(); 46 | } 47 | 48 | export async function unmount() { 49 | instance.$destroy(); 50 | instance = null; 51 | router = null; 52 | } 53 | -------------------------------------------------------------------------------- /vue-cli-plugin-qiankun-microapp/generator/template/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 | module.exports = { 9 | /** 10 | * You will need to set publicPath if you plan to deploy your site under a sub path, 11 | * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/, 12 | * then publicPath should be set to "/bar/". 13 | * In most cases please use '/' !!! 14 | * Detail: https://cli.vuejs.org/config/#publicpath 15 | */ 16 | publicPath:'TARGET_PUBLIC_PATH_TO_BE_REPLACED', 17 | outputDir: 'dist', 18 | assetsDir: 'static', 19 | filenameHashing: true, 20 | // tweak internal webpack configuration. 21 | // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md 22 | devServer: { 23 | // host: '0.0.0.0', 24 | hot: true, 25 | disableHostCheck: true, 26 | historyApiFallback:true, 27 | overlay: { 28 | warnings: false, 29 | errors: true, 30 | }, 31 | headers: { 32 | 'Access-Control-Allow-Origin': '*', 33 | }, 34 | }, 35 | // 自定义webpack配置 36 | configureWebpack: { 37 | resolve: { 38 | alias: { 39 | '@': resolve('src'), 40 | }, 41 | }, 42 | output: { 43 | // 把子应用打包成 umd 库格式 44 | library: `${name}-[name]`, 45 | libraryTarget: 'umd', 46 | jsonpFunction: `webpackJsonp_${name}`, 47 | }, 48 | }, 49 | }; 50 | -------------------------------------------------------------------------------- /demo/micro-apps/demo1/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 = 7101; // dev port 9 | 10 | module.exports = { 11 | /** 12 | * You will need to set publicPath if you plan to deploy your site under a sub path, 13 | * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/, 14 | * then publicPath should be set to "/bar/". 15 | * In most cases please use '/' !!! 16 | * Detail: https://cli.vuejs.org/config/#publicpath 17 | */ 18 | publicPath:'//localhost:7101', 19 | outputDir: 'dist', 20 | assetsDir: 'static', 21 | filenameHashing: true, 22 | // tweak internal webpack configuration. 23 | // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md 24 | devServer: { 25 | // host: '0.0.0.0', 26 | hot: true, 27 | disableHostCheck: true, 28 | historyApiFallback:true, 29 | port, 30 | overlay: { 31 | warnings: false, 32 | errors: true, 33 | }, 34 | headers: { 35 | 'Access-Control-Allow-Origin': '*', 36 | }, 37 | }, 38 | // 自定义webpack配置 39 | configureWebpack: { 40 | resolve: { 41 | alias: { 42 | '@': resolve('src'), 43 | }, 44 | }, 45 | output: { 46 | // 把子应用打包成 umd 库格式 47 | library: `${name}-[name]`, 48 | libraryTarget: 'umd', 49 | jsonpFunction: `webpackJsonp_${name}`, 50 | }, 51 | }, 52 | }; 53 | -------------------------------------------------------------------------------- /vue-cli-plugin-qiankun-portal/generator/template/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App'; 3 | import router from './router' 4 | import store from './store' 5 | import {fetch as fetchPolyfill} from 'whatwg-fetch' 6 | import { registerMicroApps, setDefaultMountApp, start } from 'qiankun'; 7 | 8 | import './assets/css/reset.css' 9 | 10 | Vue.config.productionTip = false 11 | 12 | let app = null; 13 | 14 | function render({ appContent, loading }) { 15 | if (!app) { 16 | app = new Vue({ 17 | el: '#app', 18 | router, 19 | store, 20 | data() { 21 | return { 22 | content: appContent, 23 | loading, 24 | }; 25 | }, 26 | render(h) { 27 | return h(App, { 28 | props: { 29 | content: this.content, 30 | loading: this.loading, 31 | }, 32 | }); 33 | }, 34 | }); 35 | } else { 36 | app.content = appContent; 37 | app.loading = loading; 38 | } 39 | } 40 | 41 | function genActiveRule(routerPrefix) { 42 | return location => location.pathname.startsWith(routerPrefix); 43 | } 44 | 45 | function initApp() { 46 | render({ appContent: '', loading: true }); 47 | } 48 | 49 | const request = (url) => { 50 | fetchPolyfill(url, { 51 | referrerPolicy: 'origin-when-cross-origin', 52 | }) 53 | } 54 | 55 | initApp(); 56 | 57 | let msg = { 58 | data: { 59 | userInfo: store.state.userInfo, 60 | fns:[ 61 | function getMicro(){ 62 | return store.state.micro 63 | } 64 | ] 65 | } 66 | }; 67 | 68 | registerMicroApps( 69 | [{ name: 'vue app1', 70 | entry: '//localhost:7101', 71 | render, 72 | activeRule: genActiveRule('/demo1'), 73 | props:msg 74 | }], 75 | ); 76 | 77 | setDefaultMountApp('/demo1'); 78 | 79 | start({ prefetch: false, jsSandbox: false,fetch:request}); 80 | 81 | -------------------------------------------------------------------------------- /demo/portal/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App'; 3 | import router from './router' 4 | import store from './store' 5 | import {fetch as fetchPolyfill} from 'whatwg-fetch' 6 | import { registerMicroApps, setDefaultMountApp, start } from 'qiankun'; 7 | 8 | import './assets/css/reset.css' 9 | 10 | Vue.config.productionTip = false 11 | 12 | let app = null; 13 | 14 | function render({ appContent, loading }) { 15 | if (!app) { 16 | app = new Vue({ 17 | el: '#app', 18 | router, 19 | store, 20 | data() { 21 | return { 22 | content: appContent, 23 | loading, 24 | }; 25 | }, 26 | render(h) { 27 | return h(App, { 28 | props: { 29 | content: this.content, 30 | loading: this.loading, 31 | }, 32 | }); 33 | }, 34 | }); 35 | } else { 36 | app.content = appContent; 37 | app.loading = loading; 38 | } 39 | } 40 | 41 | function genActiveRule(routerPrefix) { 42 | return location => location.pathname.startsWith(routerPrefix); 43 | } 44 | 45 | function initApp() { 46 | render({ appContent: '', loading: true }); 47 | } 48 | 49 | const request = (url) => { 50 | fetchPolyfill(url, { 51 | referrerPolicy: 'origin-when-cross-origin', 52 | }) 53 | } 54 | 55 | initApp(); 56 | 57 | 58 | let msg = { 59 | data: { 60 | userInfo: store.state.userInfo, 61 | fns:[ 62 | function getMicro(){ 63 | return store.state.micro 64 | } 65 | ] 66 | } 67 | }; 68 | 69 | 70 | registerMicroApps( 71 | [ 72 | { name: 'vue app1', 73 | entry: '//localhost:7101', 74 | render, 75 | activeRule: genActiveRule('/demo1'), 76 | props:msg 77 | } 78 | ], 79 | ); 80 | 81 | setDefaultMountApp('/demo1'); 82 | 83 | start({ prefetch: false, jsSandbox: false,fetch:request}); 84 | 85 | --------------------------------------------------------------------------------