本文介紹如何在vue中定義插件，註冊插件和使用插件

插件目錄

/src/plugins

插件入口文件

/src/plugins/index.js

import cache from './cache'
import modal from './modal'
// 安裝預設插件,在main.js中引入，通過Vue.use()使用它,因為index.js里使用export default導出，所有在main.js里導入時可以不用加{}，直接import plugins from "~/plugins";
export default {
  install(Vue) {
    // 緩存對象
    Vue.prototype.$cache = cache
    // 模態框對象，在vue頁面中使用this.$modal.xxx()調用
    Vue.prototype.$modal = modal
  }
}

註冊全局插件

/src/main.js

import plugins from "~/plugins";
Vue.use(plugins)

vue文件中使用插件

註意在其它js中還是需要手動引用插件的，這個main.js中的註冊，只有vue文件有效.

<el-button @click="alertTest">全局插件</el-button>
<script>
export default {
    methods: {
        alertTest() {
            this.$modal.confirm("不用在vue顯示引用plugins/modal.js，它通過在plugins/index.js中引用，在main.js中註冊，已經是全局的了");
        }
    }
}
</script>

註冊全局方法

• 還是在上面的/src/main.js中進行添加prototype的定義
• 從插件中引入一個方法addDateRange import { addDateRange } from "@/utils/ruoyi";
• 在prototype中添加原型擴展方法Vue.prototype.addDateRange = addDateRange
• 下麵我們可以在view中直接使用這個addDateRange方法了，而不需要再import引入它了。

作者：倉儲大叔，張占嶺，
榮譽：微軟MVP
QQ：853066980

支付寶掃一掃，為大叔打賞!