一、定義變數，並全域性使用

原理：
1. 單獨新建一個全域性變數模組檔案，模組中定義一些變數初始狀態，用export default 暴露出去。
2. 在main.js中引入，並通過Vue.prototype掛載到vue例項上面。供其他模組檔案使用；
3. 或者直接引入到需要的模組檔案中使用；

專案目錄

步驟1、新建 global_variable.js檔案，用於存放變數，示例如下：

const baseURL = 'www.baidu.com'
const token = '123456'
const userSite = '林花落了春紅，太匆匆'
 


export default {
  baseURL,
  token,
  userSite
}

• 方法1：在需要使用的模組檔案中使用（區域性引用），示例如下

• 方法2：全域性使用，示例如下：

1、將global_variable.js檔案引入main.js檔案，並使用Vue.prototype掛在至vue例項上，示例如下：

2、在需要使用的模組檔案中使用(無需引入，直接通過this使用)，示例如下：

二、定義函式，並全域性使用

原理：

新建一個模組檔案，然後在main.js裡面通過Vue.prototype將函式掛載到Vue例項上面，通過this.輸出的函式名，來執行函式。

• 方法1. 在main.js裡面直接寫函式

簡單的函式可以直接在main.js裡面直接寫，示例如下：

• 方法2. 新建一個模組檔案，掛載到main.js上面

專案目錄如下

1、global_func.js檔案中程式碼示例如下：

// param為傳入引數
function packageFunc (param) {
  alert(param)
}

export default {
  // Vue.js的外掛應當有一個公開方法 install。這個方法的第一個引數是 Vue 構造器，第二個引數是一個可選的選項物件。
  install: function (Vue)
 
 {
    Vue.prototype.global_func = (param) => packageFunc(param)
  }
}

2、main.js檔案中程式碼示例如下：

3、在需要呼叫的模組檔案中使用this.輸出的函式名，呼叫，程式碼示例如下：

end！~