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

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

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

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

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

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

Войти через центр авторизации
Похожие вопросы
07 авг. 2020, в 19:51
2000 руб./за проект
07 авг. 2020, в 19:24
4000 руб./за проект