Laravel에서 vue-filemanager 프런트엔드를 커스터마이즈하는 방법

Laravel에서 vue-filemanager 프런트엔드를 커스터마이즈하는 방법

저는 미리 다운로드된 js 파일과 함께 제공되는 https://github.com/alexusmai/laravel-file-manager 패키지를 사용하고 있습니다.또는 https://github.com/alexusmai/vue-laravel-file-manager에서 npm을 통해 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/초기화앱.

왜 이렇게 될까요?다른 방법으로 포함시킬 필요가 있나요?

스토어 모듈을 Import 및 등록해야 합니다.

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모듈, 이 진입점 파일에 정의된 동작 및 돌연변이는 Readme에 설명된 대로 여기 저장소에 등록됩니다.수동으로 등록하려고 하기 때문에file-manager컴포넌트는 엔트리 포인트파일에 등록되지 않고 모듈을 명시적으로 등록해야 합니다.

네, 대신 엔트리 포인트파일 init.js에서 Import하여 플러그인으로 사용하면 모듈 및 컴포넌트를 암묵적으로 등록할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/67089068/how-to-customize-vue-filemanager-frontend-in-laravel