1.前言
npm（node包管理器）是前端开发必不可少的工具，无论是在初建vue工程，还是从git仓库拉取下来的前端工程，我们都需要项目下终端输入npm install或者npm install xxx安装项目依赖。npm install xxx实际上就是从npm服务器下载指定资源包到本地项目的node_moudles文件夹下。在开发过程中，我们经常会封装一些通用的组件，方法在项目多个不同的地方复用。比如，最近我在开发过程中，需要用一个基于vue的文件比对插件，但发现市面上的文本比对插件都不太满足我们项目的需求，就寻思着可以自己开发一款文件比对插件，然后发布到npm服务器。那么如何发布一款npm包呢？
2.环境准备
2.1 搭建一个vue脚手架项目：vue create MyPluginComponent
2.2 运行项目：npm run serve
3.发布包组件封装
3.1 新建一个与src同级的packages文件夹，用于存放封装组件的源码
3.2 在packages新建一个index.js作为入口文件
3.3 新建一个components用于存放vue组件 如图所示是项目目录结构及组件源码
index.ts里的代码是重点，必须使用Vue提供的install方法，这个方法会在你使用Vue.use(plugin)时被调用，这样使得我们的插件注册到了全局，在子组件的任何地方都可以使用。
4.本地组件测试
开发完的组件现在本地测试是否有问题，如图所示是在本地项目里面做测试引用的代码
main.ts里面引入packages里的入口文件，然后使用vue.use()
如图所示是组件的运行图效果：
4.组件打包
这里我们要对指定文件进行打包，因此要去packages.json修改配置
打包命令解释：
- –target lib 打包后的文件夹的名称
- –name 打包后的文件名字
- –dest 指定打包的目录 左侧目录下的lib就是我们运行npm npm lib之后的出现的包
5.发布到npm
如上图所示，我们配置好name(发布出去的包名，不能有大写)，version版本，private私有关闭，main(别人引用包的入口文件)，files（需要把哪些代码发布到npm上去，这里只需要lib下面的文件）
-
注册账户 想要发布到npm仓库，就必须要有一个账号，先去npm官网注册一个账号，注意记住用户名、密码和邮箱，发布的时候可能会用到。
-
设置npm源
可能本地的npm镜像源采用的是淘宝镜像源或者其它的，如果想要发布npm包，我们得吧我们得npm源 切换为官方得源，命令如下： npm config set registry=registry.npmjs.org
-
登录用户
npm login这里会让你填写用户名等等，如果之前设置过即可跳过此步。
-
发布npm
npm run pub
"lib": "vue-cli-service build --target lib --name testCom --dest lib ./packages/index.ts",
"pub": "npm version patch && npm publish"
上面两条命令都是我们可以自定义的 下图是npm服务上发布成功的包截图
从npm安装包
现在我们可以在任意一个其他的vue项目下npm install lq-test-viewer安装该依赖使用
