如何开发 Vue 插件？

最新推荐文章于 2025-06-01 09:01:21 发布

小菜101

最新推荐文章于 2025-06-01 09:01:21 发布

阅读量191

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js 前端 vue插件

本文链接：https://blog.youkuaiyun.com/github_36091081/article/details/120889913

vue 专栏收录该内容

13 篇文章

订阅专栏

本文档详细介绍了如何在Vue项目中创建一个名为`CreateButton`的自定义组件，包括组件的模板、样式和脚本部分。然后，通过在`install`方法中注册该组件，使其成为全局可用的插件。在`main.js`中使用`Vue.use()`导入并注册插件，最后在`App.vue`中测试使用了这个自定义按钮组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建一个插件(组件)

目录结构：在src目录下创建一个plugins目录，写我们的button组件

// src/plugins/button/src/index.vue
<template>
    <button class="create-btn primary">
        <span>
            <slot></slot>
        </span>
    </button>
</template>

<script>
    export default {
        name: 'CreateButton'
    }
</script>

<style scoped>

.create-btn {
    display: inline-block;
    line-height: 1;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: 0.1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
}

.primary {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
}

</style>

2、给该插件添加一个install方法

install方法里编写相关的注册逻辑，比如：把该插件注册为全局组件，这样就可以在整个项目中使用了。

// src/plugins/button/index.js
import CreateButton from './src/index'

// 给CreateButton对象添加intall方法
CreateButton.install = function(Vue) {
    // 给Vue注册名为'CreateButton'全局组件
    Vue.component(CreateButton.name, CreateButton)
}

// 导出该对象
export default CreateButton

3、在实例化Vue前，使用Vue.use(插件) 注册你的插件。

使用Vue.use,传入CreateButton即完成注册，它的作用是调用传入CreateButton对象的install方法

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import CreateButton from './plugins/button/index.js' // 导入插件

// 使用Vue.use,传入CreateButton即完成注册
// 它的作用是调用传入CreateButton对象的install方法
Vue.use(CreateButton)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

4、测试使用

// App.vue
<template>
  <div id="app">
    <Create-Button>按钮</Create-Button>
  </div>
</template>

效果：

参考文章