feat: add v2 in v3 project

demos/vue3_2/vue-2-base/emp.config.ts

@@ -0,0 +1,42 @@
+import {defineConfig} from '@empjs/cli'
+import vue from '@empjs/plugin-vue2'
+import {pluginRspackEmpShare} from '@empjs/share'
+export default defineConfig(store => {
+  return {
+    plugins: [
+      vue(),
+      pluginRspackEmpShare({
+        name: 'vue2Base',
+        exposes: {
+          './Content': './src/components/Content',
+          './Table': './src/components/table',
+          './CompositionApi': './src/components/CompositionApi',
+          './store': './src/store',
+        },
+        empRuntime: {
+          runtimeLib: "https://unpkg.yy.com/@empjs/share@3.1.5/output/sdk.js",
+          shareLib: {
+            vue: 'Vue@https://unpkg.com/vue@2.7.14/dist/vue.min.js',
+            vuex: "Vuex@https://unpkg.com/vuex@3.6.2/dist/vuex.min.js",
+            'element-ui': [
+              'ELEMENT@https://unpkg.com/element-ui/lib/index.js',
+              "https://unpkg.com/element-ui/lib/theme-chalk/index.css",
+            ],
+          },
+          framework: 'vue2',
+        },
+      }),
+    ],
+    html: {
+      title: 'EMP3 vue2 base',
+    },
+    server: {
+      port: 9001,
+      open: false,
+    },
+    appEntry: 'main.js',
+    debug: {
+      clearLog: false,
+    },
+  }
+})

demos/vue3_2/vue-2-base/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "vue2-base",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "devDependencies": {
+    "@empjs/cli": "3.2.6-beta.2",
+    "@empjs/plugin-vue2": "3.2.0"
+  },
+  "dependencies": {
+    "@empjs/share": "3.2.0",
+    "element-ui": "^2.15.14",
+    "vue": "^2.7.14",
+    "vue-router": "3",
+    "vuex": "3"
+  },
+  "scripts": {
+    "dev": "emp dev",
+    "build": "emp build --env prod",
+    "start": "emp serve",
+    "stat": "emp build --analyze",
+    "emp": "emp"
+  },
+  "author": "",
+  "license": "ISC"
+}

demos/vue3_2/vue-2-base/src/App.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <router-view />
+  </div>
+</template>

demos/vue3_2/vue-2-base/src/bootstrap.js

@@ -0,0 +1,10 @@
+import App from '@/App'
+import store from '@/store'
+import Vue from 'vue'
+import router from './router'
+
+new Vue({
+  router,
+  store,
+  render: h => h(App),
+}).$mount('#emp-root')

demos/vue3_2/vue-2-base/src/components/Button.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <button @click="showTips">
+      {{ textVal || 'vue2 base button' }}
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    // eslint-disable-next-line vue/require-default-prop
+    textVal: String,
+  },
+  methods: {
+    showTips() {
+      console.log(this.textVal)
+    },
+  },
+}
+</script>

demos/vue3_2/vue-2-base/src/components/CompositionApi.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <button @click="increase">count is: {{ count }}, state.count is {{ state.count }}</button>
+  </div>
+</template>
+
+<script>
+import {reactive, ref} from 'vue'
+export default {
+  setup() {
+    const count = ref(0)
+    const state = reactive({count: 0})
+    const increase = () => {
+      count.value++
+      state.count++
+    }
+    return {count, state, increase}
+  },
+}
+</script>

demos/vue3_2/vue-2-base/src/components/Content.vue

