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

Question

我將 laravel 與 VueJS 一起使用，但我從未完全理解 app.js 中使用的“導入”、“使用”和“組件”背后的邏輯。 也許有人可以給我一個關於如何正確使用它們的提示/鏈接。

要在刀片中使用自定義 vue 組件（單獨的文件），我需要在根“app.js”文件中定義它們。

現在我有點迷路了。 在 app.js 文件中有：

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);

也：

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

“組件”、“導入”、“使用”和“組件：{”到底在做什么？

• 'component' 可能用模板定義了組件文件。
• 'import' -> 我不知道那是做什么的。
• 'use' -> 也不知道。
• 'components: {' -> 可能通過傳遞組件的名稱使鏈接返回到模板文件。

Answer 1

1.import與vue無關。 它的 function 是在當前的 js 模塊中引入另一個 js 模塊。 如果你知道舊的 js，它類似於 require()，它是在 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 . 這個答案解釋了 import 和 require 之間的區別。

2.Vue.use是vue的特性，用來安裝vue插件。 下面的鏈接解釋了 vue 插件的外觀以及如何安裝它。

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

3.Vue.component 和 components 都是 vue 注冊 vue 組件的方式。

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