Vue插件从封装到发布的完整步骤记录

当想要向其他开发者分享自己开发的 Vue 插件时，把它发布成独立的插件包是一种非常好的方式。下面是 Vue 插件从封装到发布的完整步骤记录：

步骤一：创建插件

1. 创建一个项目文件夹，并在这个文件夹里利用 npm init 命令创建一个包描述文件（package.json）。

npm init

1. 安装 Vue 及编写插件代码：在项目文件夹内，使用 npm install vue --save 命令安装 Vue，然后编写插件代码。插件代码主要包含：插件的函数或类、插件的帮助方法或辅助函数和插件的默认选项。

npm install vue --save

1. 导出插件代码：完成编写后，把插件代码导出。

import Vue from 'vue'

// 定义插件类
class MyPlugin {
  static install(Vue, options) {
    // code
  }
}

// 安装插件
Vue.use(MyPlugin)

步骤二：创建注册文件

1. 创建 index.js 注册文件，并引入插件代码。

import MyPlugin from './MyPlugin.js'

const plugin = {
  install(Vue, options) {
    Vue.myPlugin = new MyPlugin(options);
    Vue.prototype.$myPlugin = Vue.myPlugin;
  }
};

export default plugin;

步骤三：编写打包脚本

1. 安装webpack及其他build依赖。

npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env --save-dev

1. 配置webpack.config.js文件：

const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
    libraryTarget: 'umd',
    libraryExport: 'default',
    library: 'MyPlugin',
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }]
  }
};

1. 配置npm脚本(package.json)：

"scripts": {
  "build": "webpack --mode production",
}

步骤四：发布插件到npm

1. 创建一个账号。
   如果没有 npm 账号的话，可以在官网注册。

npm adduser

1. 给项目取一个名字并上传代码：在终端中进入插件项目文件夹，然后执行 npm publish 命令，并在参数中指定你的插件名。

npm publish --access public

这个命令会自动把你的插件代码和 package.json 文件上传至 npm 服务器。如果一切顺利，你的第一个 Vue 插件就已经成功发布到 npm 上啦！

示例

以下是一个非常简单的 Vue 插件示例，主要功能是给 HTML 元素添加一个旋转 CSS 类。

import Vue from 'vue';

// 定义插件类
class Spin {
  constructor(el){
    this.el = el;
    this.addClass = this.addClass.bind(this)
  }

  addClass(){
    this.el.classList.add('spin')
  }
}

// 暴露 Vue 插件
const VueSpin = {
  install(Vue, options) {
    Vue.prototype.$spin = function(el){
      const instance = new Spin(el);
      instance.addClass();
    };
  }
};
export default VueSpin;

这是对插件编写的核心代码，这个 Vue 插件生成一个 Spin 类，当插件安装成功后，在 Vue 原型上挂载 $spin 方法。因此，在我们需要旋转一个元素的时候，在组件的方法中调用该方法就可以了。

<template>
  <div class="example" ref="box"></div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    addSpin(){
      this.$spin(this.$refs.box)
    }
  },
  mounted(){
    this.addSpin()
  }
};
</script>