diff --git a/examples/example.gif b/examples/example.gif index be96847..205b290 100644 Binary files a/examples/example.gif and b/examples/example.gif differ diff --git a/examples/main/index.html b/examples/main/index.html index 8b3f2f2..1afda82 100644 --- a/examples/main/index.html +++ b/examples/main/index.html @@ -18,6 +18,7 @@
  • React16
  • React15
  • Vue
    • +
  • Vue3
  • Angular9
  • Purehtml
    • diff --git a/examples/main/index.js b/examples/main/index.js index 55d4b5b..eecdacc 100644 --- a/examples/main/index.js +++ b/examples/main/index.js @@ -59,6 +59,13 @@ registerMicroApps( loader, activeRule: '/purehtml', }, + { + name: 'vue3', + entry: '//localhost:7105', + container: '#subapp-viewport', + loader, + activeRule: '/vue3', + }, ], { beforeLoad: [ diff --git a/examples/vue3/.gitignore b/examples/vue3/.gitignore new file mode 100644 index 0000000..403adbc --- /dev/null +++ b/examples/vue3/.gitignore @@ -0,0 +1,23 @@ +.DS_Store +node_modules +/dist + + +# local env files +.env.local +.env.*.local + +# Log files +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# Editor directories and files +.idea +.vscode +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/examples/vue3/README.md b/examples/vue3/README.md new file mode 100644 index 0000000..8ec0d8e --- /dev/null +++ b/examples/vue3/README.md @@ -0,0 +1,29 @@ +# hello-vue3 + +## Project setup + +``` +npm install +``` + +### Compiles and hot-reloads for development + +``` +npm run serve +``` + +### Compiles and minifies for production + +``` +npm run build +``` + +### Lints and fixes files + +``` +npm run lint +``` + +### Customize configuration + +See [Configuration Reference](https://cli.vuejs.org/config/). diff --git a/examples/vue3/babel.config.js b/examples/vue3/babel.config.js new file mode 100644 index 0000000..078c005 --- /dev/null +++ b/examples/vue3/babel.config.js @@ -0,0 +1,3 @@ +module.exports = { + presets: ['@vue/cli-plugin-babel/preset'], +}; diff --git a/examples/vue3/package.json b/examples/vue3/package.json new file mode 100644 index 0000000..1e2233e --- /dev/null +++ b/examples/vue3/package.json @@ -0,0 +1,45 @@ +{ + "name": "vue3", + "version": "0.1.0", + "private": true, + "scripts": { + "start": "vue-cli-service serve", + "serve": "vue-cli-service serve", + "build": "vue-cli-service build", + "lint": "vue-cli-service lint" + }, + "dependencies": { + "core-js": "^3.6.5", + "vue": "^3.0.0-0", + "vue-router": "^4.0.0-beta.11", + "vuex": "^4.0.0-beta.4" + }, + "devDependencies": { + "@vue/cli-plugin-babel": "~4.5.0", + "@vue/cli-plugin-eslint": "~4.5.0", + "@vue/cli-service": "~4.5.0", + "@vue/compiler-sfc": "^3.0.0-0", + "babel-eslint": "^10.1.0", + "eslint": "^6.7.2", + "eslint-plugin-vue": "^7.0.0-0" + }, + "eslintConfig": { + "root": true, + "env": { + "node": true + }, + "extends": [ + "plugin:vue/vue3-essential", + "eslint:recommended" + ], + "parserOptions": { + "parser": "babel-eslint" + }, + "rules": {} + }, + "browserslist": [ + "> 1%", + "last 2 versions", + "not dead" + ] +} diff --git a/examples/vue3/public/favicon.ico b/examples/vue3/public/favicon.ico new file mode 100644 index 0000000..df36fcf Binary files /dev/null and b/examples/vue3/public/favicon.ico differ diff --git a/examples/vue3/public/index.html b/examples/vue3/public/index.html new file mode 100644 index 0000000..26d7f80 --- /dev/null +++ b/examples/vue3/public/index.html @@ -0,0 +1,20 @@ + + + + + + + + <%= htmlWebpackPlugin.options.title %> + + + +
    + + + diff --git a/examples/vue3/src/App.vue b/examples/vue3/src/App.vue new file mode 100644 index 0000000..1a221f0 --- /dev/null +++ b/examples/vue3/src/App.vue @@ -0,0 +1,32 @@ + + + diff --git a/examples/vue3/src/assets/logo.png b/examples/vue3/src/assets/logo.png new file mode 100644 index 0000000..f3d2503 Binary files /dev/null and b/examples/vue3/src/assets/logo.png differ diff --git a/examples/vue3/src/components/HelloWorld.vue b/examples/vue3/src/components/HelloWorld.vue new file mode 100644 index 0000000..f9cea42 --- /dev/null +++ b/examples/vue3/src/components/HelloWorld.vue @@ -0,0 +1,74 @@ + + + + + + + + diff --git a/examples/vue3/src/main.js b/examples/vue3/src/main.js new file mode 100644 index 0000000..22a6e5d --- /dev/null +++ b/examples/vue3/src/main.js @@ -0,0 +1,59 @@ +import './public-path'; +import { createApp } from 'vue'; +import { createRouter, createWebHistory } from 'vue-router'; +import App from './App.vue'; +import routes from './router'; +import store from './store'; + +let router = null; +let instance = null; + +function render(props = {}) { + const { container } = props; + router = createRouter({ + history: createWebHistory(window.__POWERED_BY_QIANKUN__ ? '/vue3' : '/'), + routes, + }); + + instance = createApp(App); + instance.use(router); + instance.use(store); + instance.mount(container ? container.querySelector('#app') : '#app'); +} + +if (!window.__POWERED_BY_QIANKUN__) { + render(); +} + +export async function bootstrap() { + console.log('%c ', 'color: green;', 'vue3.0 app bootstraped'); +} + +function storeTest(props) { + props.onGlobalStateChange && + props.onGlobalStateChange( + (value, prev) => console.log(`[onGlobalStateChange - ${props.name}]:`, value, prev), + true, + ); + props.setGlobalState && + props.setGlobalState({ + ignore: props.name, + user: { + name: props.name, + }, + }); +} + +export async function mount(props) { + storeTest(props); + render(); + instance.config.globalProperties.$onGlobalStateChange = props.onGlobalStateChange; + instance.config.globalProperties.$setGlobalState = props.setGlobalState; +} + +export async function unmount() { + instance.unmount(); + instance._container.innerHTML = ''; + instance = null; + router = null; +} diff --git a/examples/vue3/src/public-path.js b/examples/vue3/src/public-path.js new file mode 100644 index 0000000..15757ab --- /dev/null +++ b/examples/vue3/src/public-path.js @@ -0,0 +1,4 @@ +if (window.__POWERED_BY_QIANKUN__) { + // eslint-disable-next-line no-undef + __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; +} diff --git a/examples/vue3/src/router/index.js b/examples/vue3/src/router/index.js new file mode 100644 index 0000000..46adaf0 --- /dev/null +++ b/examples/vue3/src/router/index.js @@ -0,0 +1,6 @@ +const routes = [ + { path: '/', name: 'home', component: () => import(/* webpackChunkName: "home" */ '@/views/Home') }, + { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ '@/views/About') }, +]; + +export default routes; diff --git a/examples/vue3/src/store/count.js b/examples/vue3/src/store/count.js new file mode 100644 index 0000000..8f76f38 --- /dev/null +++ b/examples/vue3/src/store/count.js @@ -0,0 +1,34 @@ +export default { + namespaced: true, + state: { + count: 0, + }, + getters: { + evenOrOdd: state => (state.count % 2 === 0 ? 'even' : 'odd'), + }, + mutations: { + increment(state) { + state.count++; + }, + decrement(state) { + state.count--; + }, + }, + actions: { + increment: ({ commit }) => commit('increment'), + decrement: ({ commit }) => commit('decrement'), + incrementIfOdd({ commit, state }) { + if ((state.count + 1) % 2 === 0) { + commit('increment'); + } + }, + incrementAsync({ commit }) { + return new Promise(resolve => { + setTimeout(() => { + commit('increment'); + resolve(); + }, 1000); + }); + }, + }, +}; diff --git a/examples/vue3/src/store/index.js b/examples/vue3/src/store/index.js new file mode 100644 index 0000000..41a35fd --- /dev/null +++ b/examples/vue3/src/store/index.js @@ -0,0 +1,12 @@ +import { createStore } from 'vuex'; +import count from './count'; + +export default createStore({ + state: {}, + mutations: {}, + actions: {}, + getters: {}, + modules: { + count, + }, +}); diff --git a/examples/vue3/src/views/About.vue b/examples/vue3/src/views/About.vue new file mode 100644 index 0000000..245b166 --- /dev/null +++ b/examples/vue3/src/views/About.vue @@ -0,0 +1,19 @@ + + + + + + diff --git a/examples/vue3/src/views/Home.vue b/examples/vue3/src/views/Home.vue new file mode 100644 index 0000000..fab511c --- /dev/null +++ b/examples/vue3/src/views/Home.vue @@ -0,0 +1,37 @@ + + + + + diff --git a/examples/vue3/vue.config.js b/examples/vue3/vue.config.js new file mode 100644 index 0000000..2703bd5 --- /dev/null +++ b/examples/vue3/vue.config.js @@ -0,0 +1,40 @@ +const path = require('path'); +const { name } = require('./package'); + +function resolve(dir) { + return path.join(__dirname, dir); +} + +const port = 7105; + +module.exports = { + outputDir: 'dist', + assetsDir: 'static', + filenameHashing: true, + devServer: { + hot: true, + disableHostCheck: true, + port, + overlay: { + warnings: false, + errors: true, + }, + headers: { + 'Access-Control-Allow-Origin': '*', + }, + }, + // 自定义webpack配置 + configureWebpack: { + resolve: { + alias: { + '@': resolve('src'), + }, + }, + output: { + // 把子应用打包成 umd 库格式 + library: `${name}-[name]`, + libraryTarget: 'umd', + jsonpFunction: `webpackJsonp_${name}`, + }, + }, +}; diff --git a/package.json b/package.json index bb36994..0c9db8c 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,8 @@ "start:angular9": "cd examples/angular9 && yarn serve:qiankun", "install:purehtml": "cd examples/purehtml && yarn", "start:purehtml": "cd examples/purehtml && yarn start", + "install:vue3": "cd examples/vue3 && yarn", + "start:vue3": "cd examples/vue3 && yarn start", "build": "father-build", "release": "np --no-cleanup --yolo --no-publish", "prepublishOnly": "yarn lint && yarn test && yarn build",