如何写vue3的插件并上传npm【非常简单】

最新推荐文章于 2024-04-18 09:58:31 发布

星花月

最新推荐文章于 2024-04-18 09:58:31 发布

阅读量1.1k

点赞数

分类专栏： vue 文章标签： npm vue.js javascript

本文链接：https://blog.csdn.net/weixin_43130350/article/details/122097272

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近想要做一些vue的插件练一下手，于是现在需要解决的问题有两个。一个是怎么写vue的插件，一个是写完后怎么上传npm。

一、如何写一个vue插件

首先在进行插件创作的时候，先建立一个普通的vue项目进行编写。

vue create vue-button-z

然后创建plugins文件夹，和plugins下的lib文件夹，在lib文件夹下写你的插件代码
在这里插入图片描述

1.插件代码编写

这是button.vue 文件示例，就像写普通vue组件一样，根据你的需求写

// button.vue
<template>
  <button :style="style">
    <slot>button</slot>
  </button>
</template>
<script>
export default {
  name: 'ta-button', //你的组件名称，使用此名称全局挂载
  props: {
    type: {
      type: String,
      default: 'primary',
    },
    size: {
      type: String,
      default: 'default',
    },
  },
  setup(props) {
    const Colors = {
      primary: '#477bec',
      warning: '#ffc400',
      danger: '#ff7300',
      info: '#cfcfcf',
    }
    const Sizes = {
      small: '2px 10px',
      default: '6px 14px',
      large: '8px 20px',
    }
    console.log('size:', props.size, 'type:', props.type)
    const style = {
      backgroundColor: Colors[props.type],
      padding: Sizes[props.size],
      color: '#fff',
      fontSize: '14px',
      borderRadius: '4px',
    }
    return { style }
  },
}
</script>
<style scoped>
button {
  border: none;
  outline: none;
}
</style>

2.plugins/index.js文件的编写

插件的代码写完后，对index.js进行编写

import TaButton from './button/button.vue'

export default {
  install: (app) => {
  	//挂载全局变量或方法
    app.config.globalProperties.$hello = 'hello! Think for using my plugin'
    //全局挂载组件
    app.component(TaButton.name, TaButton)
    //使用依赖注入
    app.privide('age','18')
    //自定义指令
    //app.directive('my-directive', {
    //  mounted (el, binding, vnode, oldVnode) {
        // some logic ...
    //  }
    //})
  }
}

到此为止，关于插件编写的部分就结束了，还差一步就能发布了，那就是测试。

3.简单测试代码

在main.js文件中引入自己的插件

import { createApp } from "vue";
import App from "./App.vue";
import MyPlugin from './plugins'
//MyPlugin 就是我们编写的插件
createApp(App).use(MyPlugin).mount("#app");

尝试使用

<template>
  <ta-button type="danger" size="small"> small </ta-button>
  <ta-button type="primary"> default </ta-button>
  <ta-button type="warning" size="large"> large </ta-button>
</template>

成功运行
在这里插入图片描述

我们已经可以准备发布自己精心编写的程序到npm上供别人使用了。

二、发布npm

另起一个空白的文件夹，只放如下文件
在这里插入图片描述
然后编写README.md文件，这个就不示例了。
重要的是编写package.json 文件，示例如下

{
  "name": "vue-button-tang", //你的包的名称
  "version": "0.0.1",  //版本
  "description": "vue plugins", //详细的描述
  "main": "index.js", //入口文件
  "directories": {  //源码地址
    "lib":"lib"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "vue3"
  ],
  "author": "tinytang", //作者
  "license": "ISC"
}