Подключаем Vue.js к VtigerCRM и создаём первый виджет

Vue.js - это прогрессивный JavaScript-фреймворк, с которым я работал много лет. После работы с большой тройкой - React, Vue и Angular, Vue быстро стал моим основным инструментом для создания множества приложений. Очень часто от клиентов я получаю проекты, связанные с добавлением интерактивности к VtigerCRM. Основная проблема, с которой я столкнулся и о которой слышал от многих моих коллег, заключалась в отсутствии дополнительных материалов о том, как подключить Vue.js к VtigerCRM. Вот почему я решил записать видеоинструкцию, так как я твердо уверен, что Vue готов к работе и может успешно использоваться в VtigerCRM.

В этом видео мы установим Vue.js на VtigerCRM и попробуем создать собственный виджет, который будет отображать список последних лидов и позволит быстро фильтровать их по пользователям и отраслям. И всё это будет реализовано на базе Vue.js.

Важный момент: использование Vue.js в данном видео предполагаем, что у вас должен быть установлен Node.js. Если у вас его ещё нет, то рекомендуем установить перед просмотром видео.

Помимо видеоинструкции я привожу текстовый вариант инструкции по установке Vue.js

Для настройки проекта в папке с VtigerCRM вам для начала потребуется установить глобально vue-cli. Если вы ещё этого не сделали, запустите команду:

npm install -g @vue/cli@next

Для создания проекта на vue.js, запустите команду:

vue create vue

Далее система попросит вас выбрать один из трёх вариантов:

• Default Vue 2

• Default Vue 3

• Manually Select Features

Мы выберем последний вариант. Далее система попросит выбрать опции, которые вам потребуется установить. Это уже по желанию, но нам главное установить Vuex.

Далее система спросит какую версию Vue3 мы будем устанавливать. Рекомендую установить 3 версию.

Затем вам будет задана серия вопросов. Мы их приведём ниже с вариантами наших ответов:

Use class-style component syntax? N (NOTE: we will be using the Vue Composition API

style in this book, but we will give an example on how to use the class-style syntax as well

in one of the advanced chapters)

? Use class-style component syntax? (y/N) N

Where do you prefer placing config … ? In dedicated config files

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)

> In dedicated config files

In package.json

В конце вам будет предложено сохранить настройки. Вы можете ответить "Нет".

Vue-cli после этого создаст проект, установит все зависимости, создаст конфигурационные файлы.

После этого рекомендую поставить пакет cross-env:

npm install cross-env --save-dev

Данный пакет позволит хранить переменные окружения в файле .env.

После этого можно считать, что Vue.js успешно установлен. Теперь вы можете попробовать скомпилировать js файлы и их можно подключать к VtigerCRM.

И, конечно же, подробная видеоинструкция приложена ниже.