npm - npmapps - Versions diffs - 1.1.5 → 1.1.6 - Mend

npmapps 1.1.5 → 1.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (292) hide show

package/app/wujie-wk/wujie-vue3-main/README.md ADDED Viewed

@@ -0,0 +1,154 @@
+# 无界微前端示例项目
+## 项目介绍
+这是一个基于无界（wujie）微前端框架的示例项目，展示了如何使用Vue3作为主应用，集成Vue2、Vue3和React等不同技术栈的子应用。本项目演示了微前端的核心功能，包括应用加载、路由管理、应用通信等特性。
+## 技术栈
+主应用：
+- Vue 3
+- Vite
+- Vue Router
+- Pinia
+- wujie（无界微前端框架）
+子应用：
+- Vue2子应用
+- Vue3子应用
+- React子应用
+## 项目结构
+```
+├── wujie-vue3-main/     # 主应用（Vue3）
+├── wujie-vue2-child/    # Vue2子应用
+├── wujie-vue3-child/    # Vue3子应用
+└── wujie-react-child/   # React子应用
+```
+## 快速开始
+1. 安装依赖
+```bash
+# 安装主应用依赖
+cd wujie-vue3-main
+npm install
+# 安装Vue2子应用依赖
+cd ../wujie-vue2-child
+npm install
+# 安装Vue3子应用依赖
+cd ../wujie-vue3-child
+npm install
+# 安装React子应用依赖
+cd ../wujie-react-child
+npm install
+```
+2. 启动应用
+```bash
+# 启动主应用
+cd wujie-vue3-main
+npm run dev
+# 启动Vue2子应用
+cd ../wujie-vue2-child
+npm run serve
+# 启动Vue3子应用
+cd ../wujie-vue3-child
+npm run dev
+# 启动React子应用
+cd ../wujie-react-child
+npm run dev
+```
+## 无界微前端框架使用说明
+### 子应用配置
+在主应用中配置子应用信息：
+```javascript
+// 子应用配置示例
+const subApps = {
+  "vue2": {
+    name: "vue2",
+    entry: "//localhost:8080",
+    url: "",
+  },
+  "vue3": {
+    name: "vue3",
+    entry: "//localhost:5173",
+    url: "",
+  },
+  "react": {
+    name: "react",
+    entry: "//localhost:5174",
+    url: "",
+  }
+}
+```
+### 应用间通信
+无界提供了多种应用通信方式：
+1. 通过props传递数据：
+```javascript
+<WujieVue
+  name="vue2"
+  url="xxx"
+  :props="{ data: 'hello' }"
+/>
+```
+2. 事件通信：
+```javascript
+// 主应用发送事件
+window.$wujie.bus.$emit("事件名称", 数据)
+// 子应用接收事件
+window.$wujie.bus.$on("事件名称", 回调函数)
+```
+### 路由管理
+主应用和子应用都使用各自的路由系统，通过路由同步机制实现统一管理：
+```javascript
+// 主应用路由配置示例
+const routes = [
+  {
+    path: '/vue2/:page*',
+    name: 'vue2',
+    component: () => import('../views/SubApp.vue')
+  },
+  {
+    path: '/vue3/:page*',
+    name: 'vue3',
+    component: () => import('../views/SubApp.vue')
+  },
+  {
+    path: '/react/:page*',
+    name: 'react',
+    component: () => import('../views/SubApp.vue')
+  }
+]
+```
+## 注意事项
+1. 确保各个应用的端口号不冲突
+2. 子应用需要配置跨域支持（CORS）
+3. 建议使用Chrome浏览器进行开发调试
+## 参考文档
+- [无界微前端框架文档](https://wujie-micro.github.io/doc/)
+- [Vue3文档](https://cn.vuejs.org/)
+- [Vite文档](https://cn.vitejs.dev/)

package/app/wujie-wk/wujie-vue3-main/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>