基于vue如何发布一个npm包的方法步骤

发布一个基于 vue 的 npm 包的步骤，可以分为以下几个步骤：

1. 初始化 npm 包

npm init

按照提示依次输入各个信息，最后生成 package.json 文件。

2. 创建 vue 组件

这里以一个 Button 组件为例：

<template>
  <button :class="classObject"><slot></slot></button>
</template>

<script>
export default {
  name: 'Button',
  props: {
    type: {
      type: String,
      default: 'default'
    },
    size: {
      type: String,
      default: 'medium'
    }
  },
  computed: {
    classObject() {
      return {
        'button': true,
        [`is-${this.type}`]: true,
        [`is-${this.size}`]: true
      }
    }
  }
}
</script>

<style lang="scss">
.button {
  border-radius: 4px;
  padding: 10px 20px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.3s;
  &.is-default {
    color: #fff;
    background-color: #409EFF;
  }
  &.is-primary {
    color: #fff;
    background-color: #67C23A;
  }
  &.is-info {
    color: #fff;
    background-color: #909399;
  }
  &.is-danger {
    color: #fff;
    background-color: #F56C6C;
  }
  &.is-medium {
    font-size: 16px;
  }
  &.is-small {
    font-size: 14px;
  }
}
</style>

3. 编写打包配置

在根目录下创建 rollup.config.js 文件，用于配置打包规则：

import vue from 'rollup-plugin-vue';
import babel from 'rollup-plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.js',
  output: [{
    file: 'dist/button.js',
    format: 'cjs'
  }, {
    file: 'dist/button.esm.js',
    format: 'es'
  }],
  plugins: [
    vue(),
    babel({
      exclude: 'node_modules/**'
    }),
    commonjs(),
    resolve()
  ]
};

4. 创建入口文件

在根目录下创建 src/index.js 文件，用于打包入口：

import Button from './Button.vue';

export default Button;

5. 打包构建

npm install rollup -D
npm install rollup-plugin-vue rollup-plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve -D
npm run build

6. 发布到 npm

首先需要在 npm 官网注册账号。

登录 npm npm login
发布到 npm npm publish

至此，发布基于 vue 的 npm 包已经完成。

示例1

以 vp-button 组件为例：

初始化 npm 包

bash npm init

创建 vue 组件

按照 Button 组件的方式创建 src/Button.vue 文件和 src/index.js 文件。

编写打包配置

再次创建 rollup.config.js 和配置文件一样。

打包构建

bash npm install rollup -D npm install rollup-plugin-vue rollup-plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve -D npm run build

发布到 npm

bash npm login npm publish

完成！

示例2

以 vp-switch 组件为例：

初始化 npm 包

bash npm init

创建 vue 组件

创建 src/Switch.vue 文件和 src/index.js 文件。

编写打包配置

再次创建 rollup.config.js 和配置文件一样。

```js
import vue from 'rollup-plugin-vue';
import babel from 'rollup-plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';

export default {
input: 'src/index.js',
output: [{
file: 'dist/switch.js',
format: 'cjs'
}, {
file: 'dist/switch.esm.js',
format: 'es'
}],
plugins: [
vue({
css: true,
compileTemplate: true
}),
babel({
exclude: 'node_modules/**'
}),
commonjs(),
resolve()
]
};
```

打包构建

bash npm install rollup -D npm install rollup-plugin-vue rollup-plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve -D npm install vue-template-compiler -D npm run build

发布到 npm