diff --git a/.eslintignore b/.eslintignore
index f3f28da..babb4ab 100644
--- 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
\ No newline at end of file
diff --git a/packages/gogocode-antd-playground/.eslintrc.js b/packages/gogocode-antd-playground/.eslintrc.js
new file mode 100644
index 0000000..3d8b7d8
--- /dev/null
+++ 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,
+ },
+};
\ No newline at end of file
diff --git a/packages/gogocode-antd-playground/README.md b/packages/gogocode-antd-playground/README.md
new file mode 100644
index 0000000..a8b7f1e
--- /dev/null
+++ 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)
+
+
+
+## 开发
+
+### 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
new file mode 100644
index 0000000..59fde43
--- /dev/null
+++ 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
new file mode 100644
index 0000000..0709e47
--- /dev/null
+++ 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
new file mode 100644
index 0000000..5f161e6
--- /dev/null
+++ b/packages/gogocode-antd-playground/packages/main/index.html
@@ -0,0 +1,59 @@
+
+
+
+
+ GoGoCode Vue3 Playground
+
+
+
+
+
+ GoGoCode Vue3 Playground
+
+
+
+
+
+
+
Vue2 loading...
+
Vue3 loading...
+
+
+
+
+
+
diff --git a/packages/gogocode-antd-playground/packages/vue2/src/assets/logo.png b/packages/gogocode-antd-playground/packages/vue2/src/assets/logo.png
new file mode 100644
index 0000000..f3d2503
Binary files /dev/null and b/packages/gogocode-antd-playground/packages/vue2/src/assets/logo.png differ
diff --git a/packages/gogocode-antd-playground/packages/vue2/src/components/Home.vue b/packages/gogocode-antd-playground/packages/vue2/src/components/Home.vue
new file mode 100644
index 0000000..7629a29
--- /dev/null
+++ b/packages/gogocode-antd-playground/packages/vue2/src/components/Home.vue
@@ -0,0 +1,28 @@
+
+
+
微服务加载成功
+
Vue版本：{{ version }}
+
+
+ Search
+
+
这是一个icon
+
+
+
+
+
+
diff --git a/packages/gogocode-antd-playground/packages/vue3/src/assets/logo.png b/packages/gogocode-antd-playground/packages/vue3/src/assets/logo.png
new file mode 100644
index 0000000..f3d2503
Binary files /dev/null and b/packages/gogocode-antd-playground/packages/vue3/src/assets/logo.png differ
diff --git a/packages/gogocode-antd-playground/packages/vue3/src/components/Home.vue b/packages/gogocode-antd-playground/packages/vue3/src/components/Home.vue
new file mode 100644
index 0000000..acdad8a
--- /dev/null
+++ b/packages/gogocode-antd-playground/packages/vue3/src/components/Home.vue
@@ -0,0 +1,30 @@
+
+
+
微服务加载成功
+
Vue版本：{{ version }}
+
这是一个icon
+
+
\ No newline at end of file
diff --git a/packages/gogocode-antd-playground/packages/vue3/src/main.js b/packages/gogocode-antd-playground/packages/vue3/src/main.js
new file mode 100644
index 0000000..c11c910
--- /dev/null
+++ b/packages/gogocode-antd-playground/packages/vue3/src/main.js
@@ -0,0 +1,67 @@
+import './public-path';
+import { createApp } from 'vue';
+import Antd from 'ant-design-vue';
+import 'ant-design-vue/dist/antd.css';
+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;
+let history = null;
+
+
+function render(props = {}) {
+ const { container } = props;
+ history = createWebHistory('/');
+ router = createRouter({
+ history,
+ routes,
+ });
+
+ instance = createApp(App);
+ window.$vueApp = instance;
+ instance.use(router);
+ instance.use(store);
+ instance.use(Antd);
+ 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(props);
+ 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;
+ history.destroy();
+}
diff --git a/packages/gogocode-antd-playground/packages/vue3/src/public-path.js b/packages/gogocode-antd-playground/packages/vue3/src/public-path.js
new file mode 100644
index 0000000..15757ab
--- /dev/null
+++ b/packages/gogocode-antd-playground/packages/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/packages/gogocode-antd-playground/packages/vue3/src/router/index.js b/packages/gogocode-antd-playground/packages/vue3/src/router/index.js
new file mode 100644
index 0000000..b0cc376
--- /dev/null
+++ b/packages/gogocode-antd-playground/packages/vue3/src/router/index.js
@@ -0,0 +1,14 @@
+const routes = [
+ {
+ path: '/',
+ name: 'home',
+ component: () => import(/* webpackChunkName: "home" */ '@/components/Home.vue'),
+ },
+ {
+ path: '/icon',
+ name: 'home',
+ component: () => import(/* webpackChunkName: "home" */ '@/components/icon/Comp-out.vue')
+ }
+];
+
+export default routes;
diff --git a/packages/gogocode-antd-playground/packages/vue3/src/store/count.js b/packages/gogocode-antd-playground/packages/vue3/src/store/count.js
new file mode 100644
index 0000000..8f76f38
--- /dev/null
+++ b/packages/gogocode-antd-playground/packages/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/packages/gogocode-antd-playground/packages/vue3/src/store/index.js b/packages/gogocode-antd-playground/packages/vue3/src/store/index.js
new file mode 100644
index 0000000..41a35fd
--- /dev/null
+++ b/packages/gogocode-antd-playground/packages/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/packages/gogocode-antd-playground/packages/vue3/src/utils/gogocodeTransfer.js b/packages/gogocode-antd-playground/packages/vue3/src/utils/gogocodeTransfer.js
new file mode 100644
index 0000000..fdd17ab
--- /dev/null
+++ b/packages/gogocode-antd-playground/packages/vue3/src/utils/gogocodeTransfer.js
@@ -0,0 +1,77 @@
+export function $children(instance) {
+ function $walk(vnode, children) {
+ if (vnode.component && vnode.component.proxy) {
+ children.push(vnode.component.proxy)
+ } else if (vnode.shapeFlag & (1 << 4)) {
+ const vnodes = vnode.children
+ for (let i = 0; i < vnodes.length; i++) {
+ $walk(vnodes[i], children)
+ }
+ }
+ }
+ const root = instance.$.subTree
+ const children = []
+ if (root) {
+ $walk(root, children)
+ }
+ return children
+}
+const eventRegistryMap = new WeakMap()
+function getRegistry(instance) {
+ let events = eventRegistryMap.get(instance)
+ if (!events) {
+ eventRegistryMap.set(instance, (events = Object.create(null)))
+ }
+ return events
+}
+export function $on(instance, event, fn) {
+ if (Array.isArray(event)) {
+ event.forEach((e) => $on(instance, e, fn))
+ } else {
+ const events = getRegistry(instance)
+ ;(events[event] || (events[event] = [])).push(fn)
+ }
+ return instance.proxy
+}
+export function $once(instance, event, fn) {
+ const wrapped = (...args) => {
+ off(instance, event, wrapped)
+ fn.call(instance.proxy, ...args)
+ }
+ wrapped.fn = fn
+ $on(instance, event, wrapped)
+ return instance.proxy
+}
+export function $off(instance, event, fn) {
+ const vm = instance.proxy
+ // all
+ if (!event) {
+ eventRegistryMap.set(instance, Object.create(null))
+ return vm
+ }
+ // array of events
+ if (Array.isArray(event)) {
+ event.forEach((e) => off(instance, e, fn))
+ return vm
+ }
+ // specific event
+ const events = getRegistry(instance)
+ const cbs = events[event]
+ if (!cbs) {
+ return vm
+ }
+ if (!fn) {
+ events[event] = undefined
+ return vm
+ }
+ events[event] = cbs.filter((cb) => !(cb === fn || cb.fn === fn))
+ return vm
+}
+export function $emit(instance, event, ...args) {
+ instance.proxy && instance.proxy.$emit && instance.proxy.$emit(event, ...args)
+ const cbs = getRegistry(instance)[event]
+ if (cbs) {
+ cbs.map((cb) => cb.apply(instance.proxy, args))
+ }
+ return instance.proxy
+}
diff --git a/packages/gogocode-antd-playground/packages/vue3/vue.config.js b/packages/gogocode-antd-playground/packages/vue3/vue.config.js
new file mode 100644
index 0000000..a61f430
--- /dev/null
+++ b/packages/gogocode-antd-playground/packages/vue3/vue.config.js
@@ -0,0 +1,50 @@
+const path = require('path');
+const { name } = require('./package');
+
+function resolve(dir) {
+ return path.join(__dirname, dir);
+}
+
+const port = 8103;
+
+module.exports = {
+ outputDir: 'dist',
+ assetsDir: 'static',
+ filenameHashing: true,
+ lintOnSave: false,
+ devServer: {
+ hot: true,
+ port,
+ headers: {
+ 'Access-Control-Allow-Origin': '*',
+ },
+ },
+ // 自定义webpack配置
+ configureWebpack: {
+ resolve: {
+ alias: {
+ '@': resolve('src'),
+ },
+ },
+ output: {
+ // 把子应用打包成 umd 库格式
+ library: `${name}-[name]`,
+ libraryTarget: 'umd',
+ },
+ },
+ chainWebpack: config => {
+ config.module
+ .rule('vue')
+ .use('vue-loader')
+ .tap(options => {
+ // modify the options...
+ return {
+ ...options,
+ compilerOptions: {
+ ...options.compilerOptions,
+ isCustomElement: tag => tag === 'test-ele',
+ },
+ };
+ });
+ },
+};
diff --git a/packages/gogocode-antd-playground/postcss.config.js b/packages/gogocode-antd-playground/postcss.config.js
new file mode 100644
index 0000000..a3db8ae
--- /dev/null
+++ b/packages/gogocode-antd-playground/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+ plugins: {
+ autoprefixer: {},
+ },
+};
diff --git a/packages/gogocode-antd-playground/scripts/create-comps.js b/packages/gogocode-antd-playground/scripts/create-comps.js
new file mode 100644
index 0000000..7f08edc
--- /dev/null
+++ b/packages/gogocode-antd-playground/scripts/create-comps.js
@@ -0,0 +1,207 @@
+const fs = require("fs").promises;
+const path = require("path");
+
+const vue2CompsFolder = path.resolve(
+ __dirname,
+ "../packages/vue2/src/components"
+);
+const vue3CompsFolder = path.resolve(
+ __dirname,
+ "../packages/vue3/src/components"
+);
+
+const cfgs = [
+ {
+ link: "array-refs",
+ text: "v-for 中的 Ref 数组"
+ },
+ {
+ link: "async-components",
+ text: "异步组件"
+ },
+ {
+ link: "attribute-coercion",
+ text: "attribute 强制行为"
+ },
+ {
+ link: "attrs-includes-class-style",
+ text: "$attrs 包括 class & style"
+ },
+ {
+ link: "children",
+ text: "$children"
+ },
+ {
+ link: "custom-directives",
+ text: "自定义指令"
+ },
+ {
+ link: "custom-elements-interop",
+ text: "自定义元素交互"
+ },
+ {
+ link: "data-option",
+ text: "Data 选项"
+ },
+ {
+ link: "emits-option",
+ text: "emits Option"
+ },
+ {
+ link: "events-api",
+ text: "事件 API"
+ },
+ {
+ link: "filters",
+ text: "过滤器"
+ },
+ {
+ link: "fragments",
+ text: "片段"
+ },
+ {
+ link: "functional-components",
+ text: "函数式组件"
+ },
+ {
+ link: "global-api",
+ text: "全局 API"
+ },
+ {
+ link: "global-api-treeshaking",
+ text: "全局 API Treeshaking"
+ },
+ {
+ link: "inline-template-attribute",
+ text: "内联模板 Attribute"
+ },
+ {
+ link: "key-attribute",
+ text: "key attribute"
+ },
+ {
+ link: "keycode-modifiers",
+ text: "按键修饰符"
+ },
+ {
+ link: "listeners-removed",
+ text: "移除 $listeners"
+ },
+ {
+ link: "props-default-this",
+ text: "在 prop 的默认函数中访问 this"
+ },
+ {
+ link: "render-function-api",
+ text: "渲染函数 API"
+ },
+ {
+ link: "slots-unification",
+ text: "插槽统一"
+ },
+ {
+ link: "transition",
+ text: "过渡的 class 名更改"
+ },
+ {
+ link: "transition-group",
+ text: "Transition Group 根元素"
+ },
+ {
+ link: "v-on-native-modifier-removed",
+ text: "移除 v-on.native 修饰符"
+ },
+ {
+ link: "v-model",
+ text: "v-model"
+ },
+ {
+ link: "v-if-v-for",
+ text: "v-if 与 v-for 的优先级对比"
+ },
+ {
+ link: "v-bind",
+ text: "v-bind 合并行为"
+ },
+ {
+ link: "watch",
+ text: "Watch on Arrays"
+ }
+];
+
+const vue2tmpl = ({ link, text }) =>
+ `
+
+
迁移：{{ name }}
+
Vue版本：{{ version }}
+
+
迁移：{{ name }}
+
Vue版本：{{ version }}
+