Home Tech Frontend Vue

# Vue-Cli 自定義全局功能的方法

# 坑坑難填坑坑填

Vue.js 是近期越來越火紅的一套前端框架。

他揉合了前輩 Angular.js 、 React.js 的優點，並且改進了各方的缺點。簡易的 Vue.js 只需要 import 一行 cdn 即可開始使用。然而大型專案，然而在大型專案中，輕巧的 Vue.js 稍嫌不足。因此有了模組化概念的 - Vue-Cli 。

在 Vue-Cli 中，有了模組的概念，也因此有了許多的規則。例如以前只要隨意寫個 *.js 再直接用 <script src="*.js"/> 便可以全局使用裡面定義的 function 。 然而到了 Vue-Cli 這也變得不管用。就連要如何全局使用自己定義的功能都有自己的一套規則。

因此，本文將紀錄幾種客製化自定義模組，並且掛載到 Vue-Cli 的方法。

# 一、直接掛載 prototype

網路上有許多解決全局引用的方法，其中最簡單的方式為直接將方法掛載到 Vue 的 prototype 上。

在 main.js 中：

Vue.prototype.method = function () {}

之後在想使用的 Component 中即可直接使用…

this.method()

# 二、自製 Vue Plugin

  • 首先，定義全局的 pluginUtil.js Vue.js 的 plugin 必須有一個公開的 method ： install 。這個 method 的第一個參數是 Vue 的 constructor ，第二個參數是一個可選的 option 。
export default {
    install (Vue, options) {
        // Vue 的 plugin 有四種方式可以創建，稍後會詳細提及。
    }
}
  • 於 main.js 裡使用 (use)
import pluginsUtil from './pluginsUtil'
Vue.use(pluginsUtil)import pluginsUtil from './pluginsUtil'
Vue.use(pluginsUtil)
  • 於想使用的 Component 中直接使用。
  • Done!

接下來，以下將詳細講解創建 Vue Component 的四個方法：

  • Vue.mixin 方式（註冊全局的混合對象）
Vue.mixin({
    data () {
        return {
            customMethod: 'some value1：mixindata中的值(string, array, function, object...)',
        }
    }
})
  • Vue.prototype 方式（定義 Vue prototype 上的 attribute） 就像第一種方法，只是打包起來。比較沒這麼暴力。
Vue.prototype.someValue2 = 'someValue2：Vue.prototype上的值'
Vue.prototype.testFuction = function () {
    let dateNew = new Date()
    return dateNew;
}
  • Vue.filter 方式（定義全局的過濾器）
Vue.filter('customFilter', function (cnt) {
    return custom_filter_condition();
});
  • Vue.directive 方式（定義全局自定義的指令）
Vue.directive('myfocus', {
    // 將綁定的當前元素插入至 DOM 中。
    inserted: function (el) {
        el.focus();
    }
});

# 結論

最後，統整詳細作法大致如下：

export default {
    install (Vue, options) {
        // 第一種方法
        Vue.mixin({
            data () {
                return {
                    customMethod: 'some value1：mixindata中的值(string, array, function, object...)',
                }
            }
        })
        // 第二種方法
        Vue.prototype.someValue2 = 'someValue2：Vue.prototype上的值'
        Vue.prototype.testFuction = function () {
            let dateNew = new Date()
            return dateNew;
        }
        // 第三種方法
        Vue.filter('customFilter', function (cnt) {
            return custom_filter_condition();
        });
        // 第四種方法
        Vue.directive('myfocus', {
            // 將綁定的當前元素插入至 DOM 中。
            inserted: function (el) {
                el.focus();
            }
        });
    }
}

Like z20240z's work