mainsail 前端控制界面源码分析

[mainsail 最新发布版本](https://github.com/mainsail-crew/mainsail/releases/latest/download/mainsail.zip)

[mainsail  crowsnest 摄像头](https://crowsnest.mainsail.xyz/)

[µStreamer](https://github.com/pikvm/ustreamer)

## mainsail 生成的前端工程目录

```bash
├── assets
├── config.json
├── css
├── fonts
├── img
├── index.html
├── manifest.webmanifest
├── release_info.json
├── sw.js
└── workbox-78627b31.js
```
*  [workbox-78627b31.js](https://blog.baoshuo.ren/post/workbox-service-worker/) 是一个由 Google 开发的开源库，用于简化 Service Worker 的开发。它提供了一系列工具和策略，帮助开发者更轻松地实现离线支持、缓存管理、路由等功能。
*  sw.js 是 Service Worker 的一个常见文件名，通常用于存放 Service Worker 的代码。Service Worker 是一种运行在浏览器后台的脚本，用于拦截和处理网络请求，实现离线支持、推送通知等功能。

## 安装mainsail开发环境

```bash
sudo apt install git -y
# 安装 Node.js
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install nodejs -y
# 验证安装
node -v
npm -v
```

* 进入mainsail 目录，安装项目依赖
```bash
npm ci
```

* 修改.env.development.local

```bash
# hostname or ip from the moonraker instance
VUE_APP_HOSTNAME=printer.local

# port from the moonraker instance
VUE_APP_PORT=7125

# route_prefix from the moonraker instance
VUE_APP_PATH="/"

# reconnect interval in ms
VUE_APP_RECONNECT_INTERVAL=5000

# where should mainsail read the instances from (moonraker, browser or json)
VUE_APP_INSTANCES_DB="moonraker"

# defaults for multi language tests
VUE_APP_I18N_LOCALE=en
VUE_APP_I18N_FALLBACK_LOCALE=en
```

* 启动开发服务器，来测试 Mainsail 应用
```bash
npm run serve
```

* 打包代码, 将前端代码打包到 dist/ 目录中
```bash
npm run build
```