laravel & vue.JS：app.js 中的“组件”、“导入”和“使用”

Question

I'm using laravel together with VueJS and I never entirely understood the logic behind the 'import', 'use' and 'component' used in app.js. Maybe someone could give me a hint/link on how to use them correctly.

To use custom vue components (separate files) in a blade I need to define them in the root 'app.js' file.

Now here I'm kind of lost. Inside the app.js file there are:

window.Vue = require('vue');
[..]

Vue.component('my-vue-component', require('./components/my-vue-component.vue').default);
[..]

import Vue from 'vue';
import VueDraggableResizable from 'vue-draggable-resizable';
[..]

Vue.use(VueClipboard);

as well as:

const app = new Vue({
    el: '#app',
    components: {
        dropZone: vue2Dropzone,
        draggable, Hooper, Slide, HooperPagination,
        'my-vue-component': MyVueComponent,
        [..]
    },

What are 'component', 'import', 'use' and 'components:{' doing exactly?

• 'component' probably defines the component file with the template.
• 'import' -> I dont' know what that does.
• 'use' -> also no idea.
• 'components: {' -> probably makes the link back to the template file by passing the name of the component.

Answer 1

1.import is not vue related. Its function is to bring another js module into current js module. If u know old js, it is similar to require(), it was introduced in es6.

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

• https://stackoverflow.com/questions/46677752/the-difference-between-requirex-and-import-x#:~:text=The%20major%20difference%20between%20require,act%20the%20same%20as%20require%20 . this answer explained whats different between import and require.

2.Vue.use is vue's feature, to install vue plugin. Links below explained what's a vue plugin looks like and how to install it.

• https://v2.vuejs.org/v2/guide/plugins.html

3.Vue.component and components both are the ways for vue to register vue component.

• https://v2.vuejs.org/v2/guide/components-registration.html