Vue使用技巧，编写一个插件

介绍

插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。

编写一个插件:

试着写一个过滤器插件。在src目录下新建:plugins/filter.js。直接下如下代码:

export default {
    install: (app) => { 
        app.config.globalProperties.filter = (url) => {
            // 如果url有'http'就返回url
            if (url && url.startsWith('http')) { 
                return url
            } else { 
                // 没有'http'就返回拼接完整的url
                return `http://xiaosong${url}`
            }
        }
    }
}

插件需要安装函数install(), install函数中的app.config.globalProperties作用是添加一个全局可用的实例或者方法，这里就是添加了一个全局的filter方法。

在需要使用的组件中:

<img :src="filter(item.goodsCoverImg)" alt="">