📝 add vue3.0 example (#976)

* #0: add vue3 demo * #0: add router for vue3 demo in main demo * #0: update package.json * #0: update name Co-authored-by: chaunjie <chaunjie@dingtalk.com>
2020-10-09 23:24:13 +08:00 · 2020-10-09 23:24:13 +08:00 · b57f94cff1
commit b57f94cff1
parent 2319edf022
21 changed files with 447 additions and 0 deletions
--- a/examples/example.gif
+++ b/examples/example.gif
--- a/examples/main/index.html
+++ b/examples/main/index.html
@ -18,6 +18,7 @@
        <li onclick="push('/react16')">React16</li>
        <li onclick="push('/react15')">React15</li>
        <li onclick="push('/vue')">Vue</li>
+        <li onclick="push('/vue3')">Vue3</li>
        <li onclick="push('/angular9')">Angular9</li>
        <li onclick="push('/purehtml')">Purehtml</li>
      </ul>
--- 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: [
--- a/examples/vue3/.gitignore
+++ 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?
--- a/examples/vue3/README.md
+++ 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/).
--- a/examples/vue3/babel.config.js
+++ b/examples/vue3/babel.config.js
@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@vue/cli-plugin-babel/preset'],
+};
--- a/examples/vue3/package.json
+++ 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"
+  ]
+}
--- a/examples/vue3/public/favicon.ico
+++ b/examples/vue3/public/favicon.ico
--- a/examples/vue3/public/index.html
+++ b/examples/vue3/public/index.html
@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please
+        enable it to continue.</strong
+      >
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/examples/vue3/src/App.vue
+++ b/examples/vue3/src/App.vue
@ -0,0 +1,32 @@
+<template>
+  <div id="app">
+    <div id="nav">
+      <router-link to="/">Home</router-link> |
+      <router-link to="/about">About</router-link>
+    </div>
+    <router-view/>
+  </div>
+</template>
+
+<style lang="less">
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+#nav {
+  padding: 30px;
+
+  a {
+    font-weight: bold;
+    color: #2c3e50;
+
+    &.router-link-exact-active {
+      color: #42b983;
+    }
+  }
+}
+</style>
--- a/examples/vue3/src/assets/logo.png
+++ b/examples/vue3/src/assets/logo.png
--- a/examples/vue3/src/components/HelloWorld.vue
+++ b/examples/vue3/src/components/HelloWorld.vue
@ -0,0 +1,74 @@
+<template>
+  <div class="hello-content">
+    <h1>{{ msg }}</h1>
+    <p>Vue version: {{ version }}</p>
+  </div>
+</template>
+
+<script>
+import { onMounted, onBeforeUpdate, getCurrentInstance, version } from 'vue';
+
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String,
+  },
+
+  data() {
+    return {
+      nameColor: 'orange',
+    };
+  },
+
+  setup() {
+    const { ctx } = getCurrentInstance();
+
+    const changeGlobalState = () => {
+      if (ctx.$setGlobalState) {
+        console.log('此处可设置全局state');
+        // ctx.$setGlobalState({name: 'chaunjie'})
+      }
+    };
+
+    onMounted(() => {
+      console.log('mounted');
+    });
+
+    onBeforeUpdate(() => {
+      console.log('beforeUpdate');
+    });
+
+    return {
+      changeGlobalState,
+      version,
+    };
+  },
+};
+</script>
+
+<style vars="{nameColor}">
+.name {
+  color: var(--nameColor);
+}
+</style>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+h1 {
+  color: #64b587;
+}
+</style>
--- a/examples/vue3/src/main.js
+++ 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;
+}
--- a/examples/vue3/src/public-path.js
+++ 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__;
+}
--- a/examples/vue3/src/router/index.js
+++ 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;
--- a/examples/vue3/src/store/count.js
+++ 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);
+      });
+    },
+  },
+};
--- a/examples/vue3/src/store/index.js
+++ 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,
+  },
+});
--- a/examples/vue3/src/views/About.vue
+++ b/examples/vue3/src/views/About.vue
@ -0,0 +1,19 @@
+<template>
+  <div class="about-content">
+    <h1>This is about page</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'About',
+  setup() {},
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.about-content {
+  color: #7265e6;
+}
+</style>
--- a/examples/vue3/src/views/Home.vue
+++ b/examples/vue3/src/views/Home.vue
@ -0,0 +1,37 @@
+<template>
+  <img alt="Vue logo" src="../assets/logo.png" />
+  <HelloWorld msg="Vue.js Demo" @close="close"> </HelloWorld>
+</template>
+
+<script>
+import HelloWorld from '@/components/HelloWorld.vue';
+
+export default {
+  name: 'App',
+  components: {
+    HelloWorld,
+  },
+  created() {
+    console.log('vue2.0写法 created');
+  },
+  mounted() {
+    console.log(this.$route);
+  },
+  methods: {
+    close() {
+      console.log('close');
+    },
+  },
+};
+</script>
+
+<style>
+/* #app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+} */
+</style>
--- a/examples/vue3/vue.config.js
+++ 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}`,
+    },
+  },
+};
--- 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",