随着Vue的流行，我们现在更喜欢使用插件化的方式来组件化我们的Vue组件。Vue插件是一个Vue模块，可以在Vue应用程序中重复使用。插件可以是一个有状态的组件、一组无状态的组件或一些可以提供全局方法的API。当我们安装一个插件时，它会在Vue实例中注入额外的选项，使其可在整个组件树中访问。这使我们更容易地将一些通用的功能和逻辑进行封装并重复使用。

// 一个简单的 Vuex 插件例子
export default function myPlugin(Vue, options) {
// 创建 store 的时候把插件中的 `myPluginStoreOption` 合并进去
options = Object.assign(options, {
myPluginStoreOption: 'someValue',
})
// 注入组件
Vue.mixin({
beforeCreate() {
// 检查插件是否已经注入 Vue。
if (!this.$store) {
throw new Error('请先安装 Vuex。')
}
// 检查插件是否已经注入 Store。
if (!this.$options.myPluginStoreOption) {
throw new Error('请先安装插件。')
}
// 设置常量
this.$const = { MY_CONSTANT: 'my constant value' }
// 设置变量
this.$myVariable = options.myPluginStoreOption
}
})
}

在上面的代码中，我们创建了一个名为"myPlugin"的插件，并在Vue实例中注入了一些选项。我们可以通过调用Vue.use(myPlugin)来安装这个插件。这样，我们就能够在项目中的任何组件中使用这个插件提供的逻辑和功能，而不用重复写一堆代码。

除了在Vue实例中注入选项之外，插件还可以提供一些全局API。例如，我们可以创建一个全局方法来显示一个弹出框：

// 弹出框插件
export default {
install(Vue, options) {
Vue.prototype.$alert = (message) =>{
alert(message)
}
}
}

在安装了这个插件之后，我们就可以在任何组件中使用这个全局方法。

export default {
methods: {
showAlert() {
this.$alert('Hello, World!')
}
}
}

插件化组件是Vue中非常有用的一点，它使我们能够轻松地将通用逻辑和功能封装起来，并在整个Vue应用程序中重复使用它们。当我们需要在插件中注入选项、提供全局API或者在应用程序中引入其他Vue模块时，这是一个非常有用的技术。