VKCOM/create-vk-mini-app - GitHub

Skip to content Dismiss alert {{ message }} VKCOM / create-vk-mini-app Public

• Notifications You must be signed in to change notification settings
• Fork 30
• Star 60

Create VK Apps with no build configuration.

License

MIT license 60 stars 30 forks Branches Tags Activity Star Notifications You must be signed in to change notification settings

• Code
• Issues
• Pull requests 25
• Actions
• Projects
• Security

  Uh oh!

  There was an error while loading. Please reload this page.

• Insights

Additional navigation options

VKCOM/create-vk-mini-app  masterBranchesTagsGo to fileCodeOpen more actions menu

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit   History 286 Commits
.github		.github
docs		docs
src		src
templates		templates
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.npmignore		.npmignore
.prettierignore		.prettierignore
.prettierrc.js		.prettierrc.js
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
package.json		package.json
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock
View all files

Repository files navigation

• README
• Contributing
• MIT license

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.

  Подробнее о шаблонах

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

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

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

Параметр	Описание
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 — Библиотека 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/icons React и React-DOM Vite ESLint Этот вариант не подойдёт для создания мини-приложений, так как в нём отсутствует 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 нам на проверку.

About

Create VK Apps with no build configuration.

Topics

react vk vkapps

Resources

Readme

License

MIT license

Contributing

Contributing

Uh oh!

There was an error while loading. Please reload this page.

Activity Custom properties

Stars

60 stars

Watchers

12 watching

Forks

30 forks Report repository

Releases 18

Update without sw and new connect Latest Nov 8, 2018 + 17 releases

Packages

No packages published

Uh oh!

There was an error while loading. Please reload this page.

Contributors 20

Uh oh!

There was an error while loading. Please reload this page.

+ 6 contributors

Languages

• TypeScript 52.7%
• JavaScript 41.9%
• HTML 5.1%
• CSS 0.3%

You can’t perform that action at this time.