minnan-demo-app

公司内部用演示程序

该项目是一个公司内部用的演示程序，部署在大屏上用于展示公司的产品和服务，支持配置显示的内容页面和显示比例等。

技术栈

前端核心技术

• Vue 3：使用 Composition API
• Electron：跨平台桌面应用框架
• TypeScript：类型检查
• Vite
• SCSS
• Vue Router
• Ant Design Vue
• Monaco Editor：代码编辑器，用于配置文件编辑

开发工具

• TypeScript：类型检查
• Vite：开发服务器和构建工具
• Electron Builder：应用打包工具
• Sass：CSS预处理器

项目结构

src/
├── assets/           # 静态资源文件
├── components/       # 组件
│   ├── AppList.vue   # 应用列表组件
│   └── AppListItem.vue # 应用列表项组件
├── config/           # 配置文件
│   └── version.json  # 版本信息
├── model/            # 类型定义
│   └── App.ts        # 应用模型接口
├── router/           # 路由配置
│   └── index.ts      # 路由定义
├── views/            # 页面视图
│   ├── About.vue     # 关于页面
│   ├── Config.vue    # 配置页面
│   ├── Error.vue     # 错误页面
│   ├── Expand.vue    # 扩展页面
│   ├── Hello.vue     # 欢迎页面
│   ├── Loading.vue   # 加载页面
│   └── Main.vue      # 主页面
├── App.vue           # 根组件
├── main.ts           # 入口文件
└── vite-env.d.ts     # Vite环境类型定义

开发与构建

开发命令

# 启动开发服务器
npm run dev

构建命令

# 构建Windows版本, 输出到release目录
npm run build

类型检查

# 执行TypeScript类型检查
npm run typecheck