@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <button class="button bigSize" @click="increment">Vuex Store : {{ $store.state.count }}</button>
+    <p @click="showMore">More... update from base</p>
+    <div class="more">
+      <ul v-if="isMore === true">
+        <li>
+          <button class="button" @click="increment">Vuex Store : {{ $store.state.count }}</button>
+        </li>
+        <li>
+          <h2>{{ title }}</h2>
+          <button class="button" @click="add">Vue2 Add Button</button>
+        </li>
+        <li>
+          <h2>prop: {{ dataProps }}</h2>
+          <Button text-val="button components in content from import" />
+          <DynamicButton text-val="dynamic import" />
+        </li>
+      </ul>
+    </div>
+    <h2>JSX Dynamic Component</h2>
+    <Hello />
+  </div>
+</template>
+
+<script>
+import Button from './Button.vue'
+export default {
+  components: {
+    Button,
+    Hello: () => import('./Hello'),
+    DynamicButton: () => import('./Button'),
+  },
+  props: {
+    dataProps: {type: Number, required: false},
+    methodProps: {type: Function, required: false},
+  },
+  data() {
+    return {
+      isMore: false,
+      title: 'EMP Vue2 Component From BASE!',
+    }
+  },
+  mounted() {
+    this.methodProps && this.methodProps()
+    // console.log(this.$props)
+    // console.log(this.$attrs)
+    // console.log(this.$listeners)
+  },
+  methods: {
+    showMore() {
+      this.isMore = !this.isMore
+    },
+    increment() {
+      this.$store.commit('increment')
+      // console.log(this.$store.state.count)
+    },
+    add() {
+      console.log('click event')
+      // Vue2 使用 Vue3 传过来的自定义事件需要把函数名 kebab-case 改为 camelCase 再加前缀 on
+      // 例如：调用 @my-event 需要写成 onMyEvent
+      this.$emit('onMyEvent')
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.button.bigSize {
+  font-size: 30px;
+  width: auto;
+  padding: 3px 8px;
+}
+.more {
+  ul,
+  li {
+    list-style: none;
+    button {
+      width: auto;
+      padding: 3px 8px;
+    }
+  }
+  h2 {
+    font-size: 14px;
+  }
+}
+.v2box {
+  font-size: 38px;
+  color: green;
+  font-weight: bold;
+}
+.button {
+  width: 200px;
+  padding: 20px 0;
+}
+</style>

demos/vue3_2/vue-2-base/src/components/Hello.jsx

@@ -0,0 +1,18 @@
+export default {
+  methods: {
+    handleButtonClick(e) {
+      e.preventDefault()
+      alert('button clicked')
+    },
+  },
+  render() {
+    return (
+      <div>
+        <Hello />
+        <button onClick={this.handleButtonClick}> click me</button>
+      </div>
+    )
+  },
+}
+
+export const Hello = () => <h2>hello jsx Component Here!</h2>

demos/vue3_2/vue-2-base/src/components/table.vue

@@ -0,0 +1,64 @@
+<template>
+  <el-table :data="tableData" border style="width: 100%">
+    <el-table-column fixed prop="date" label="日期" width="150" />
+    <el-table-column prop="name" label="姓名" width="120" />
+    <el-table-column prop="province" label="省份" width="120" />
+    <el-table-column prop="city" label="市区" width="120" />
+    <el-table-column prop="address" label="地址" width="300" />
+    <el-table-column prop="zip" label="邮编" width="120" />
+    <el-table-column fixed="right" label="操作" width="100">
+      <template slot-scope="scope">
+        <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
+        <el-button type="text" size="small">编辑</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333,
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1517 弄',
+          zip: 200333,
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1519 弄',
+          zip: 200333,
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1516 弄',
+          zip: 200333,
+        },
+      ],
+    }
+  },
+  methods: {
+    handleClick(row) {
+      console.log(row)
+    },
+  },
+}
+</script>

demos/vue3_2/vue-2-base/src/main.js

@@ -0,0 +1,11 @@
+// 使用 empShareLib后不需要再实例化
+// import Vue from 'vue'
+// import Vuex from 'vuex'
+// import Router from 'vue-router'
+// Vue.use(Router)
+// Vue.use(Vuex)
+// Vue.config.productionTip = false
+// import ElementUI from 'element-ui'
+// import 'element-ui/lib/theme-chalk/index.css'
+// Vue.use(ElementUI)
+import('./bootstrap')

demos/vue3_2/vue-2-base/src/router.js

@@ -0,0 +1,12 @@
+import Router from 'vue-router'
+
+export default new Router({
+  mode: 'hash',
+  base: '/',
+  routes: [
+    {
+      path: '/',
+      component: () => import('./views/Home'),
+    },
+  ],
+})

demos/vue3_2/vue-2-base/src/store/index.js

@@ -0,0 +1,12 @@
+import Vuex from 'vuex'
+export const countStore = new Vuex.Store({
+  state: {
+    count: 0,
+  },
+  mutations: {
+    increment(state) {
+      state.count++
+    },
+  },
+})
+export default countStore