Разделить регистрацию компонента vuejs на другой файл - PullRequest
Новая
       56

Разделить регистрацию компонента vuejs на другой файл

1 голос
/ 04 ноября 2019

Предположим, у меня есть файл app.js, в котором я регистрирую каждый компонент и вызываю его в файле лезвия laravel. Но не все компоненты необходимы для всех пользовательских ролей. Вот почему я хочу разделить мой компонент рег. в разные файлы и назовите этот файл e в зависимости от роли. мой app.js: 

import Vue from "vue";
window.Vue = Vue;

window.axios = require("axios");
window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
require("promise.prototype.finally").shim();

import { Form, HasError, AlertError } from "vform";
window.Form = Form;

Vue.component(HasError.name, HasError);
Vue.component(AlertError.name, AlertError);

Vue.component("pagination", require("laravel-vue-pagination"));


import VueCtkDateTimePicker from 'vue-ctk-date-time-picker';
import 'vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css';
Vue.component('VueCtkDateTimePicker', VueCtkDateTimePicker);

//sweet alert 2

import swal from "sweetalert2";
window.swal = swal;
const toast = swal.mixin({
    toast: true,
    position: "top-end",
    showConfirmButton: false,
    timer: 15000
});
window.toast = toast;

//vue lang

import VueInternationalization from "vue-i18n";
import Locale from "./vue-i18n-locales.generated";

Vue.use(VueInternationalization);

const lang = document.documentElement.lang.substr(0, 2);
// or however you determine your current app locale

const i18n = new VueInternationalization({
    locale: lang,
    messages: Locale
});

//vue lang end

//https://hamed-ehtesham.github.io/pretty-checkbox-vue/#installation

import PrettyCheckbox from "pretty-checkbox-vue";
Vue.use(PrettyCheckbox);

//vue autocomplete

//ckeditor

import CKEditor from "@ckeditor/ckeditor5-vue";
Vue.use(CKEditor);


/**
 * Next, we will create a fresh Vue ap
 *
 *
 * plication instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

// dash board

Vue.component(
    "dashboard-site-latest-employee-attendance-list",
    require("./components/dashboard/site/LatestEmployeeAttendanceComponent.vue")
);
Vue.component(
    "dashboard-site-latest-student-attendance-list",
    require("./components/dashboard/site/latestStudentAttendanceListComponent.vue")
);

Vue.component(
    "dashboard-site-employee-attendance-graph",
    require("./components/dashboard/site/dashboardEmployeeAttendanceGraphComponent.vue")
);
/* ====Global filter START =========================*/

Vue.filter("activeInactive", function(value) {
    if (value == 1) {
        return "Active";
    } else {
        return "Inactive";
    }
});
const app = new Vue({
    el: "#app",
    i18n,
    components: {},

    methods: {},
    mounted() {
        console.log("d" + document.documentElement.lang.substr(0, 2));
    }
});

и здесь 100+ регистрация компонента. Есть ли способ создать другой файл и запутать его?

Я имею в виду что-то вроде этого: 

  mix.js("resources/js/app.js", "public/js/vue")
.js("resources/js/administrator.js", "public/js/vue")
.js("resources/js/reseller.js", "public/js/vue")
.js("resources/js/user.js", "public/js/vue")
    .sass("resources/sass/app.scss", "public/css")

Возможно ли иметь основной файл app.js, в который импортируется общая библиотека ифильтр и new Vue{()} и компонент рег. в разных файлах? Я добавлю эти связанные JS на основе роли будут использовать страницу и компонент. Тогда пользователь не будет вынужден скачивать все js, которые ему не нужны. Теперь пользователь должен загрузить полный файл JS (6 Мб на продукт).

1 Ответ

0 голосов
/ 04 ноября 2019

Вы можете использовать состояние лезвия ларавеллы и стеки как 

@push('jsscripts')
  @if($role === 'admin')
  <script src='/js/admin.js>
  @endif
@endpush
...