vue组件封装到发布到npm，实现一个属于自己的组件

1.介绍

本文主要整理从开发到发布的流程，组件功能就不做介绍了

平时学习工作如果有好的想法，好的组件，好的功能，想要和他人分享或者自己保留。提价到仓库是一个办法但是总是不够便捷的，如果想直接安装使用可以选择发布到npm，今天就举例看看发布的流程！

2.项目搭建

我们以vue的组件封装滑块组件为例
1.目录结构

2.在components中正常开发组件，并且创建index.js来作为最后的入口文件

index.js 主要导出一个对象，包含install方法，在使用vue.use()时传入，会默认执行install方法，并且将vue作为参数传入，我们在此方法中将组件引入，并且注册为全局组件。

--index.js--

import SingleSlider from './SingleSlider'
const install = function (Vue) {
    // 将组件进行挂载
    Vue.component('SingleSlider',SingleSlider)
}
if(typeof window !== 'undefined' && window.Vue){
    window.Vue.use(SingleSlider);
} //这里是当没有使用模块化开发时 用来挂载组件的
export default {
    install
}

3.配置packge.json ，新增打包的脚本，和入口文件的路径。

{
  "name": "z-slider-vue",
  "version": "0.2.1",
  "private": false,
  "main": "dist/z-slider-vue.umd.min.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lib": "vue-cli-service build --target lib --inline-vue --entry ./src/components/index.js "
  }
}

3.1）main属性主要使用在引用或者开发某个依赖包的时候需要此属性的支持，不然工程中无法用import导入依赖包，对应的文件就是默认引入的打包后的文件

3.2） 新增lib脚本中

.1） —> entry 参数就是入口文件的路径，这里入口文件为我们写有install方法的index.js

（当使用一个 .vue 文件作为入口时，你的库会直接暴露这个 Vue 组件本身，因为组件始终是默认导出的内容。）

.2） —> target 参数为 lib 打包成一个库

.3） —> inline-vue
在库模式中vue是外置的，就是不会被打包进去，如果这个库会通过一个打包器使用，它将尝试通过打包器以依赖的方式加载
Vue；否则就会回退到一个全局的 Vue 变量。要避免此行为，可以在build命令中添加–inline-vue标志。

3.4 新建.npmignore文件，配置忽略上传到npm的文件

//指定目录
src/
public/
node_modules/
//指定文件
vue.config.js
babel.config.js
*.map

4.执行命令进行打包

4.1) 然后执行npm run lib 就可以打包 到dist目录下，文件名默认packge.json的name字段的值

5.进行npm发布

1.首先注册npm npm 注册地址
2.一定要进行邮箱验证 否则后续可能会报错
3.命令行执行 npm login
接下来按顺序输入 用户名、密码、邮箱
4.源一定要设置为

   npm config set registry=http://registry.npmjs.org

5.执行npm publish 进行发布
6.发布成功后可以再设置为淘宝镜像

  npm config?set?registry=https://registry.npm.taobao.org/

注意事项，首先发布的包名一定要全网唯一，其次每次更新时记得修改packge.json的版本号。 更新版本后记得重新打包

然后就可以进行安装使用了
1.执行 npm install z-slider-vue -S 安装
2.在vue项目的入口文件中引入

import Slider from 'z-slider-vue'
import '../node_modules/z-slider-vue/dist/z-slider-vue.css'
Vue.use(Slider)

3.使用组件即可

<single-slider @onChange="onChangeSingle"/>