vue封装自定义组件，打包发布到npm上使用

1.在项目的src目录下新建一个目录（components）用来存放所有自定义组件源码

2.组件封装好后在sr下新建一个index.js文件，为组件库的入口文件

 
// 导入封装的组件
import xxBtn from './xx-btn.vue'
 
const components = {
  // 通过install来安装组件
  install(Vue) {
    Vue.component(
      'xxBtn', xxBtn
    )
  }
}
 
// 注意这里的判断，很重要
if(typeof windwo !== 'undefined' && window.Vue) {
  window.Vue.use(comment)
}
 
// 导出组件库
export default components

3.修改package.json文件

 
{
  "name": "xx", // 发布的模块名称，发布线上后，可以通过npm install xx来引用该模块，一般Vue组件以vue-开头
  "description": "test npm", // 组件库描述
  "version": "1.0.0", // 版本号
  "author": "xxx", // 作者
  "license": "MIT", // 代码授权许可
  "private": false, // 公开项目，因为组件包是公用的，所以private要改为false
  
  "scripts": { // 运行命令
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  
  "main": "dist/xx-btn.min.js", // 打包后的入口文件，若不配置，则在其他项目中就无法使用import xx from '包名'来引入组件，只能以包名作为起点来指定相对路径
  
  "keywords": [ // 关键词，可以通过npm搜索你填写的关键词找到你的模块
    "xx-btn",
    "components"
  ],
  
  "files": [ // 指定打包后发布到npm的文件，没指定则不传，package.json是默认上传的
    "dist",
    "src/components"
  ],
 
  
  "homepage": "https://xx.github.io/xx/xx-btn/dist/index.html", // 项目官网的url
  
  "bugs": { // 填写一个bug提交地址或者一个邮箱，被你的模块坑到的人可以通过这里吐槽
    "url": "https://github.com/xx/xx-btn/issues"
  },
  
  "repository": { // 指定代码所在的仓库地址
    "type": "git",
    "url": "https://github.com/xx/xx-btn.git"
  },
  
  ...
}

4.编译打包，生成的文件在dist目录下

npm run build

5.测试插件

npm pack

npm pack 之后，会在当前目录下生成一个 xx-1.0.0.tgz 的文件。

打开一个vue项目，将压缩文件放到项目某个目录下，执行命令

npm install 路径\xx-1.0.0.tgz

路径是指压缩包所在的绝对路径，文件名必须是压缩包的全名

6.安装好插件后，在项目的入口文件main.js里引入使用

import xxBtn from 'xx-btn'
 
Vue.use(xxBtn)

之后就可以在项目的任意组件中引用就行了，如果引入成功，则说明打包成功，接下来就是发布到npm上了

7.发布npm

1、先到NPM官网注册账号，如果已有账号则跳过此步骤

2、在组件库项目的根目录下执行 

npm login

登陆账号，输入你的账号和密码，并验证邮箱地址，登陆成功后则可以发布到NPM网站了

3、更新版本号

npm version patch

这是把版本迭代一级，每次更新时都需要输入这个命令，或者直接在package.json中修改版本号，只要与npm上的版本不同就行

4、发布到npm官网

npm publish --access public

出现如下,表是安装成功,去npm官网就能看的自己发布的相关信息