Как интегрировать vue 3 с этапом сборке на проекте с bitrix?

1С-Битрикс JavaScript Vue.js

1 ответ

Немного контекста. Сайт написан на bitrix, преимущественно на JQ.
Я постепенно переписываю его на нативный js и vue
Vue подключен через script и код пишется без этапа сборки.
Разработка ведется через ssh на клонах сайта и потом все заливается на прод через git
На vue пишу каждый функционал отдельным приложением (К примеру писал конфигуратор для мебели и это новый createApp, поиск с выпадающими предложениями, историей и тд, это новый createApp и так далее)
Понимаю какой это костыль, но ничего лучше пока не придумал с этим битриксом.

Давно хочу интегрировать этап сборки, что бы разработка была комфортной но не понимаю с какой стороны подойди.
Сразу перейти на vue и отказаться от jq невозможно.
Возможно кто то подскажет какую структуру стоит создать и где размещать, как это все потом собирать и так далее
Документации на что то подобное пока не нашел, не у vue, не у vite, не у webpack
Буду рад любой информации или возможно вектору, где ее можно найти

Дополнительно:

Как интегрировать vue 3 с этапом сборке на проекте с bitrix?

Вариантов не много:
1. Использовать тот подход, который используете сейчас.
2. Писать отдельно фронт, а данные получать по api от битрикса.

Я тоже так думал, но коллега бэк говорит, что на предыдущем проекте у них это было реализовано.
Но увы каких то деталей не знает.
DanilBezrukov, так Вам нужны подробности разворачивания фронта на vue?
Vue используется, я подразумеваю использование компонентов с расширением .vue

vue сам себя позиционируется как модульное внедрение, где можно сделать на всем сайте только один селект с подгрузкой и поиском (например). Так что ничего плохого в твоем подходе нет, в будущем просто добавишь этот кусок в монолит если надо будет.

ничего лучше пока не придумал с этим битриксом

Поэтому Битрикс уже всё придумал за вас, пожалуйста изучите:

BitrixVue 3
Расширения (extensions)
@bitrix/cli

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Кирилл JS Ответ

Для интеграции Vue 3 с проектом на Bitrix, вам потребуется выполнить несколько шагов:

1. Установите Vue CLI, если у вас его еще нет. Вы можете установить его с помощью npm:

npm install -g @vue/cli

npm install -g @vue/cli

2. Создайте новый проект Vue с помощью Vue CLI:

vue create my-vue-project

vue create my-vue-project

3. После создания проекта, скопируйте все файлы из директории проекта Vue в директорию вашего проекта Bitrix.

4. В файле `webpack.config.js` вашего проекта Bitrix добавьте следующий код для настройки сборки Vue:

const { VueLoaderPlugin } = require('vue-loader');
 
module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

const { VueLoaderPlugin } = require('vue-loader'); module.exports = { module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.js$/, loader: 'babel-loader' } ] }, plugins: [ new VueLoaderPlugin() ] };

5. В файле `main.js` вашего проекта Bitrix импортируйте Vue и создайте экземпляр приложения:

import Vue from 'vue';
import App from './App.vue';
 
new Vue({
  render: h =&gt; h(App)
}).$mount('#app');

import Vue from 'vue'; import App from './App.vue'; new Vue({ render: h => h(App) }).$mount('#app');

6. Теперь вы можете создавать компоненты Vue и использовать их в своем проекте Bitrix.

7. Для запуска проекта используйте команду:

npm run serve

npm run serve

Теперь у вас должна быть интеграция Vue 3 с проектом на Bitrix. Не забудьте проверить работоспособность вашего приложения и отладить его при необходимости.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Figma Баг с переносом слов в Figma? 1 ответ

Как интегрировать vue 3 с этапом сборке на проекте с bitrix?

Дополнительно:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно