Перейти к основному содержимому

Установка Vue Gantt

Vue Gantt доступен в двух версиях:

  1. Оценочная версия公开ly доступна на npm, включает водяной знак пробной версии и может дополнительно сопровождаться бесплатным периодом оценки, предоставляющим доступ к технической поддержке.
  2. Профессиональная (коммерческая) версия доступна из приватного репозитория npm DHTMLX и предназначена для использования в продакшене.

Оба пакета содержат один и тот же API.

Требования​

  • Проект на Vue 3 (или проект, в который вы планируете добавить Vue 3)
  • Node.js установлен
  • npm или Yarn доступны
  • Доступ к приватному npm DHTMLX (только для профессионального пакета)

Установка оценочного пакета (публичный npm)​

Сборка для оценки доступна в npm как [@dhtmlx/trial-vue-gantt]:

  • npm:
npm install @dhtmlx/trial-vue-gantt
  • Yarn:
yarn add @dhtmlx/trial-vue-gantt

Эта сборка полностью функциональна, но отображает сообщение о том, что библиотека работает в режиме оценки.

Опционально: начать полный период оценки (рекомендуется)​

Хотя пакет для тестирования устанавливается без ограничений, вы также можете начать официальную оценку через сайт по адресу https://dhtmlx.com/docs/products/dhtmlxGantt-for-Vuejs/download.shtml.

Начало формальной оценки даёт вам бесплатную техническую поддержку в течение пробного периода.

Загрузка офлайн-примеров (zip)

Форма оценки также включает ZIP-файл с офлайн-готовыми примерами.

Вы также можете изучить дополнительные примеры и демонстрационные проекты на официальном GitHub, просмотрев Демо Vue Gantt на GitHub.

Установка профессионального пакета (приватный npm)​

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

После получения коммерческой лицензии вы сможете сгенерировать учетные данные для приватного npm в Личном кабинете клиента.

После генерации вашего логина/пароля настройте npm:

npm config set @dhx:registry=https://npm.dhtmlx.com
npm login --registry=https://npm.dhtmlx.com --scope=@dhx --auth-type=legacy

Затем установите профессиональный пакет:

  • npm:
npm install @dhx/vue-gantt
  • Yarn:
yarn add @dhx/vue-gantt

Используйте совпадающие импорты​

Используйте импорты, которые соответствуют установленному пакету.

ПакетИмпорт компонентаИмпорт CSS
@dhtmlx/trial-vue-ganttimport VueGantt from "@dhtmlx/trial-vue-gantt";import "@dhtmlx/trial-vue-gantt/dist/vue-gantt.css";
@dhx/vue-ganttimport VueGantt from "@dhx/vue-gantt";import "@dhx/vue-gantt/dist/vue-gantt.css";

Требования к версии​

  • Окруженная зависимость:
    • vue >= 3.2.25

Переход от оценочного пакета к коммерческому​

Большинство проектов начинают с оценочного пакета и переключаются на коммерческий позже, после того как прототип одобрён и лицензия получена. Оба пакета используют один и тот же API, поэтому переход в основном механический: поменять имя пакета, поменять импорт CSS и переустановить.

После настройки приватного реестра, как показано выше, обновите каждый импорт в коде:

// до
import VueGantt from "@dhtmlx/trial-vue-gantt";
import "@dhtmlx/trial-vue-gantt/dist/vue-gantt.css";

// после
import VueGantt from "@dhx/vue-gantt";
import "@dhx/vue-gantt/dist/vue-gantt.css";

Поиск проекта на наличие упоминаний @dhtmlx/trial-vue-gantt, включая путь импорта CSS — этот момент легко забыть. Замените зависимость в package.json, затем выполните npm install и запустите приложение. Если водяной знак исчезнет и остальной интерфейс будет вести себя идентично, замена выполнена.

Использование реестра в CI или в общих средах сборки​

npm login нормально работает на рабочей машине, но CI-раннеры и другие общие среды сборки обычно не способны выполнить интерактивный вход. Для таких случаев сгенерируйте неинтерактивный токен доступа с авторизованной машины:

npm token create --registry=https://npm.dhtmlx.com

Токен выводится один раз в терминале — скопируйте его до закрытия сессии, так как впоследствии получить его будет невозможно. Затем разместите его через файл .npmrc, который сборка сможет прочитать:

registry=https://npm.dhtmlx.com
//npm.dhtmlx.com/:_authToken=${DHTMLX_NPM_TOKEN}

Установите DHTMLX_NPM_TOKEN как секрет в CI-провайдере (GitHub Actions, GitLab и т. д.), чтобы токен никогда не попадал в репозиторий. Та же схема работает и для сборок в Docker — внедряйте токен во время сборки, а не в образ.

Если npm install терпит неудачу на CI с кодами 401 или 403 против npm.dhtmlx.com, секрет либо отсутствует, либо истёк, либо файл .npmrc не находится там, где npm ожидает (наиболее безопасное место — корень проекта).

Что читать далее​

Need help?
Got a question about the documentation? Reach out to our technical support team for help and guidance. For custom component solutions, visit the Services page.
Need more help?Contact Support