How to implement vue.js in an existing project?

Everywhere write that vue.js you can introduce gradually into a working site. But I never found how to do it right. Any manual or step by step on vue.js begins with the words "let's make the first vuejs-app". But I don't need the app. I need to make a form and place it as a component to place on multiple pages.

While I do so:
1) connected vue.js
2) nafigachili Vue.component()
3) profit??? Of course not.

My component I want to split into multiple. They can have a three-dimensional pattern. In short, come to what you want to do "single-component". Once they collect webpack'the second, etc. And then again "create vuejs-app"...

How to be in this situation? What to read? How it could to do the steps?
June 5th 19 at 21:04
4 answers
June 5th 19 at 21:06
  1. Put vue-cli (documentation installation instructions).
  2. Make right components
  3. Gather (npm run build)
  4. Assembled build.js connect to the desired page
June 5th 19 at 21:08
If you want to use Vue for individual modules (widgets, forms, etc.) that do the following:

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

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

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


The result is a separate stand-alone instance of Vue with all chips single-file components.
Of course it is necessary to accordingly configure the Assembly project.
If not difficult, could you throw an example build (preferably gulp'ohms). - gaston commented on June 5th 19 at 21:11
together it's a fairly lengthy story turns out, the ground under our tasks. Collect vebacom, in fact - just add the loader to the vue (styles in this build, the components do not write, meet separately with the other styles of the project). - rossie.Cro commented on June 5th 19 at 21:14
June 5th 19 at 21:10
The vision of Your "problems".

1. Connect visit the Vue distribution via CDN or locally.
2. Move that piece of the page code that needs to be brought under control Vue in a separate js file.
3. Instead of this piece of code on the page, place the element with the identifier (id) when rendering you could fit on Your Vue component.
4. Modify the migrated code in. js file under the Vue - Vue create a component.
5. Connect a. js file on the page.
6. Profit.

PS
Thus it is possible to do Vue-component - no problem.
June 5th 19 at 21:12
In the end still have to redo the whole thing. I came to this because very different approaches - build project SPA and try a gradual introduction.

Find more questions by tags Vue.js