vue2封装自定义插件并上传npm发布及使用-一、单个插件发布

例如在/src/packages/test123/index.vue目录文件中开发需要发布的插件。
package.json文件配置(只列出了用到的配置,其他配置此处省略了)

{
  "name": "test123", // 插件名称
  "version": "1.0.0", // 版本号
  "private": false, // 是否私有
  "main": "dist/test123.umd.min.js", // 插件发布的文件入口
  "style": "dist/test123.css",
  "scripts": {
    "lib": "vue-cli-service build --target lib --name test123 ./src/packages/test123/index.vue"
  	// vue-cli-service build --target lib --name 构建后的文件名称 需要构建文件的地址
  }

执行命令:npm run lib
注:每次执行后dist文件会生成test123.umd.min.js(用test123.umd.js文件也可以)、test123.css这两个需要用到的文件(在package.json文件中与main、style属性值相对应),还会生成一个demo.html可以看一下具体引入及使用方法。

发布命令:npm publish(发布前请先查阅文章末尾的特别注意)
注:关于npm发包和版本等其他命令可参考文章 https://blog.****.net/Dalin0929/article/details/143861235

项目应用:
安装依赖:npm i test123 --save
页面使用:

<template>
	<test123></test123>
</template>
<script>
    import test123 from 'test123/dist/test123.umd.js';
    import 'test123/dist/test123.css';
    export default {
        components: { test123 }
    }
</script>
上一篇:在Excel中处理不规范的日期格式数据并判断格式是否正确


下一篇:虚拟机上搭建达梦DSC简略步骤