Ilia Miheev
83 lines
2.7 KiB
Markdown
83 lines
2.7 KiB
Markdown
## [Сайт](https://iliamiheev.github.io/iQR/) на котором можно генерировать QR коды
|
|
|
|
Вводишь текст и генерируешь. Всё просто.
|
|
|
|
Проект на **Vue 3 + Vite**. Подходит для деплоя на поддомен (например `qr.example.com`) с кастомизацией брендинга.
|
|
|
|
### Запуск локально
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
Приложение откроется по адресу `http://localhost:5173/`.
|
|
|
|
Файл `.env` **не обязателен** — без него работают значения по умолчанию. Нужен только если хотите кастомизировать интерфейс при локальной разработке (`npm run dev` / `npm run build`).
|
|
|
|
### Настройка через `.env` (только локально)
|
|
|
|
Скопируйте `.env.example` в `.env` и измените значения:
|
|
|
|
| Переменная | Описание | По умолчанию |
|
|
|---|---|---|
|
|
| `VITE_APP_TITLE` | Заголовок | `Генератор QR-кодов` |
|
|
| `VITE_BANNER_BRAND` | Бренд в плашке | `iQR` |
|
|
| `VITE_BANNER_SLOGAN` | Слоган в плашке | `— qr-код без излишеств` |
|
|
| `VITE_BANNER_URL` | Ссылка плашки | репозиторий iQR |
|
|
| `VITE_ACCENT_COLOR` | Акцентный цвет | `#ff4500` |
|
|
| `VITE_DEFAULT_THEME` | Тема по умолчанию (`dark` / `light`) | `dark` |
|
|
|
|
После изменения `.env` перезапустите `npm run dev`.
|
|
|
|
### Docker
|
|
|
|
Для Docker **`.env` не нужен** — настройки передаются переменными окружения в `docker-compose.yml`.
|
|
|
|
```bash
|
|
docker compose up --build
|
|
```
|
|
|
|
Сайт будет на `http://localhost:8080`.
|
|
|
|
```yaml
|
|
environment:
|
|
APP_TITLE: "QR на моём сайте"
|
|
BANNER_BRAND: "MySite"
|
|
BANNER_SLOGAN: "— быстрые qr-коды"
|
|
BANNER_URL: "https://example.com"
|
|
ACCENT_COLOR: "#7c3aed"
|
|
DEFAULT_THEME: "light"
|
|
```
|
|
|
|
При старте контейнера генерируется `config.json`, поэтому пересборка образа для смены текстов не нужна.
|
|
|
|
### Сборка
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Результат в папке `dist/`.
|
|
|
|
### Структура
|
|
|
|
```
|
|
src/
|
|
App.vue
|
|
config/ — загрузка настроек
|
|
composables/
|
|
useTheme.js
|
|
useQrCode.js
|
|
useAppConfig.js
|
|
assets/style.css
|
|
public/img/
|
|
docker/ — nginx и entrypoint
|
|
```
|
|
|
|
<div style="text-align: center">
|
|
|
|
|
|
|
|
</div>
|