# vue3-iframe

**Repository Path**: zhouaizhuang/vue3-iframe

## Basic Information

- **Project Name**: vue3-iframe
- **Description**: 基于vue3 + vite + pina + vue-router的自封装脚手架。内置自研指令、自研原子样式、自研组件、自研json渲染器、自研shell脚本等提效工具，开箱即用。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2023-11-14
- **Last Updated**: 2026-01-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## **1.介绍**
基于Vue3的Web前端项目模板

## **2.软件架构**
1. 技术栈：vue3 + vite + javascript + pinia + vue-router
2. 封装设计：全局通用原子类样式 + 全局自定义指令 + 全局自定义组件 + 全局hooks + 代码片段
3. 提效工具：shell脚本压缩图片、打包、提交、创建文件、对文件重命名

## **3.安装教程**
1.  拉取代码 git clone https://gitee.com/zhouaizhuang/vue3-iframe.git
2.  安装依赖：npm install

## **4.使用说明**
启动项目: npm run dev

# 项目结构
```
src
├── addWinFn.js    <--注册到全局的函数集合
├── animate    <--动画组件库
│   ├── AniDrag    <--拖拽排序组件
│   ├── AniNum    <--数字滚动动画
│   ├── AniPercent    <--进度条动画
│   ├── AniWrapper    <--入场出场动画
├── App.vue    <--项目入口
├── assets    <--静态资源的文件夹
│   ├── empty.png
│   ├── iconWork.png
├── atomUI    <--原子UI组件
│   ├── atomButton    <--按钮
│   ├── atomCheckBox    <--多选
│   ├── atomCollapse    <--折叠框
│   ├── atomDetail    <--详情
│   ├── atomDropdown    <--下拉
│   ├── atomEllipsis    <--省略号
│   ├── atomInput    <--输入框
│   ├── atomInputNumber    <--数字输入框
│   ├── atomLabel    <--label显示
│   ├── atomRadio    <--单选
│   ├── atomSelect    <--选择
│   ├── atomSvg    <--svg封装
│   ├── atomSwitch    <--switch开关选择
├── common.css    <--
├── common.js    <--
├── components    <--常用组件库
│   ├── Calendar  <--日历
│   ├── Empty     <--空状态
│   ├── FileTree     <--文件树
│   ├── index.js    <--
│   ├── LoadMore    <--加载更多
│   ├── PipeUploadZip    <--分片上传
│   ├── PreviewImgs    <--预览图片
│   ├── Slide    <--滑动
│   ├── StarPoint    <--五星选择
│   ├── UploadImgs    <--上传图片
│   ├── UploadZip    <--上传压缩包
│   ├── zConfirm    <--确认框
├── custom.css    <--组定义样式
├── directives    <--指令
│   ├── index.js    <--
│   ├── modules    <--
├── entry    <--多页面入口
│   ├── page1    <--多页1
│   ├── page2    <--多页2
├── hooks    <--hooks钩子
│   ├── index.js
│   ├── modules
├── i18n    <--多语言
│   ├── index.js
│   ├── modules
├── main.js    <--项目入口
├── renderEngine    <--渲染引擎
│   ├── ContainerRender    <--内容渲染引擎
│   ├── index.js
│   ├── LoadingRender    <--加载渲染引擎
│   ├── ModalRender    <--弹框渲染引擎
│   ├── SearchRender    <--搜索渲染引擎
│   ├── TableRender    <--表格渲染引擎
│   ├── TabRender    <--tab渲染引擎
│   ├── TreeRender    <--树形渲染引擎
├── router    <--路由
│   ├── index.js
│   ├── modules
├── storeArea    <--自定义全局数据
│   ├── index.js
├── stores    <--pinia全局数据存储
│   ├── index.js
├── utils    <--工具函数
│   ├── base64.js    <--base64
│   ├── checkUpdate.js    <--检查更新
│   ├── dataStructure.js    <--数据结构
│   ├── network.js    <--网络封装
│   ├── px2rem.js    <--移动端rem适配
│   ├── tools.js    <--工具函数
├── viewLayout    <--layout布局
│   ├── homeMenu    <--home菜单
├── views    <--页面
│   ├── home    <--主页
│   ├── page1Test    <--页面1测试
│   ├── page2Test    <--页面2测试
```
## 说明

- 以上结构由脚本自动生成，请勿手动修改。
- 若有新增目录，请运行 `./shell/tree.sh` 更新。
- 已排除以下目录/文件：
  - node_modules
  - dist
  - .git
  - .vscode
  - __pycache__
  - *.log
  - *.DS_Store
- 当前模式：显示文件 ✅