Vueのmixin全体の使い方を詳しく説明します。


まず公式の定義を貼ります。
個人的にはグローバルmixinはすべてのVueファイルにいくつかの共通の実例を追加することだと思います。
使用シーン:通貨単位、時間書式。これらは使っているページで使うとコードが多く重複しますので、全体的にこれらの例を混ぜるとコード量が減り、メンテナンス性も高いです。
ex:
Step 1:mixin.jsを先に定義します。

const mixin = {
 methods: {
  /**
   *      
   * @param {string|number|object|Array} dateTime -   ,        、   、       、Date    ******       
   * @param {string} [fmt] -   
   * @returns {string}            ,    :2018 1 11  15:00
   * @see [momentjs]{@tutorial http://momentjs.cn/}
   */
  formatDate (dateTime, fmt = 'YYYY M DD  HH:mm:ss') {
   if (!dateTime) {
    return ''
   }
   moment.locale('zh-CN')
   dateTime = moment(dateTime).format(fmt)
   return dateTime
  }
 }
}export defaullt mixin
Step 2:main.jsファイルの中にあります。

import mixin from './mixin'
Vue.mixin(mixin)
全体的に混入しました。mixinはsがありません。
Step 3:あなたのvueファイルの中でmixinで定義されているものを使ってもいいです。
 

data() {
  return {
   userName: "  ",
   time: this.formatDate(new Date()),
   arr: [1,2,3,4,5,'  '],
   result: []
  }
 }
このvueファイルのデータソースdataの中のtimeは引用して混入する方法です。
mixinsの中の方法を使います。
ルートの設定

// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
 mode:'history',
 routes: [
  {
   path:'/',
   redirect:'/index'
  },
  {
   path: '/about',
   name: 'About',
   component:resolve => require(['@/pages/About'],resolve)
  },
  {
   path: '/index',
   name: 'Index',
   component:resolve => require(['@/pages/Index'],resolve)
  },
  {
   path: '/product',
   name: 'Product',
   component:resolve => require(['@/pages/Product'],resolve)
  }
 ]
})
ページの呼び出しはmixinsの中のloadPage方法です。

<p @click="loadPage('Index')">Index</p>
Indexページは以下の通りです

// src/pages/Index
<template>
 <div>
  <p>  index  </p>
  <p @click="loadPage('Index')">Index</p>
  <p @click="loadPage('About')">About</p>
  <p @click="loadPage('Product')">Product</p>
 </div>
</template>
<script>
 export default{

 }
</script>
<style>

</style> 
これで大局的に混入して完成し、気になる読者も局部混入を試みることができます。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。