自定义vue组件发布到npm的方法

首先，创建一个Vue组件库需要进行如下几个步骤：

步骤一：创建Vue组件项目

使用Vue CLI创建一个新的Vue项目:

# 全局安装 Vue CLI
npm install -g @vue/cli

# 创建一个Vue项目
vue create my-vue-components

之后按照提示选择预设项目配置即可。

步骤二：编写Vue组件

在src/components目录下编写自己的Vue组件，例如我们创建了一个非常简单的Button组件：

<template>
  <button :class="classes" @click="handleClick"><slot></slot></button>
</template>

<script>
  export default {
    name: 'MyButton',
    props: {
      type: {
        type: String,
        default: 'default'
      },
      size: {
        type: String,
        default: 'normal'
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      classes() {
        return `my-button my-button-${this.type} my-button-${this.size} ${this.disabled ? 'my-button-disabled' : ''}`
      }
    },
    methods: {
      handleClick() {
        this.$emit('click')
      }
    }
  }
</script>

<style scoped>
  .my-button {
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
  }

  .my-button-default {
    background-color: #fff;
    color: #333;
  }

  .my-button-primary {
    background-color: #409EFF;
    color: #fff;
  }

  .my-button-normal {
    font-size: 14px;
  }

  .my-button-small {
    font-size: 12px;
  }

  .my-button-disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }
</style>

步骤三：配置组件打包输出

我们借助rollup来将单个组件打包成一个文件，把这个打包后的文件发布到npm仓库中。

首先，在项目根目录新增文件rollup.config.js，用来配置rollup打包的方式：

import vue from 'rollup-plugin-vue'
import commonjs from 'rollup-plugin-commonjs'
import resolve from 'rollup-plugin-node-resolve'
import babel from 'rollup-plugin-babel'
import { terser } from 'rollup-plugin-terser'

export default {
  input: 'src/components/index.js',
  output: [
    {
      file: 'dist/my-vue-components.common.js',
      format: 'cjs',
      exports: 'named'
    },
    {
      file: 'dist/my-vue-components.esm.js',
      format: 'esm'
    },
    {
      file: 'dist/my-vue-components.min.js',
      format: 'iife',
      name: 'MyVueComponents',
      plugins: [terser()]
    }
  ],
  plugins: [
    vue(),
    commonjs(),
    resolve(),
    babel({
      exclude: 'node_modules/**'
    })
  ],
  external: ['vue'],
  watch: {
    include: 'src/**'
  }
}

然后在package.json中新增打包命令：

{
  "scripts": {
    "build": "rollup -c"
  }
}

步骤四：配置打包入口文件

在项目根目录新增文件src/components/index.js，该文件用于导出Vue组件：

import MyButton from './MyButton.vue'

export {
  MyButton
}

步骤五：配置打包忽略项

在package.json中新增以下忽略项，表示在打包Vue组件库时，不需要将Vue源码一起打包：

{
  "files": [
    "dist/*",
    "src/*",
    "!src/**/*.vue"
  ]
}

步骤五：打包组件库

npm run build

步骤六：发布组件库

发布前需要先进行登录:

npm login

然后执行发布命令:

npm publish

以上步骤就是将自定义Vue组件库发布到npm的完整攻略，下面给出两个示例说明：

示例1：发布组件库

按照以上步骤，我们成功创建了my-vue-components组件库，现在我们将其发布到npm仓库，首先，创建一个npm账号（如果已有账号，可跳过此步骤)，然后登录npm：

npm login

依次输入账号名、密码、邮箱即可登录。接着，在项目根目录执行以下命令即可发布组件库到npm仓库：

npm publish

此时，我们的组件库就已经发布到了npm仓库上，其他人可以使用以下命令安装该组件库:

npm install my-vue-components

示例2：在Vue项目中使用

假设我们需要在一个新的Vue项目中使用my-vue-components组件库。首先，使用以下命令安装组件库：

npm install my-vue-components

然后，在Vue项目中的main.js中加入以下代码：

import Vue from 'vue'
import App from './App.vue'
import { MyButton } from 'my-vue-components'

Vue.config.productionTip = false

Vue.component(MyButton.name, MyButton)

new Vue({
  render: h => h(App),
}).$mount('#app')

此时，我们就可以在Vue项目中使用my-vue-components组件库中的组件了。例如，在App.vue中使用my-button组件：

<template>
  <div class="container">
    <my-button>原始按钮</my-button>
    <my-button type="primary" @click="handleClick">主要按钮</my-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('点击了主要按钮')
    }
  }
}
</script>

以上就是两个示例说明，希望能对您有所帮助。