# Juan-DIY-H5

**Repository Path**: flashme/Juan-DIY-H5

## Basic Information

- **Project Name**: Juan-DIY-H5
- **Description**: DIY移动端页面，基于布局容器可无限嵌套组件。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-09-27
- **Last Updated**: 2025-06-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: DIY模板, vue组件, 自定义模板, 手机端组件, 拖拽组件

## README

# Juan-DIY-H5
<img src="/public/images/logo.png" height="80" />  

## DIY移动端模板
### 配置端（后台）为：Vue3 + elementPlus
### 前端为：只需Vue3及原生js，无第三方插件
尽可能的减少第三方依赖，方便引入自己需要的模块
### 特点
* 文件结构整合易迁移；  
* 对比其它同类DIY，多了布局容器，可自由嵌套定位组件（flex布局方式）；  
* 容器可设置内外间距，可设置背景，可拖动排序；  
* 布局容器对C端用户有些许学习成本，可自行抉择是否禁用此功能；  
* 魔方图片3D过渡动画（响应滚屏事件）；  
* 后续视情况会持续卷组件的动画，优化视觉效果；  
![容器](screenshot2.gif)  
## 演示地址
[http://www.flashme.cn/item/diyh5/](http://www.flashme.cn/item/diyh5/)  
## 安装运行
> npm install  
> npm run dev  

## 核心文件结构
> /src/pages/diymobile/  
@name: 通用DIY模板  
@Author: flashme.cn  
@Date: 2024-09-23  
@description:  
├─ /组件目录/  
│ ├ index.vue （组件配置入口文件）  
│ ├ config.js （组件数据结构）  
│ └ module.vue （组件模块 呈现文件 - 可自己定制）  
├─ config.js （按钮配置）  
├─ select.vue （定义可选链接类型 - 可自己定制）  
├─ **index.vue （后台入口文件）**  
├─ mobile.vue （可拖拽组件模块 - 配置组件）  
├─ module.vue （组件模块 - 项目引用呈现文件）  
├─ **view.vue （前端项目引用示例）**  
├─ link.js （组件链接出口 - 可自己定制）  
└─ unit.js （单位 - 默认px rem示例1rem=20px）  

### 其它被引入的文件
> /src/js/store.js（全局状态）  
> /src/js/function.js（函数类）  
> /src/components/mode-upimg.vue（上传组件）  
> /src/components/material.vue（在线文件选择器 - 演示文件 如不需要store.js的online:false）  
> /src/assets/style.css（全局样式）  
> /public/css/styleme.css（静态公共样式）  

## 前端预览DEMO
> /src/views/diy/diyview.vue

## 预览
![配置](screenshot.jpg)  
魔方图片动画预览，JS+CSS动画（花里胡哨）：  
![预览](screenshot3.gif)