在项目中我们会使用到很多npm包，工作时间一长，多多少少会有些技术积累，把一些实用性很高的插件单独作为一个项目开源分享出去，然后打包成npm方便大家使用以及方便自己的维护（项目级）。
直接放结果
vue-pdf-touch
https://github.com/iMaldway/vue-pdf-touchvue-pdf-touch包https://www.npmjs.com/package/vue-pdf-touch
注册你的npm账号
这里推荐直接去npm官网注册
1.打开官网
2.点击Sign Up
3.进行人机校验
4.进行注册
按照表单要求填写相关资料就可以啦
登录你的npm账号
注意这里指的登录npm账号是指在你的电脑上登录，在你的项目目录打开控制台、命令行、终端其中之一输入以下命令：
npm login?执行命令之后它会让你输入：
Username:
Password:
Email: (this IS public)这里的信息都是你注册的信息，邮箱填写之后回车，会让你继续填写个邮箱验证码：
npm notice Please check your email for a one-time password (OTP)
Enter one-time password from your authenticator app: 把收到的验证码填写就好啦，登录成功后控制台输出
Logged in as imaldway on https://registry.npmjs.org/.注意如果你使用的是淘宝镜像源将在npm login阶段报错，请更换为官方源
npm config set registry https://registry.npmjs.org/构建一个专门的项目以供发布更新
1.使用手脚建或者vue ui构建一个空的项目
2.移除不需要的文件，如：components/HelloWorld.vue、assets/logo.png
3.将你的插件按照以往的方式放入src下的文件夹中，没有自己手动创建（src下想放哪就放哪），你的插件中name属性必须存在
4.同级目录新建index.js
components下的VuePdfTouch文件夹就是我的插件
5.在index.js文件中写入
// 注意这里的 VuePdfTouch 替换成你自己的插件，路径不能使用@
import VuePdfTouch from "./VuePdfTouch/index.vue";
// 如果你最终导出的插件还需要依赖其他插件初始化，那么在这个文件中一并导入。没有就删掉。
import VueTouch from 'vue-touch'
const components = [VuePdfTouch];
// Vue.use 注册为全局组件时必须提供一个install方法。
const install = function (Vue) {
// 初始化依赖。没有就可以删掉
Vue.use(VueTouch, {name: 'v-touch'});
components.forEach((component) => {
Vue.component(component.name, component);
});
};
// 原生script tag引入方式
if (typeof window !== "undefined" && window.Vue) {
install(window.Vue);
}
export default {
install,
VuePdfTouch,
};
?请注意，不要使用@，因为你的主项目配置了@，则会按照主项目配置的路径查找，这里采用./表示当前文件夹。
在这个项目中测试
1.将App.vue直接修改为你的插件展示页面，以供自己测试吧
2.修改main.js
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
// 将VuePdfTouch替换成你的插件名字，路径按照你的实际路径调整。
import VuePdfTouch from './components/index.js'
Vue.use(VuePdfTouch);
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})好啦，到此你可以跑起项目看看效果是否符合预期。
修改package.json
{
"name": "你的包的名字", /** 你的包的名字 */
"version": "1.0.4", /** 包的版本号，每次发布之前必须调整 */
"description": "包简介", /** 你的包的简介 */
"author": "作者", /** 你的包的作者 */
"private": false, /** 必须为false，发布为公共的别人才能用到 */
"main": "src/components/index.js", /** 指向你的导出插件的index.js文件路径 */
"files": [
"src/components/" /** 需要被发布的内容，缩减体积，无关紧要的不需要发布出去 */
],
"keywords": [ /** 你的包的关键字 */
"vue",
"pdf",
"touch"
],
"repository": { /** 你的包的源码托管地址 */
"type": "git",
"url": "git+https://github.com/iMaldway/vue-pdf-touch.git"
},
"bugs": {
"url": "https://github.com/iMaldway/vue-pdf-touch/issues" /** 你的包的bug地址 */
},
"homepage": "https://github.com/iMaldway/vue-pdf-touch#readme", /** 你的包的官网/说明 */
"dependencies": { /** 你的包的依赖 */
"vue": "^2.5.2",
"vue-pdf": "^4.2.0",
"vue-touch": "^2.0.0-beta.4",
"node-sass": "4.14.1",
"sass": "^1.27.0",
"sass-loader": "^7.0.2"
},
}
其中/**? */ 包裹的需要特别注意，请不要直接覆盖，而应该逐个属性替换
至此已经完成所有的准备工作了
上传包/撤销包/废弃包
1.上传包命令
npm publish运行效果如下
?2.删除/取消包命令
npm unpublish <pkg>[@<version>]3.废弃包命令
npm deprecate <pkg>[@<version>] <message>
