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 — Библиотека React-компонентов для создания UI.VK Bridge — Библиотека для взаимодействия с платформой ВКонтакте.vk-mini-apps-router — Библиотека маршрутизации.Совет. Мы рекомендуем именно этот вариант для создания мини-приложений.В проект также подключены другие инструменты и пакеты, которые упрощают создание мини-приложений:vk-miniapps-deploy — размещение файлов мини-приложения на хостинге ВКонтакте.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

• Документация vk-mini-apps-router

• Примеры мини-приложений

• Сообщество VK Mini Apps — сообщество разработчиков мини-приложений ВКонтакте

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

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

1. Сделайте ответвление (fork) репозитория.

2. Склонируйте репозиторий и установите зависимости, выполнив команду yarn.

3. Внесите изменения в код.

4. Выполните сборку с помощью команды yarn run build.

5. Установите изменённый пакет: yarn link.
   Запустите его, чтобы протестировать изменения: create-vk-mini-app.

6. Отправьте MR нам на проверку.