Javascript 正在将Vue.components列表加载为要在app.js中使用的导出阵列

我在Laravel 8上使用vue.js v2.6。我正在尝试将我的所有

Vue.component（）

声明移出app.js，并在它们自己的文件中声明它们，这样

app.js

就不会那么混乱了。因此，在我的项目中，我创建了一个新文件

js/vueComponents.js

，并在其中粘贴了所有vue组件声明。然后在

app.js

中，我尝试导入和

Vue.use（require（））

但我在控制台中收到以下错误：

app.js:4301 Uncaught TypeError: $ is not a function
    at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components...

我对将js文件作为模块导入有点陌生…我这样做不对吗

vueComponents.js

import * as Vue from 'vue'

export let vueFiles = [
        Vue.component('users-page', require('./components/users-page.vue').default),
        Vue.component('admin-page', require('./components/admin-page.vue').default),
        ...20 more components...
    ];

// no need to import Vue.
// Just do this... (no array)
Vue.component('users-page', require('./components/users-page.vue'));
Vue.component('admin-page', require('./components/admin-page.vue'));

app.js

import { vueFiles } from './vueComponents.js';
Vue.use(vueFiles);

require("./vueComponents.js") // give the correct path.

vueComponents.js

import * as Vue from 'vue'

export let vueFiles = [
        Vue.component('users-page', require('./components/users-page.vue').default),
        Vue.component('admin-page', require('./components/admin-page.vue').default),
        ...20 more components...
    ];

// no need to import Vue.
// Just do this... (no array)
Vue.component('users-page', require('./components/users-page.vue'));
Vue.component('admin-page', require('./components/admin-page.vue'));

app.js

import { vueFiles } from './vueComponents.js';
Vue.use(vueFiles);

require("./vueComponents.js") // give the correct path.