vue2封装自定义插件并上传npm发布及使用

一、单个插件发布

例如在/src/packages/test123/index.vue目录文件中开发需要发布的插件。

package.json文件配置（只列出了用到的配置，其他配置此处省略了）

javascript 复制代码

{
  "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.csdn.net/Dalin0929/article/details/143861235

项目应用：

安装依赖：npm i test123 --save

页面使用：

javascript 复制代码

<template>
	<test123></test123>
</template>
<script>
    import test123 from 'test123/dist/test123.umd.js';
    import 'test123/dist/test123.css';
    export default {
        components: { test123 }
    }
</script>

二、多个插件批量发布

例如在/src/packages文件下创建多个.vue文件，并在/src/packages/index.js文件中批量注册：

javascript 复制代码

import test123 from './test123/index.vue';
import test456 from './test456/index.vue';
const myCompList = [test123, test456];
// 批量注册组件
const install = function (Vue) {
    myCompList.forEach(comp => {
        Vue.component(comp.name, comp);
    })
}
export default install;

package.json文件配置

javascript 复制代码

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

执行命令：npm run lib

注：每次执行后dist文件会生成my-plugins.umd.min.js（用my-plugins.umd.js文件也可以）、my-plugins.css这两个需要用到的文件（在package.json文件中与main、style属性值相对应），还会生成一个demo.html可以看一下具体引入及使用方法。

发布命令：npm publish （发布前请先查阅文章末尾的特别注意）

注：关于npm发包和版本等其他命令可参考文章 https://blog.csdn.net/Dalin0929/article/details/143861235

项目应用：

安装依赖：npm i my-plugins --save

main.js文件

javascript 复制代码

import Vue from 'vue'
import myPlugins from 'my-plugins/dist/my-plugins.umd.js';
import 'my-plugins/dist/my-plugins.css';
Vue.use(myPlugins);

页面使用：(不需要再单独引入插件test123、test456）

javascript 复制代码

<template>
	<test123></test123>
	<test456></test456>
</template>

三、特别注意

在发布之前需要在根目录下创建.npmignore文件（与dist、src平级），避免将不必要的文件一起发布上去（防止源码或其他代码泄露），文件内容如下：

javascript 复制代码

# 忽略所有日志文件
*.log
 
# 忽略 node_modules、src、public 下的所有文件和目录
node_modules/**/*
src/**/*
public/**/*

# 忽略除了 package.json 和 README.md 之外的文件
!package.json
!README.md

# 忽略所有的 .env 文件，除了 .production.env
.env
!.production.env