如何在 Laravel 中自定义 vue-filemanager 前端？

Posted 2023-02-22

【中文标题】如何在 Laravel 中自定义 vue-filemanager 前端？

【英文标题】：How to customize vue-filemanager frontend in Laravel?

【发布时间】：2021-07-09 08:17:35

【问题描述】：

我正在使用 https://github.com/alexusmai/laravel-file-manager 包，它带有预编译的 js 文件，或者您可以直接通过 npm 从https://github.com/alexusmai/vue-laravel-file-manager 使用 vue-component。

但是，在这两种变体中，前端都是不可修改的。 我在我的应用程序中使用 Laravel 文件管理器，我想对 vue 文件进行自定义以更改前端。

到目前为止我尝试了什么：

将https://github.com/alexusmai/vue-laravel-file-manager/tree/master/src的内容复制到/resources/assets/js/file-manager

然后我像这样创建了一个file_manager.js：

import Vue from 'vue';
import Vuex from 'vuex';
import FileManager from './file-manager/FileManager.vue';

Vue.use(Vuex);

// create Vuex store, if you don't have it
const store = new Vuex.Store();

Vue.use(FileManager, store);


Vue.component('file-manager', FileManager);


const app = new Vue(
    store
    el: '#app'
);

在我的 webpack.mix.js 文件中，我添加了这一行：

.js('resources/assets/js/file-manager.js', 'public/js')

现在npm run dev 有效，但如果我打开包含此内容的页面：

<div style="height: 600px;">
    <div id="app">
        <file-manager></file-manager>
    </div>
</div>
<script src=" asset('js/file-manager.js') "></script>

我收到此错误：

[vuex] 未知突变类型：fm/settings/manualSettings [vuex] 未知突变类型：fm/settings/initAxiosSettings [vuex] 未知动作类型：fm/initializeApp

为什么会这样？我需要以不同的方式包含它吗？

【参考方案1】：

您需要导入并注册存储模块：

import Vue from 'vue';
import Vuex from 'vuex';
import FileManager from './file-manager/FileManager.vue';
import fm from './file-manager/store';  // Import modules

Vue.use(Vuex);

// create Vuex store, if you don't have it
const store = new Vuex.Store(modules: fm);  // Register modules

Vue.use(FileManager, store);

Vue.component('file-manager', FileManager);

const app = new Vue(
    store,
    el: '#app'
);

---

说明

file-manager 组件期望全局存储中存在一系列操作和突变。在典型的用法中，比如通过npm 模块，this 入口文件中定义的这些动作和突变被注册在存储here 中，如自述文件中所述。由于您尝试手动注册 file-manager 组件而不是通过入口点文件注册它，因此您还需要显式注册模块。

是的，作为替代解决方案，您可以改为从入口点文件 init.js 导入并将其用作插件，以便它隐式注册模块和组件：

import Vue from 'vue';
import Vuex from 'vuex';
import FileManager from './file-manager/init';  // Note 'init'

Vue.use(Vuex);

// create Vuex store, if you don't have it
const store = new Vuex.Store();

Vue.use(FileManager, store);  // Registers the file-manager component too

const app = new Vue(
    store,
    el: '#app'
);