# Web-Framework

**Repository Path**: idealmatrix/Web-Framework

## Basic Information

- **Project Name**: Web-Framework
- **Description**: Web-Framework 是一个基于 Vue 3 的开发时和运行时前端框架，专为硬编码和低代码界面运行渲染场景而设计，同时支持跨端响应式设计。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2025-10-31
- **Last Updated**: 2025-10-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Web-Framework

[![npm](https://img.shields.io/npm/v/vue.svg)](https://www.npmjs.com/package/vue) [![build status](https://github.com/vuejs/core/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/vuejs/core/actions/workflows/ci.yml)

**Web-Framework** 是一个基于 **Vue 3** 的开发时 Web 框架，专为 **平台内嵌页面开发** 场景设计。它既可以作为低代码的出码编译器，也支持自定义编码方式在上面开发页面。

---

## ✨ 特性

* 🚀 **快速开发**：一键启动开发环境，支持热更新。
* 🛠 **灵活打包**：支持单页面的补丁构建。打包后可以直接发布到运行环境。
* 📦 **Vue 3 + Vite 架构**：内置 TypeScript 支持，极致开发体验。
* ✅ **开发工具集成**：完善的类型检查、单元测试、Lint。

---

## 📚 适用场景

* **低代码项目**：作为后台内置的出码编译器。
* **自定义编码项目**：快速初始化 Vue 项目，提升开发效率。

---

## ⚡ 快速开始

### 1. 安装依赖

```bash
npm install
```

### 2. 启动开发环境

```bash
npm run dev
```

---

## 📦 打包说明

### **构建指定页面**

```bash
pnpm build:pages -- --target-page=page-foo Page_Bar
```

### **构建全部页面**

```bash
pnpm build:all
```

## 🔧 自定义配置

请参考 [Vite 配置文档](https://vitejs.dev/config/)。

---

## 📂 项目目录结构

```plaintext
tff-dev/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── pages/
│   ├── router/
│   ├── store/
│   ├── App.vue
│   └── main.ts
├── vite.config.ts
├── package.json
└── tsconfig.json
```

---

## 🛠 示例页面开发流程

以下示例展示如何添加一个新页面并运行：

### 1. 创建页面文件

在 `src/pages/` 下新建目录 `page-demo`：

```vue
<template>
  <div class="demo-page">
    <h1>Hello tff/dev!</h1>
  </div>
</template>

<script setup lang="ts">
console.log("Demo page loaded");
</script>

<style scoped>
.demo-page {
  padding: 20px;
  font-size: 24px;
}
</style>
```

### 2. 配置菜单

在 `/config/system.config.json` 中：

```json
"functionGroups": [
  {
    "groupName": "Demo",
    "functions": [
      {
        "functionName": "Demo(示例)",
        "navigateUrl": "/ude/SAAS_EXT_Demo"
      }
    ]
  }
]
```

### 3. 启动开发环境

```bash
npm run dev
```

访问 [http://localhost:5173/hardcode/web](http://localhost:5173/hardcode/web)

---

## 📜 License

[MIT](./LICENSE) © 2025 Web-Framework contributors