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": "[email protected]: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,
+ },
+ }),
+ ],
+};