npm - @wukang17681264762/npmapps-new - Versions diffs - 1.0.0 - Mend

@wukang17681264762/npmapps-new 1.0.0

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 (298) hide show

package/package.json ADDED Viewed

@@ -0,0 +1,11 @@
+{
+  "name": "@wukang17681264762/npmapps-new",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": ""
+}

package/wujie-wk/t.html ADDED Viewed

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>vue.draggable vue3例子</title>
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
+    <script src="https://www.itxst.com/package/vue3/vue.global.js"></script>
+    <script src="https://www.itxst.com/package/sortable/Sortable.min.js"></script>
+    <script src="https://www.itxst.com/package/vuedraggablenext/vuedraggable.umd.min.js"></script>
+</head>
+<body style="padding:10px;">
+    <div id="app" class="demo">
+        <draggable :list="list" ghost-class="ghost" :force-fallback="true" chosen-class="chosenClass" animation="300"
+            @start="onStart" @end="onEnd">
+            <template #item="{ element }">
+                <div class="item">
+                    {{ element.name }}
+                </div>
+            </template>
+        </draggable>
+    </div>
+    <script>
+        const app = {
+            data() {
+                return {
+                    //需要拖拽的数据
+                    list: [
+                        { name: "www.itxst.com", id: 0 },
+                        { name: "www.baidu.com", id: 1 },
+                        { name: "www.google.com", id: 2 },
+                    ]
+                }
+            },
+            //注册draggable组件
+            components: {
+                'draggable': window.vuedraggable
+            },
+            methods: {
+                //开始拖拽事件
+                onStart() {
+                },
+                //结束拖拽事件
+                onEnd() {
+                }
+            }
+        }
+        Vue.createApp(app).mount('#app')
+    </script>
+       <style>
+        .itxst {
+            width: 600px;
+            display: flex;
+        }
+        .itxst>div:nth-of-type(1) {
+            flex: 1;
+        }
+        .itxst>div:nth-of-type(2) {
+            width: 270px;
+            padding-left: 20px;
+        }
+        .item {
+            border: solid 1px #eee;
+            padding: 6px 10px;
+            text-align: left;
+        }
+        .item:hover {
+            cursor: move;
+        }
+        .item+.item {
+            margin-top: 10px;
+        }
+        .ghost {
+            border: solid 1px rgb(19, 41, 239) !important;
+        }
+        .chosenClass {
+            background-color: #eee;
+            opacity: 1;
+            border: solid 1px red;
+        }
+        .fallbackClass {
+            background-color: aquamarine;
+        }
+    </style>
+</body>
+</html>

package/wujie-wk/wujie-react-child/README.md ADDED Viewed

@@ -0,0 +1,126 @@
+# Wujie React 子应用
+## 项目简介
+这是一个基于 React + TypeScript + Vite 构建的无界微前端子应用。项目采用现代化的技术栈和工具链，提供了完整的开发环境配置和类型支持。
+## 技术栈
+- React 18
+- TypeScript
+- Vite
+- ESLint
+- React Router
+## 项目结构
+```
+├── public/              # 静态资源目录
+├── src/                 # 源代码目录
+│   ├── assets/         # 资源文件
+│   ├── pages/          # 页面组件
+│   ├── router/         # 路由配置
+│   ├── types/          # TypeScript 类型定义
+│   ├── App.tsx         # 应用入口组件
+│   └── main.tsx        # 应用入口文件
+├── index.html          # HTML 模板
+├── package.json        # 项目依赖配置
+├── tsconfig.json       # TypeScript 配置
+└── vite.config.ts      # Vite 配置
+```
+## 快速开始
+### 安装依赖
+```bash
+npm install
+```
+### 开发模式
+```bash
+npm run dev
+```
+### 构建生产版本
+```bash
+npm run build
+```
+## 无界微前端配置
+### 子应用配置
+作为无界微前端的子应用，本项目已经完成了必要的配置：
+1. 路由采用 history 模式
+2. 资源路径配置为相对路径
+3. 导出生命周期钩子供主应用调用
+### 与主应用通信
+子应用可以通过以下方式与主应用进行通信：
+1. 通过 `window.$wujie` 获取无界提供的通信方法
+2. 使用 `props` 接收主应用传递的数据
+3. 通过事件总线进行消息通信
+示例：
+```typescript
+// 接收主应用传递的数据
+window.$wujie?.props
+// 向主应用发送消息
+window.$wujie?.bus.$emit('eventName', data)
+// 监听主应用消息
+window.$wujie?.bus.$on('eventName', (data) => {
+  console.log(data)
+})
+```
+## 开发指南
+### ESLint 配置
+项目使用 ESLint 进行代码规范检查，支持 TypeScript。主要配置包括：
+- 类型检查规则
+- React 最佳实践规则
+- 代码风格规则
+### 类型检查
+启用了严格的 TypeScript 类型检查，确保代码质量：
+```json
+{
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitAny": true
+  }
+}
+```
+### 开发建议
+1. 遵循 React 组件最佳实践
+2. 使用 TypeScript 类型标注
+3. 保持良好的代码组织结构
+4. 编写必要的注释和文档
+## 注意事项
+1. 避免修改 window 对象上的全局变量
+2. 注意样式隔离，防止与其他应用样式冲突
+3. 合理使用生命周期钩子，确保应用可以被正确加载和卸载
+## 相关文档
+- [无界文档](https://wujie-micro.github.io/doc/)
+- [React 文档](https://react.dev/)
+- [Vite 文档](https://vitejs.dev/)
+- [TypeScript 文档](https://www.typescriptlang.org/)

package/wujie-wk/wujie-react-child/eslint.config.js ADDED Viewed

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

package/wujie-wk/wujie-react-child/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 + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>