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

Question

[Danbka]

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

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

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

Как быть в такой ситуации? Что почитать? Как это вапще делать по шагам?

Answer 1

[Ваник Хачатрян]

1. Ставишь vue-cli (в документации инструкция по установке).
   
2. Делаешь нужные компоненты
   
3. Собираешь (npm run build)
   
4. Собранный build.js подключаешь на нужной странице
   

Answer 2

[Андрей Хохлов]

Если нужно использовать 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 со всеми фишками однофайловых компонентов.
Само собой нужно соответствующим образом настроить сборку проекта.

Comments

[Евгений Корначев]

Если не сложно, не могли бы вы кинуть пример сборки (желательно gulp'ом).

[Андрей Хохлов]

Евгений Корначев, вместе это достаточно объёмная история получается, заточенная под наши задачи. Собираю вебпаком, по сути - просто добавить лоадер для vue (стили в такой сборке в компонентах не пишу, собираются отдельно с остальными стилями проекта).

Answer 3

[Moe Green]

Свое видение Вашей "проблемы".

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

P.S.
Таким образом можно делать Vue-компонентов - сколько угодно.

Answer 4

[marsdenden]

В конце концов все равно придётся переделывать все полностью. Я пришёл именно к этому, поскольку слишком разные подходы - сборка проекта SPA и попытка постепенного внедрения.