封装vue组件发布到npm（详细步骤）

准备工作

1.注册npm账号：https://www.npmjs.com/

2.保证当前环境下安装了 vue、webpack、node

创建组件项目

//  完整配置模板
vue init webpack 项目名称

//  更简洁的webapck配置模板
vue init webpack-simple 项目名称

如果是封装组件建议用第二个

我们就来创建一个button作为例子

创建完成后安装依赖

npm install

启动项目

npm run dev

创建组件

我们在src 目录下创建lib 文件夹用于存放不同的组件，且在为每个组件创建一个文件夹，在该文件夹目录下存放要发布的组件和index.js 用于将组件导出

button.vue

<template>
    <button><slot></slot></button>
</template>
 
<script>
export default {
    name: "osuuButton"
}
</script>
 
<style scoped>
 
</style>

同级的index.js是为了将其导出

//  osuuButton 是对应组件的名字，要记得在 button.vue 文件中还是 name 属性哦
import osuuButton from './button.vue';
osuuButton.install = Vue => Vue.component(osuuButton.name, osuuButton);
export default osuuButton;

如有其它多个组件则重复上面的步骤都放在lib文件夹下

导出全部组件

在src目录下创建index.js 作为程序的入口文件，在index.js 将所有的组件全部导出

import osuuButton from './lib/button/index';
// ...如果还有的话继续添加
 
const components = [
    osuuButton,
  // ...如果还有的话继续添加
]
 
const install = function (Vue, opts = {}) {
  components.map(component => {
    Vue.component(component.name, component);
  })
}

/* 支持使用标签的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}
 
export default {
  install,
  osuuButton
  // ...如果还有的话继续添加
}

说明：在注册组件的时候，如果有加以下这段自动注册的代码，那么在用npm install安装依赖的时候，该插件就会被自动安装，如果没有加以下自动安装代码，那么使用npm install新增的依赖并不会自动安装，需要手动安装缺少的依赖。

if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}

修改webpack.config.js

配置package.json

name: 包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。
version: 版本号，每次发布至 npm 需要修改版本号，不能和历史版本号相同。
description: 描述。
main: 入口文件，该字段需指向我们最终编译后的包文件。
keywords：关键字，希望用户最终搜索的词，为数组。
author：作者
private：是否私有，需要修改为 false 才能发布到 npm
license：开源协议以下为参考设置
repository：存储代码的地址
homepage：官网

添加 .npmignore

我们发布到 npm 中，只有编译后的 lib 目录、package.json、README.md才是需要被发布的。所以我们需要设置忽略目录和文件。和 .gitignore 的语法一样，具体需要提交什么文件，看各自的实际情况。

如果没有此文件将会直接取用.gitignore 文件，因此一般情况无需添加.npmignore

将dist文件夹取消忽略，也就是删除图中红框哪一行

打包

npm run build

发布

//  npm 登录
npm login

//  发布
npm publish

使用

打开新的项目，安装我们的组件

npm i osuu-button

在main.js导入

import osuu from 'osuu-buttons'
Vue.use(osuu);

//  这里的osuu自定义就行无需和组件名称一样

页面使用

<template>
  <div>
    <osuuButton>测试按钮</osuuButton>
    <!-- 
      如果是多个组件，只需要用src/index.js内注册的组件名称即可直接使用
      因为我们在抛出的时候已经注册过了
     -->
  </div>
</template>

npm常用操作

npm config set registry https://registry.npm.taobao.org //设置淘宝镜像
npm config set registry https://registry.npmjs.org //设置官方镜像
npm config get registry //获取镜像地址
npm --force unpublish safe_manage_view //删除npm包
npm login //npm 登录
npm publish //npm 发布包
npm install --save hzm-npm-test //安装包