thx · tsstnt · Mar 16, 2022
diff --git a/.eslintignore b/.eslintignore
@@ -7,4 +7,5 @@ packages/esbuild-import-plugin
 packages/transform-project
 packages/gogocode-vue-playground
 packages/gogocode-element-playground
+packages/gogocode-antd-playground
 packages/gogocode-core/umd
diff --git a/packages/gogocode-antd-playground/.eslintrc.js b/packages/gogocode-antd-playground/.eslintrc.js
@@ -0,0 +1,16 @@
+module.exports = {
+    env: {
+        browser: true,
+        es2021: true,
+    },
+    extends: ['eslint:recommended', 'plugin:vue/essential'],
+    parserOptions: {
+        ecmaVersion: 12,
+        sourceType: 'module',
+    },
+    rules: {
+        'no-debugger': 0,
+        'no-unused-vars': 0,
+        'vue/no-unused-components': 0,
+    },
+};
diff --git a/packages/gogocode-antd-playground/README.md b/packages/gogocode-antd-playground/README.md
@@ -0,0 +1,73 @@
+# GoGoCode Vue Playground
+
+## 简介
+
+为了直观对比 Vue2 和 Vue3 代码编写差异，方便检视 GoGoCode 的迁移效果
+
+使用 [qinakun](https://github.com/umijs/qiankun) 作为微前端方案
+
+Ref：[Vue3 迁移指南](https://v3.cn.vuejs.org/guide/migration/introduction.html)
+
+![](https://img.alicdn.com/imgextra/i3/O1CN01ABXJjm1fQxj473HRP_!!6000000004002-2-tps-2434-1058.png)
+
+## 开发
+
+### Node.js
+
+请使用 Node 14 版本
+### Host
+
+请确保有以下 host：
+
+`127.0.0.1 localhost`
+### Yarn
+
+为了多 repo 管理，借助了 yarn 的 workspace 能力，因此需要用 yarn 而不是 npm 管理
+
+安装 Yarn：
+
+`npm install -g yarn`
+
+安装 Yrm：
+
+`npm install -g yrm`
+
+切换成淘宝源加速安装：
+
+`yrm use taobao`
+
+安装依赖：
+
+`yarn`
+
+### 启动
+
+`yarn start`
+
+对比地址：
+
+[http://localhost:8099/](http://localhost:8099/)
+
+Vue2地址：
+
+[http://localhost:8102/](http://localhost:8102/)
+
+Vue3地址：
+
+[http://localhost:8103/](http://localhost:8103/)
+
+### 代码
+
+
+Vue2 目录：
+
+`packages/vue2/src/components`
+
+Vue3 目录：
+
+`packages/vue3/src/components`
+
+
+### Vue VsCode 插件
+
+为了方便你的开发，请下载 Vetur 插件
diff --git a/packages/gogocode-antd-playground/package.json b/packages/gogocode-antd-playground/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "gogocode-vue-playground",
+  "version": "1.0.0",
+  "description": "gogocode vue playground",
+  "main": "main/index.js",
+  "private": true,
+  "scripts": {
+    "start": "npm-run-all --parallel start:*",
+    "start:main": "yarn workspace main run start",
+    "start:vue2": "yarn workspace vue2 run start",
+    "start:vue3": "yarn workspace vue3 run start"
+  },
+  "workspaces": {
+    "packages": ["packages/*"],
+    "nohoist": ["**/vue", "**/vue/**", 
+                "**/vuex", "**/vuex/**",
+                "**/vue-router", "**/vue-router/**",
+                "**/@vue/cli-service", "**/@vue/cli-service/**"]
+  },
+  "repository": "git@gitlab.alibaba-inc.com:mm/gogocode-vue-playground.git",
+  "author": "ltan",
+  "license": "MIT",
+  "devDependencies": {
+    "npm-run-all": "^4.1.5"
+  }
+}
diff --git a/packages/gogocode-antd-playground/packages/main/comps-config.js b/packages/gogocode-antd-playground/packages/main/comps-config.js
@@ -0,0 +1,4 @@
+export const CompsConfig = [
+    { link: '/', text: '请选择组件以对比' },
+    { link: '/icon', text: 'icon' },
+];
diff --git a/packages/gogocode-antd-playground/packages/main/index.html b/packages/gogocode-antd-playground/packages/main/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="cn">
+  <head>
+    <meta charset="UTF-8" />
+    <title>GoGoCode Vue3 Playground</title>
+    <style>
+      body {
+        width: 100vw;
+        height: 100vh;
+      }
+      .compare {
+        display: flex;
+        justify-content: space-around;
+        align-items: top;
+      }
+      .mt10 {
+        margin-top: 10px;
+      }
+      .mt20 {
+        margin-top: 20px;
+      }
+      .mb10 {
+        margin-bottom: 10px;
+      }
+      .mb20 {
+        margin-bottom: 20px;
+      }
+      .tc {
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="main-app">
+      <h2 class="tc mt20 mb10">
+        GoGoCode Vue3 Playground
+      </h2>
+      <div class="mt20 mb20 tc">
+        <select v-model="selected" v-on:change="changeRoute">
+          <option v-for="option in CompsConfig" v-bind:value="option.link">
+            {{ option.text }}
+          </option>
+        </select>
+        <div class="mt10" v-if="selected !== '/'">
+          <a
+            :href="'https://v3.cn.vuejs.org/guide/migration'+selected"
+            target="_blank"
+            rel="noopener noreferrer"
+            >Vue Miragtion：{{selected}}</a
+          >
+        </div>
+      </div>
+    </div>
+    <div class="compare">
+      <div id="vue2">Vue2 loading...</div>
+      <div id="vue3">Vue3 loading...</div>
+    </div>
+  </body>
+</html>
diff --git a/packages/gogocode-antd-playground/packages/main/index.js b/packages/gogocode-antd-playground/packages/main/index.js
@@ -0,0 +1,53 @@
+import { loadMicroApp } from 'qiankun';
+import Vue from 'vue/dist/vue.esm';
+import { CompsConfig } from './comps-config';
+import VueRouter from 'vue-router';
+Vue.use(VueRouter);
+
+const router = new VueRouter({
+    base: '/',
+    mode: 'history',
+});
+
+new Vue({
+    el: '#main-app',
+    router,
+    data() {
+        return {
+            selected: '/',
+            CompsConfig,
+        };
+    },
+    mounted() {
+        this.selected = this.$route.path;
+    },
+    methods: {
+        changeRoute() {
+            this.$router.push({ path: this.selected });
+        },
+    },
+});
+
+const vue2App = loadMicroApp({
+    name: 'vue2',
+    entry: '//localhost:8102',
+    container: '#vue2',
+});
+
+const vue3App = loadMicroApp({
+    name: 'vue3',
+    entry: '//localhost:8103',
+    container: '#vue3',
+});
+
+class TestEle extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        const div = document.createElement('div');
+        div.innerText = 'haha';
+        this.append(div);
+    }
+}
+window.customElements.define('test-ele', TestEle);
diff --git a/packages/gogocode-antd-playground/packages/main/index.less b/packages/gogocode-antd-playground/packages/main/index.less
@@ -0,0 +1,63 @@
+// 主应用慎用 reset 样式
+body {
+  margin: 0;
+}
+
+.mainapp {
+  // 防止被子应用的样式覆盖
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  line-height: 1;
+}
+
+.mainapp-header {
+  >h1 {
+    color: #333;
+    font-size: 36px;
+    font-weight: 700;
+    margin: 0;
+    padding: 36px;
+  }
+}
+
+.mainapp-main {
+  display: flex;
+
+  .mainapp-sidemenu {
+    width: 130px;
+    list-style: none;
+    margin: 0;
+    margin-left: 40px;
+    padding: 0;
+    border-right: 2px solid #aaa;
+
+    >li {
+      color: #aaa;
+      margin: 20px 0;
+      font-size: 18px;
+      font-weight: 400;
+      cursor: pointer;
+
+      &:hover {
+        color: #444;
+      }
+
+      &:first-child {
+        margin-top: 5px;
+      }
+    }
+  }
+}
+
+// 子应用区域
+#subapp-container {
+  flex-grow: 1;
+  position: relative;
+  margin: 0 40px;
+
+  .subapp-loading {
+    color: #444;
+    font-size: 28px;
+    font-weight: 600;
+    text-align: center;
+  }
+}
diff --git a/packages/gogocode-antd-playground/packages/main/package.json b/packages/gogocode-antd-playground/packages/main/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "main",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "private": true,
+  "scripts": {
+    "start": "webpack-dev-server",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "devDependencies": {
+    "@babel/core": "^7.7.2",
+    "@babel/plugin-transform-react-jsx": "^7.7.0",
+    "@babel/preset-env": "^7.7.1",
+    "babel-loader": "^8.0.6",
+    "cross-env": "^7.0.2",
+    "css-loader": "^3.2.0",
+    "html-webpack-plugin": "^3.2.0",
+    "less-loader": "^6.2.0",
+    "style-loader": "^1.0.0",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.9.0"
+  },
+  "dependencies": {
+    "qiankun": "^2.4.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "vue": "^2.6.11",
+    "vue-router": "3.1.3",
+    "zone.js": "^0.10.2"
+  }
+}
diff --git a/packages/gogocode-antd-playground/packages/main/webpack.config.js b/packages/gogocode-antd-playground/packages/main/webpack.config.js
@@ -0,0 +1,54 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+    entry: './index.js',
+    devtool: 'source-map',
+    devServer: {
+        open: true,
+        port: '8099',
+        clientLogLevel: 'warning',
+        disableHostCheck: true,
+        compress: true,
+        headers: {
+            'Access-Control-Allow-Origin': '*',
+        },
+        historyApiFallback: true,
+        overlay: { warnings: false, errors: true },
+    },
+    output: {
+        publicPath: '/',
+    },
+    mode: 'development',
+    resolve: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    },
+    module: {
+        rules: [
+            {
+                test: /\.jsx?$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        presets: ['@babel/preset-env'],
+                        plugins: ['@babel/plugin-transform-react-jsx'],
+                    },
+                },
+            },
+            {
+                test: /\.(le|c)ss$/,
+                use: ['style-loader', 'css-loader', 'less-loader'],
+            },
+        ],
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            filename: 'index.html',
+            template: './index.html',
+            minify: {
+                removeComments: true,
+                collapseWhitespace: true,
+            },
+        }),
+    ],
+};