# vuniapp

**Repository Path**: kwc410/vuniapp

## Basic Information

- **Project Name**: vuniapp
- **Description**: 基于 Uni-App 的自研 UI 框架 vuniapp 设计方案
​​一、核心目标​​
​​1.新一代轻量级跨端解决方案​。
2.基于 Uni-App 的自研 UI 框架 vuniapp 设计方案。
3.专为 Uni-App 生态打造的模块化 UI 框架，面向高效开发与极致性能而生。
- **Primary Language**: HTML
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-07
- **Last Updated**: 2025-08-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: uni-app, Vue, UI, scss, 微信

## README

# v-uni-app ui Bate版(1.1.31)

#### 一、框架定位
    1.新一代轻量级跨端解决方案​。
    2.基于 Uni-App 的自研 UI 框架 vuniapp 设计方案。
    3.专为 Uni-App 生态打造的模块化 UI 框架，面向高效开发与极致性能而生。

#### 二、核心目标​​
| ​​特性​​	​ | 技术实现​                              |
|----------|------------------------------------|
| ​​零学习成本​ | 完全兼容 Uni-App 原生语法，支持 Vue3 版本 |
| 原子化架构​   | 组件支持单文件独立运行，最低仅需 3KB 即可启用核心功能      |
| 工程化友好​   | 独创 文件级按需加载 机制，无需配置构建工具             |
| 智能样式​    | 基于 CSS 变量的主题系统，支持运行时动态换肤           |
| 增强型组件​   | 内置数据驱动表单生成器、可视化布局编排器等进阶工具          |



#### 三、UI架构
![输入图片说明](ui_architecture.png)

##### 1. Model 组件层​​（核心交互单元）

| 模块   | 功能特性               | 技术实现            |
|------|--------------------|-----------------|
| 原子组件 | Button/Input 等基础元素 | 基于 uni-app 规范封装 |
| 复合组件 | 表单生成器/选择器/级联选择器    | 基于 原子组件 规范封装    |

    核心优势​​：
        - 通过 v-component-loader 实现按需加载（减少 68% 包体积）
        - 支持 ​​声明式配置​​ 自动生成复杂表单

##### 2.Layout 布局层​​（视觉编排系统）

| 模块    | 功能特性    | 技术实现                      |
|-------|---------|---------------------------|
| 基础布局  | 多种流式布局  | CSS Flex / Grid + 自定义属性变量 |
| 响应式系统 | 多端自适应方案 |       -                   |

    核心优势​​：
        - 通过 ​​原子化 CSS​​ 减少 40% 样式代码
        - 内置 ​​智能间距系统​​ 实现视觉对齐

##### 3.架构优势对比​

| ​​传统方案​  | v-uni-app 方案​  | 提升效果      |
|----------|----------------|-----------|
| 全量加载组件库  | 文件级按需导入        | 包体积 ↓70%  |
| 手动编写布局代码 | 声明式布局语法        | 代码量 ↓65%  |
| 各平台单独适配  | 统一适配层 + 条件编译   | 开发效率 ↑40% |
| 分散的样式系统  | 基于设计令牌的原子化 CSS | 维护成本 ↓60% |


#### 四、使用说明

1.  安装样式预处理器（仅需执行一次）
        `

        npm install sass -D`
2.  在项目中直接引入所需要的组件
        `

        import VButton from "@/components/model/v-button/v-button.vue"`
3.  全局引入组件，需要在mian.js 全局引入
        `

        //v-uni-app ui 组件
        import VButton from "@/components/model/v-button/v-button.vue"
        import VInput from "@/components/model/v-input/v-input.vue"

        //组件集
        const components = {VButton,VInput,}
        export function createApp() {
	    const app = createSSRApp(App)
	    //批量注册组件
	    Object.entries(components).forEach(([componentName, component]) => {
		    app.component(componentName, component)
	    })
	    return {app}
        }`


#### 五、支持环境

| 环境名称      | 是否支持 |
|-----------|------|
| APP（Vue3） | √    |
| H5        | √    |
| 微信小程序     | √    |
| 支付宝       | ×    |
| 360小程序    | ×    |
| 等等        | ×    |

#### 五、支持设备
| 设备名称 | 是否支持 |
|------|------|
| 安卓   | √    |
| IOS  | ×    |
| 鸿蒙   | ×    |



### 六、企业级应用案例
1. 湖南省政务平台《湘易办》
    - 应用场景​​：娄底市政务办事大厅系统
    - 技术亮点​​：实现 100+ 表单页面的可视化配置、跨端组件复用率达到 80%、核心业务模块开发效率提升 50%↑
    - 用户反馈​​："通过 v-uni-app 的布局系统，我们仅用 5 天就完成了原本需要 2 周工期的政务门户改版"

### 七、开发者生态
##### 贡献者计划

| 角色    | 成员     | 主要贡献           |
|-------|--------|----------------|
| 核心开发者 | 方笔山、短短 | 框架架构设计、核心模块开发  |
| 质量保障  | 抱歉、风   | 多端兼容性测试、性能优化   |
| 社区运营  | 橙子     | 文档体系建设、开发者社区维护 |

##### 高校合作
- 湖南工业大学
- 湖南师范大学



#### 联系我们

| 渠道   | 联系方式                             | 响应时间   |
|------|----------------------------------|--------|
| 紧急问题 | QQ: 2214685773 (12h 工单)          | 12 小时内 |
| 技术咨询 | kwc1234@qq.com                   | 12 小时内 |
| 文档中心 | https://docs.qq.com/doc/DWEVjQnZVbXBsdnBu | -      |
| GitEE 仓库 | https://gitee.com/kwc410/vuniapp | -      |

#### 路线图
1. title v-uni-app 发展计划
2. 2025 Q4: 发布 1.1 测试版
3. 2025 Q5: 发布 1.0 Bate版
4. 2025 Q9: 发布 1.0 稳定版
4. 2026 Q2: 发布 1.0 正式版
5. 2027 Q8: 接入可视化若依低代码平台
6. 2028 Q9: 推出企业级中后台解决方案
7. 2029 Q5: 建立插件市场生态