Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vkcom/create-vk-mini-app
Create VK Apps with no build configuration.
https://github.com/vkcom/create-vk-mini-app
react vk vkapps
Last synced: 3 days ago
JSON representation
Create VK Apps with no build configuration.
- Host: GitHub
- URL: https://github.com/vkcom/create-vk-mini-app
- Owner: VKCOM
- License: mit
- Created: 2018-08-03T11:21:53.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-14T06:56:53.000Z (3 months ago)
- Last Synced: 2024-10-29T15:45:03.464Z (2 months ago)
- Topics: react, vk, vkapps
- Language: TypeScript
- Homepage:
- Size: 3.11 MB
- Stars: 54
- Watchers: 14
- Forks: 23
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: docs/CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# create-vk-mini-app
Пакет **create-vk-mini-app** предназначен для создания и развёртывания [мини-приложений ВКонтакте](https://dev.vk.com/mini-apps/overview). С его помощью вы можете быстро создать проект мини-приложения с подключёнными библиотеками и инструментами, которые необходимы для работы на платформе ВКонтакте.
## Ключевые особенности
- Cборка с помощью [Vite](https://vitejs.dev/guide/).
- Автоматическое подключение и поддержка последних версий библиотек, необходимых для создания мини-приложений.
- Конфигурация проекта под различные задачи.
- Поддержка TypeScript и JavaScript.
- Интерактивный режим создания проекта.
- Бесплатный хостинг мини-приложения при помощи [vk-miniapps-deploy](https://dev.vk.com/ru/mini-apps/development/hosting).
## Запуск
### yarn
```
yarn create @vkontakte/vk-mini-app [app-dir-name] [params]
```
### npm
```
npm init @vkontakte/vk-mini-app@latest [app-dir-name] -- [params]
```
> Обратите внимание на двойное тире перед списком параметров. Оно необходимо, это требование npm.
### npx
```
npx @vkontakte/create-vk-mini-app [app-dir-name] [params]
```
### Для Node.js < 18.0.0
Если вы используете более раннюю версию Node.js, чем 18.0.0, то вам нужен пакет create-vk-mini-app версии 1. Чтобы указать номер версии, введите `@1` после названия пакета.
```
npx @vkontakte/create-vk-mini-app@1 [app-dir-name] [options]
```
### Дальнейшие шаги
Команды, упомянутые выше, запускают скрипт создания приложения. Скрипт последовательно попросит вас указать следующие параметры:
- Имя папки для приложения. Если имя папки соответствует требованиям именования npm-пакетов, то это же имя будет указано как название проекта в `package.json`. Если имя папки не может быть использовано для именования пакета, скрипт попросит вас указать другое имя.
- Язык программирования: TypeScript или JavaScript.
- Структурные шаблоны — набор библиотек, которые будут включены в проект:
- VKUI+Bridge+Router — рекомендуемый вариант для создания мини-приложений ВКонтакте.
- VKUI+Bridge
- VKUI-only — этот вариант не подходит для создания мини-приложений. Используйте его для быстрого создания веб-приложений, использующих библиотеку VKUI.
[Подробнее о шаблонах](#project-templates)
## Параметры командной строки
При запуске вы можете ввести следующие параметры командной строки, чтобы указать характеристики создаваемого приложения.
Все параметры необязательные.
Параметр
Описание
app-dir-name
Имя папки для создаваемого приложения.
--projectName={name}
Имя проекта создаваемого приложения, которое будет указано в package.json.
Используется в случае, когда имя папки не соответствует правилам именования npm-пакетов.
--typescript
Создаёт проект на TypeScript. Если этот параметр не указан, то скрипт попросит указать язык при создании приложения.
--template={name}
или
--t={name}
Структурный шаблон — набор библиотек, которые будут включены в приложение при создании. Возможные значения {name}:
- vkui-bridge-router
- vkui-bridge
- vkui-only
## Примеры командной строки
#### Пример 1
```
yarn create @vkontakte/vk-mini-app mini-app --typescript --template=vkui-bridge-router
```
Создаст проект из структурного шаблона `VKUI+Bridge+Router` на TypeScript в подпапке `mini-app` текущей папки.
#### Пример 2
```
npm init @vkontakte/vk-mini-app . -- --template=vkui-bridge
```
Создаст проект из структурного шаблона `VKUI+Bridge`. Скрипт запросит имя папки и язык программирования.
| Параметр | Описание |
| ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **vkui-bridge-router** | Проект со следующими включёнными библиотеками:
- [VKUI](https://github.com/VKCOM/VKUI) — Библиотека React-компонентов для создания UI.
- [VK Bridge](https://github.com/VKCOM/vk-bridge/) — Библиотека для взаимодействия с платформой ВКонтакте.
- [vk-mini-apps-router](https://github.com/VKCOM/vk-mini-apps-router) — Библиотека маршрутизации.
В проект также подключены другие инструменты и пакеты, которые упрощают создание мини-приложений:
- vk-miniapps-deploy — размещение файлов мини-приложения на [хостинге ВКонтакте](https://dev.vk.com/ru/mini-apps/development/hosting).
- VK Tunnel — доступ к веб-серверу, запущенному на рабочем компьютере, из глобальной сети. Необходимо для отладки.
- Eruda — консоль разработчика. Используется для отладки.
- @vkontakte/icons — набор иконок.
- Vite — сборка приложения.
- ESLint — проверка синтаксиса и правил кодирования.
- React и React-DOM — стандартные React-библиотеки.
| **vkui-bridge** | Те же библиотеки и инструменты, что и при использовании **vkui-bridge-router**, за исключением библиотеки маршрутизации `vk-mini-apps-router`. |
| **vkapp-only** | Проект со следующими библиотеками и инструментами:
- VKUI
- @vkontakte/icons
- React и React-DOM
- Vite
- ESLint
## Полезные ссылки
- [Документация VKUI](https://vkcom.github.io/VKUI/)
- [Документация vk-mini-apps-router](https://dev.vk.com/libraries/router)
- [Примеры мини-приложений](https://dev.vk.com/mini-apps/examples)
- [Сообщество VK Mini Apps](https://vk.com/vkappsdev) — сообщество разработчиков мини-приложений ВКонтакте
## Сотрудничество
Мы рады новым идеям и предложениям по улучшению библиотеки. Если вы хотите расширить примеры или улучшить интерфейс командной строки:
1. Сделайте ответвление (fork) репозитория.
2. Склонируйте репозиторий и установите зависимости, выполнив команду `yarn`.
3. Внесите изменения в код.
4. Выполните сборку с помощью команды `yarn run build`.
5. Установите изменённый пакет: `yarn link`.
Запустите его, чтобы протестировать изменения: `create-vk-mini-app`.
6. Отправьте MR нам на проверку.