工具類方法定義

不可避免的每個專案都會抽出很多資料處理的公共方法，統籌到工具類檔案中，vue在定義工具類方法和傳統方法一樣，只是用了es6的export default匯出，示例如下：

export default{
  alertTip (str) {
    alert(str)
  }
  method1 () {

  }
  method2 () {

  }
  ...
}

設定為全域性屬性

原始的呼叫方法直接在入口檔案引入工具類檔案就可以使用了，Vue同樣是這樣的思路，先引入，再設定為全域性變數去呼叫，在main.js中加入如下程式碼：

import utils from
 
 './utils/index.js'
Vue.prototype.$utils = utils

當然你不想定義屬性$utils，只想呼叫方法，只想在用到的地方引入使用，這個也是可以的，上一節 Vue2專案架構搭建（六）——axios呼叫介面、webpack代理跨域配置 中設定axios為全域性屬性沒提為什麼不單獨使用，單獨使用的話每次呼叫的地方都要匯入一次axios，工具類也是相同。

設定為全域性屬性是為了便捷，少做點重複的事，也可以根據屬性名更明白程式碼的用途，比如 $http一看就明白是調介面的。

工具類方法呼叫

例如上述定義的alertTip ()方法，在secondVue元件上的元素上繫結點選事件為alertTip ()

<template>
  <div v-on:click="$utils.alertTip(123)">this is a second Vue component</div>
</template>

<script></script>

<style></style>

點選secondVue的div就會彈出“123”了

本人才疏學淺，如果哪位小夥伴發現問題或者有更好的優化，希望能留言我好及時修改和優化，大家一起學習一起進步，免得被不合理或者錯誤的東西誤導後續看到此博文的小夥伴。