@vkontakte/create-vk-mini-app NPM

create-vk-mini-app

Пакет create-vk-mini-app предназначен для создания и развёртывания мини-приложений ВКонтакте. С его помощью вы можете быстро создать проект мини-приложения с подключёнными библиотеками и инструментами, которые необходимы для работы на платформе ВКонтакте.

Ключевые особенности

Cборка с помощью Vite.
Автоматическое подключение и поддержка последних версий библиотек, необходимых для создания мини-приложений.
Конфигурация проекта под различные задачи.
Поддержка TypeScript и JavaScript.
Интерактивный режим создания проекта.
Бесплатный хостинг мини-приложения при помощи vk-miniapps-deploy.

Запуск

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.
Подробнее о шаблонах

Параметры командной строки

При запуске вы можете ввести следующие параметры командной строки, чтобы указать характеристики создаваемого приложения.

Все параметры необязательные.

Примеры командной строки

Пример 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=vkapp-bridge-ui

Создаст проект из структурного шаблона 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/iconsReact и React-DOMViteESLintЭтот вариант не подойдёт для создания мини-приложений, так как в нём отсутствует VK Bridge — библиотека, которая необходима для взаимодействия с платформой. Используйте этот вариант для создания веб-приложений, использующих библиотеку VKUI.

Полезные ссылки

[Документация 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) — сообщество разработчиков мини-приложений ВКонтакте

Сотрудничество

Мы рады новым идеям и предложениям по улучшению библиотеки. Если вы хотите расширить примеры или улучшить интерфейс командной строки:

Сделайте ответвление (fork) репозитория.
Склонируйте репозиторий и установите зависимости, выполнив команду yarn.
Внесите изменения в код.
Выполните сборку с помощью команды yarn run build.
Установите изменённый пакет: yarn link.
Запустите его, чтобы протестировать изменения: create-vk-mini-app.
Отправьте MR нам на проверку.