docs: add vue2 in vue3

demos/vue3_2/README.md

@@ -3,7 +3,13 @@
 本`demo`展示如何在`vue3`项目中使用`vue2`基站的远程组件
 
 # 运行
+
+在当前目录
 ```bash
 pnpm i
 pnpm dev
 ```
+
+# 访问
+
+http://localhost:9302/#/

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

@@ -12,6 +12,7 @@ export default defineConfig(store => {
           './Table': './src/components/table',
           './CompositionApi': './src/components/CompositionApi',
           './store': './src/store',
+          './Home': './src/views/Home',
         },
         empRuntime: {
           runtimeLib: "https://unpkg.yy.com/@empjs/[email protected]/output/sdk.js",

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

@@ -9,7 +9,7 @@
     "@empjs/plugin-vue2": "3.2.0"
   },
   "dependencies": {
-    "@empjs/share": "3.2.0",
+    "@empjs/share": "3.3.1-beta.1",
     "element-ui": "^2.15.14",
     "vue": "^2.7.14",
     "vue-router": "3",

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

@@ -1,10 +1,6 @@
-import App from '@/App'
-import store from '@/store'
+import App from '@/views/Home'
 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/Content.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- <button class="button bigSize" @click="increment">Vuex Store : {{ $store.state.count }}</button> -->
-    <p @click="showMore">More... update from base</p>
+    <button @click="showMore">More... update from base</button>
     <div class="more">
       <ul v-if="isMore === true">
         <li>
@@ -14,11 +14,11 @@
         <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>
+    <DynamicButton text-val="dynamic import" />
     <!-- <Hello /> -->
   </div>
 </template>

demos/vue3_2/vue-2-base/src/views/Home.vue

@@ -16,10 +16,10 @@
     </ul>
     <h2>Content Component</h2>
     <Content />
-    <h2>Element Table</h2>
-    <Table />
-    <h2>CompositionApi</h2>
-    <CompositionApi />
+    <!-- <h2>Element Table</h2>
+    <Table /> -->
+    <!-- <h2>CompositionApi</h2>
+    <CompositionApi /> -->
   </div>
 </template>
 <script>

demos/vue3_2/vue-3-project/emp.config.ts

@@ -22,14 +22,11 @@ export default defineConfig(store => {
           '@v2b': `vue2Base@${vue2Base}`,
         },
         empRuntime: {
-          runtimeLib: "https://unpkg.yy.com/@empjs/[email protected]/output/sdk.js",
-          frameworkLib: "https://unpkg.com/@empjs/[email protected]/dist",
-          // shareLib: {
-          //   'element-ui': [
-          //     'ELEMENT@https://unpkg.com/element-ui/lib/index.js',
-          //     "https://unpkg.com/element-ui/lib/theme-chalk/index.css",
-          //   ],
-          // },
+          runtimeLib: "https://unpkg.com/@empjs/[email protected]/output/sdk.js",
+          frameworkLib: "https://unpkg.com/@empjs/[email protected]/dist",
+          shareLib: {
+            'vue': 'Vue@https://unpkg.com/[email protected]/dist/vue.global.js'
+          },
           framework: undefined,
         },
       }),

demos/vue3_2/vue-3-project/package.json

@@ -9,10 +9,9 @@
     "@empjs/plugin-vue3": "3.2.0"
   },
   "dependencies": {
-    "@empjs/share": "3.2.0",
+    "@empjs/share": "3.3.1-beta.1",
     "ant-design-vue": "^4.1.2",
-    "vue": "^3.4.20",
-    "vue-router": "4"
+    "vue": "^3.4.20"
   },
   "scripts": {
     "dev": "emp dev",

demos/vue3_2/vue-3-project/src/Home.vue

@@ -1,18 +1,18 @@
 <template>
   <div>
+    <div @click="countData++">{{countData}}</div>
     <h1>Vue 3 Project</h1>
-    <h2>=== @v2b/Content ===</h2>
+    <h2>vue2 Component: === @v2b/Content ===</h2>
     <Vue2InVue3Adapter :mfComponent="() => import('@v2b/Content')" />  
-    <h2>=== @v2b/compositionApi ===</h2>
-    <Vue2InVue3Adapter :mfComponent="() => import('@v2b/CompositionApi')" />  
-
-    <div @click="countData++">{{countData}}</div>
+    <h2>vue2 Component: === @v2b/Home ===</h2>
+    <Vue2InVue3Adapter :mfComponent="() => import('@v2b/Home')" />  
   </div>
 </template>
 
 <script>
-import {ref} from 'vue'
-import Vue2InVue3Adapter, {vue2ToVue3} from './util'
+import { vueAdapter } from '@empjs/share/adapter'
+import vue, { ref } from 'vue'
+const {Vue2InVue3Adapter} = vueAdapter
 export default {
   components: {
     Vue2InVue3Adapter,

demos/vue3_2/vue-3-project/src/bootstrap.ts

@@ -1,6 +1,6 @@
 // import Antd from '@v3/Antd'
 import {createApp} from 'vue'
-import App from './App.vue'
+import vue from 'vue'
 import Home from './home.vue'
 // console.log('Antd', Antd)
 const app = createApp(Home)