Задать вопрос
@Danbka
vue

Как внедрять vue.js в существующий проект?

Везде пишут, что vue.js можно внедрять постепенно на работающий сайт. Но я как-то нигде не нашел, как это правильно делать. Любой мануал или step by step по vue.js начинается словами «Давай создадим первое vuejs-приложение». Но мне не нужно приложение. Мне нужно, например, сделать форму и оформить ее в виде компонента, что бы разместить на нескольких страницах.

Пока что я делаю так:
1) подключил vue.js
2) нафигачил Vue.component()
3) profit??? Конечно нет.

Свой компонент я хочу разбить на несколько. Они могут иметь объемный шаблон. Короче говоря, прихожу к тому, что нужно делать «однофайловый компонент». Как-то их собирать webpack’ом и т.д. И дальше снова «создадим vuejs-приложение»...

Как быть в такой ситуации? Что почитать? Как это вапще делать по шагам?
  • Вопрос задан
  • 5032 просмотра
Комментировать
Подписаться 14 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 4
@VaniXac
17 лет
  1. Ставишь vue-cli (в документации инструкция по установке).
  2. Делаешь нужные компоненты
  3. Собираешь (npm run build)
  4. Собранный build.js подключаешь на нужной странице
Ответ написан
Комментировать
Комментировать
andrhohlov
@andrhohlov
Если нужно использовать Vue для отдельных модулей (виджетов, форм и т.д.) то делаем следующим образом:

import Vue from 'vue';
import VueComponent from './VueComponent.vue';

const element = document.getElementById('element');

new Vue({
  el: element,
  template: `<vue-component/>`,
  components: {
    VueComponent,
  },
});


В результате получаем отдельный изолированный экземпляр Vue со всеми фишками однофайловых компонентов.
Само собой нужно соответствующим образом настроить сборку проекта.
Ответ написан
2 комментария
2 комментария
mQm
@mQm
https://medium.com/@gearmobile
Свое видение Вашей "проблемы".

1. Подключаете на странице дистрибутив Vue через CDN или локально.
2. Переносите тот кусок кода страницы, который нужно подвести под контроль Vue, в отдельный js-файл.
3. Вместо этого куска кода на странице помещаете элемент с идентификатором (id) - при рендеринге здесь поместится в результате Ваш Vue-компонент.
4. Модифицируете перенесенный код в js-файле под Vue - создаете Vue-компонент.
5. Подключаете js-файл на странице.
6. Профит.

P.S.
Таким образом можно делать Vue-компонентов - сколько угодно.
Ответ написан
Комментировать
Комментировать
@marsdenden
В конце концов все равно придётся переделывать все полностью. Я пришёл именно к этому, поскольку слишком разные подходы - сборка проекта SPA и попытка постепенного внедрения.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Vue & Capacitor Developer Middle++
Parasol Software
от 2 000 до 2 500 $
Frontend developer (middle/senior)
//stablecode
от 210 000 ₽
Senior Frontend VueJS (частичная занятость)
Онград+
от 125 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Спарсить TON PLACE: скрейпинг фото и текста с анкет по списку URL
25 апр. 2024, в 05:57
3000 руб./за проект
Правки в webApp готового и написанного телеграмм бота next, tailwind
25 апр. 2024, в 05:29
25000 руб./за проект
Фронтер - DevOps. Развернуть фронт на хостинге. Прокинуть в телегу-бот
25 апр. 2024, в 04:38
10000 руб./за проект
Ещё заказы