vue的插件一般用来添加全局性的功能，具体可分为：

添加全局方法或者属性；

添加全局资源（指令、过滤器等）；

通过全局 mixin 方法添加一些组件选项；

在 Vue.prototype 上 添加 Vue 实例方法；

创建一个库，提供自己的 API，同时提供上面提到的一个或多个功能；

添加全局方法或者属性；添加全局资源（指令、过滤器等）；通过全局 mixin 方法添加一些组件选项；在 Vue.prototype 上 添加 Vue 实例方法；创建一个库，提供自己的 API，同时提供上面提到的一个或多个功能；
一般来说我们在项目中倾向于第五种方式，可以通过创建一个js文件包含我们需要添加的多种全局性功能，指令、过滤器、实例方法之类的。这样的一个插件的构建也不难，主要就是使用vue提供的install 方法，传入Vue构造器以及你所能用到的参数对象；添加对应的功能，export出去，在需要的地方引入并Vue.use()方法注册即可；具体使用参考vue官网插件部分——开发插件。
这一次我的项目中需要添加‘反爬'功能，具体实现就是后端在检测到用户触发‘反爬'规则后返回指定错误码以及对应的验证页面，前端在全局请求中监测该错误码，在检测到错误码后通过插件加载验证页面让用户去验证，并将验证结果反馈给后端，在后端收到验证结果后移除验证页面。
需求确定后，我们就知道这个插件需要做的事情就是创建一个vue组件实例=>加载后端返回的页面=>解析并执行其中的js文件=>注册验证成功的全局回调函数。具体操作如下：
const antiReptilian = {
install(Vue, options) {

Vue.$antirept = checkText => {

if (!checkText) return;

let wrapperTemp = Vue.extend({

// 1、创建构造器，定义模板

template:

'
'

});

let antiObj = new wrapperTemp().$mount().$el; // 2、创建实例

antiObj.innerHTML = checkText;

initScripts(antiObj);//3、解析并顺序执行js

let App = document.getElementById('app');

let wrapper = document.getElementById('antiReptWrapper');

if (wrapper) {

return;

}

App.appendChild(antiObj); // 4、把创建的实例添加到App中

window.checkSucceed = res => {

// 5、验证通过后移除实例

App.removeChild(antiObj);

window.location.reload();

};

};
}
};
const antiReptilian = {
install(Vue, options) {

Vue.$antirept = checkText => {

if (!checkText) return;

let wrapperTemp = Vue.extend({

// 1、创建构造器，定义模板

template:

'
'

});

let antiObj = new wrapperTemp().$mount().$el; // 2、创建实例

antiObj.innerHTML = checkText;

initScripts(antiObj);//3、解析并顺序执行js

let App = document.getElementById('app');

let wrapper = document.getElementById('antiReptWrapper');

if (wrapper) {

return;

}

App.appendChild(antiObj); // 4、把创建的实例添加到App中

window.checkSucceed = res => {

// 5、验证通过后移除实例

App.removeChild(antiObj);

window.location.reload();

};

};
}
};
需要注意的是通过设置innerHTML 的方式加载验证页面会导致内部的js文件不执行；因此我们还必须将验证页面的的js文件提取出来再重新插入，并且还要保证内部多个js文件的执行顺序，具体代码如下：
//重新引入js文件
const initScripts = function(cont) {
let oldScripts = cont.getElementsByTagName('script');
let newScripts = [];
for (let i = 0; i < oldScripts.length; i++) {//提取内部js文件

let newScript = document.createElement('script');

newScript.type = 'text/javascript';

newScript.innerHTML = oldScripts[i].innerHTML;

if (oldScripts[i].src) {

newScript.src = oldScripts[i].src;

}

newScripts.push(newScript);
}
while (oldScripts.length !== 0) {

cont.removeChild(oldScripts[0]);//移除之前的js文件
}
for (let i = 0; i < newScripts.length; i++) {

if (i == 0) {

cont.appendChild(newScripts[i]);

} else {//保证每个js文件按照之前的顺序执行

newScripts[i - 1].onload = newScripts[

i - 1

].onreadystatechange = function(event) {

cont.appendChild(newScripts[i]);

};

}
}
};
//重新引入js文件
const initScripts = function(cont) {
let oldScripts = cont.getElementsByTagName('script');
let newScripts = [];
for (let i = 0; i < oldScripts.length; i++) {//提取内部js文件

let newScript = document.createElement('script');

newScript.type = 'text/javascript';

newScript.innerHTML = oldScripts[i].innerHTML;

if (oldScripts[i].src) {

newScript.src = oldScripts[i].src;

}

newScripts.push(newScript);
}
while (oldScripts.length !== 0) {

cont.removeChild(oldScripts[0]);//移除之前的js文件
}
for (let i = 0; i < newScripts.length; i++) {

if (i == 0) {

cont.appendChild(newScripts[i]);

} else {//保证每个js文件按照之前的顺序执行

newScripts[i - 1].onload = newScripts[

i - 1

].onreadystatechange = function(event) {

cont.appendChild(newScripts[i]);

};

}
}
};
到此为止这个简单的插件功能就完成了，在需要的地方引入、注册并调用Vue.$antirept()方法传入要加载的页面即可；
将写好的插件生成npm包的方法也简单，分为以下几步：1、前往npm官网注册一个npm账号=>【npm官网】;2、将写好的插件生成一个简单的npm包：

创建一个空文件夹，名称即为你的npm包的名称，注意名称不要与现有的npm包重复；

切到该文件夹下，输入‘npm init'命令生成一个package.json文件，内部信息自定义；

将写好的插件js文件拷到该文件夹下，重命名为index.js；

在根目录下创建README.md文件，添加关于包的介绍信息（非必需）；


创建一个空文件夹，名称即为你的npm包的名称，注意名称不要与现有的npm包重复；切到该文件夹下，输入‘npm init'命令生成一个package.json文件，内部信息自定义；将写好的插件js文件拷到该文件夹下，重命名为index.js；在根目录下创建README.md文件，添加关于包的介绍信息（非必需）；

3、发布创建好的包：
1. 若第一次发布包，执行‘ npm adduser'命令，输入前面注册好的npm账号，密码和邮箱；
2. 若不是第一次发布包，执行‘ npm login'命令进行登录，同样输入npm账号，密码和邮箱；
3.
登录成功以后，在刚才的文件夹下，执行‘npm publish'命令，即可发布该npm包；
4.
若要更新之前的包，只需要更改版本号，再执行‘npm publish'命令即可；
1. 若第一次发布包，执行‘ npm adduser'命令，输入前面注册好的npm账号，密码和邮箱；
2. 若不是第一次发布包，执行‘ npm login'命令进行登录，同样输入npm账号，密码和邮箱；
3.
登录成功以后，在刚才的文件夹下，执行‘npm publish'命令，即可发布该npm包；
4.
若要更新之前的包，只需要更改版本号，再执行‘npm publish'命令即可；
至此一个简单的vue插件就生成了一个npm包了，以后使用就不需要加载js文件，可以直接通过npm的方式引入了，其它的小伙伴也可以一起愉快的玩耍了==>全剧终。以上就是如何构建一个Vue插件并生成npm包的详细内容，关于vue生成npm包的资料请关注其它相关文章！