How to use the vue.mixin function in vue

// 全局的进度条，在组件中可通过 $loading 访问
const loading = (Vue.prototype.$loading = new Vue(ProgressBar).$mount())

Vue.use(VueBus)

const { app, router, store } = createApp()

if (window.__INITIAL_STATE__) {
    store.replaceState(window.__INITIAL_STATE__)
    store.$api = store.state.$api = api
}

document.body.appendChild(loading.$el)
FastClick.attach(document.body)

Vue.mixin({
    // 当复用的路由组件参数发生变化时，例如/detail/1 => /detail/2
    /*
    beforeRouteUpdate(to, from, next) {
        // asyncData方法中包含异步数据请求
        const asyncData = this.$options.asyncData
        if (asyncData) {
            loading.start()
            asyncData
                .call(this, {
                    store: this.$store,
                    route: to,
                    isServer: false,
                    isClient: true,
                })
                .then(() => {
                    loading.finish()

// 注册插件
Vue.use(Vuetify)
Vue.use(VueLazyLoad, {
  preLoad: 1.3,
  error: 'static/images/404.png',
  loading: 'static/images/loading-spin.svg',
  attempt: 1
})
Vue.use(VueI18n)
Vue.use(Cascader)
Vue.use(DatePicker)
Vue.use(Upload)

// 全局混入
Vue.mixin(mixin)

// 设置语言项
const i18n = new VueI18n({
  locale: 'zh',
  messages: {
    'en': LangEn,
    'zh': LangZhCHS
  }
})

// 注册指令&&过滤器&&公有方法
Object.keys(directives).forEach(k => Vue.directive(k, directives[k]))
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]))
Object.keys(methods).forEach(k => { Vue.prototype[k] = methods[k] })

// 动态路由

import MixInJQuery from './vue/mixins/jquery'
import MixInTools from './vue/mixins/tools'
import focus from './vue/directives/focus'
import nl2br from './vue/filters/nl2br'
import autosizeTextarea from './vue/essentials/autosize-textarea.vue'

Vue.directive(focus);

Vue.filter('nl2br', nl2br);

Vue.use(VueResource);
Vue.use(VueI18n);

Vue.mixin(MixInUser);
Vue.mixin(MixInJQuery);
Vue.mixin(MixInTools);

Vue.component('autosize-textarea', autosizeTextarea)

Vue.http.headers.common['X-CSRF-TOKEN'] = window.Someline.csrfToken;
// Vue.http.headers.common['Authorization'] = 'Bearer ' + window.Someline.jwtToken;
// Vue.http.headers.common['Accept'] = 'application/x.someline.v1+json';

Vue.http.interceptors.push((request, next) => {

    // modify request
    request.headers.Authorization = 'Bearer ' + window.Someline.jwtToken;
    request.url += "?" + new Date().getTime();

    // continue to next interceptor
    next((response) => {

Vue.component(kebabCase('svg-' + svgName), svgComponents[svgName])
}

// Register global directives on the top level
for (const directiveName in directives) {
	Vue.directive(camelCase(directiveName), directives[directiveName])
}

// Register global filters on the top level
for (const filterName in filters) {
	Vue.filter(camelCase(filterName), filters[filterName])
}

// Register global mixins on the top level
for (const mixinName in mixins) {
	Vue.mixin(mixins[mixinName])
}



const options = {
	el: '#app',
	router,
	store: vuex,
	template: ''
}

// Everything that's bootstrapped
export {
	Vue,
	options
}

it('should work for a constructor mixin', () => {
    const spy = jasmine.createSpy('global mixin')
    const Mixin = Vue.extend({
      created () {
        spy(this.$options.myOption)
      }
    })

    Vue.mixin(Mixin)

    new Vue({
      myOption: 'hello'
    })
    expect(spy).toHaveBeenCalledWith('hello')
  })

import Vue from 'vue';
import TranslationHelper from '../../../Modules/Core/Assets/js/mixins/TranslationHelper';

Vue.mixin(TranslationHelper);

import Vue from 'vue';
import Expire from './Expire';
import M from '../Messages';

Vue.config.productionTip = false;
Vue.config.devtools = false;

Vue.mixin({
  computed: {
    M() {
      return M;
    }
  }
});

new Vue({
  render: h => h(Expire)
}).$mount('#app');

import scrollHandler from './helpers/scroll-handler'

Vue.config.productionTip = false

Vue.component(ClientOnly.name, ClientOnly)
Vue.component(Layout.name, Layout)
Vue.component(SaberLink.name, SaberLink)

Vue.use(Meta, {
  keyName: 'head',
  attribute: 'data-saber-head',
  ssrAttribute: 'data-saber-ssr',
  tagIDKeyName: 'vmid'
})

Vue.mixin({
  beforeCreate() {
    this.$saber = this.$root
  }
})

export default context => {
  const router = createRouter()

  let customHead
  let customRootComponent

  const rootOptions = {
    mixins: [],
    head() {
      const head =
        typeof customHead === 'function'

require('./bootstrap');

import Vue from 'vue';

import { InertiaApp } from '@inertiajs/inertia-vue';
import { InertiaForm } from 'laravel-jetstream';
import PortalVue from 'portal-vue';

Vue.mixin({ methods: { route } });
Vue.use(InertiaApp);
Vue.use(InertiaForm);
Vue.use(PortalVue);

const app = document.getElementById('app');

new Vue({
    render: (h) =>
        h(InertiaApp, {
            props: {
                initialPage: JSON.parse(app.dataset.page),
                resolveComponent: (name) => require(`./Pages/${name}`).default,
            },
        }),
}).$mount(app);