前言

在工作中，不管是用Vue还是React，或者其他的一些脚手架项目的时候，都会使用第三方插件，我们通常的做法就是

npm install <packageName>

npm install 命令用来安装模块到node_module目录中，然后我们在项目中引用就可以了。

那我们今天就来自己封装组件，上传Github并进行npm包发布，可以在以后的项目中方便快捷的使用。

我以vue框架为例进行一个简单的demo封装，从无到有走一遍。

创建VUE项目

1、安装node（过程省略）

2、安装vue-cli

npm install -g vue-cli

验证vue是否安装成功, 命令: vue -V

3、初始化vue 项目

vue-cli工具是内置了模板包括 webpack

vue init webpack  my-plugin

配置相关信息：

完成后会生成刚才命名的文件夹：

cd my-plgin		//进入项目
npm install 		//安装相关依赖
npm run dev		//启动项目

启动完成后，打开浏览器，输入http://localhost:8080，会看到如下图，说明启动成功了：

编写插件

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

1. 添加全局方法或者 property。如：vue-custom-element
2. 添加全局资源：指令/过滤器/过渡等。如 vue-touch
3. 通过全局混入来添加一些组件选项。如 vue-router
4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
  
   //5. 注册组件
    Vue.component(组件名, 组件)
}

我们这次选择用Vue.component做一个简单的toast提示功能，下图是目录结构：

在插件位置写我们的具体代码，在test.js先写一个基础壳子：

index.js中代码：

待插件开发好后，就可以在mian.js中这样使用：

在页面中使用插件：

插件的壳子有了，下面就开始开发toast.vue，写插件的具体内容：

<template>
  <div>
    <div class="toast"  ref='toastPosition' :class="{active: toastHidden}">
      <div class="toast-warpper">
        {{text}}
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'test-toast',
  data () {
    return {
      text: '', //提示内容
      toastHidden: false    //隐藏or展示
    }
  },
  methods: {
    toastPlugin (msg, time) {
          this.text = msg
          this.toastHidden = true
          setTimeout(() => {
            this.toastHidden = false
          }, time)
    }
  }
}
</script>
 
<style>
  .toast {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0px;
    min-height: 0px;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    color: #fff;
    transition: all 0.5s;
    z-index: -1;
    opacity: 0;
  }
 .toast.active {
    width: 150px;
    min-height: 25px;
    opacity: 1;
    z-index: 11;
    animation: upDown .7s linear ;
  }
  @keyframes upDown{
    0%{ top: 0;}
    50%{ top: 50%;}
    70%{ top: 40%;}
    100%{ top: 50%;}
 }
</style>

实现效果如下：

点击按钮，出现下面的toast弹框，3s后消失。至此，我们的插件就开发完了。

现在可以发布到GitHub或打包发布到npm上去。

上传到GitHub

1.对项目进行打包,使用npm run build打包，打包后打开根目录下的dist文件夹，里面有一个index.html文件，打开运行，结果是白屏

原因：路径不对，这里需要修改打包路径，在项目的config --->index.js里面修改build对象的assetsPublicPath

2.打包后上传到GitHub上

gitHub申请和创建仓库这里就不多说了，不清楚的自行百度。

由于vue-cli的默认配置，设置了git忽略监控我们打包后的dist文件夹，所以这里需要取消忽略，让git监控dist文件夹，不然提交远程库的时候不会提交dist文件夹：

打开根目录下的.gitignore文件，这是git的配置文件，可以在这里设置git不需要监控的文件类型。所以我们在这里把/dist/这行代码删除，这样，后面我们再git add .的时候就会监控dist文件夹了。

git init 		//把这个目录变成Git可以管理的仓库

git commit -m "XXX"	//把文件提交到仓库

//关联远程仓库
git remote add origin https://github.com/fengfan007/ffToast.git

//把本地库的所有内容推送到远程库上
git push -u origin master

接下来我们打开github上面的项目看下，刷新后看到，项目以上传到远程了，其中既有我们的源码，也有打包后的dist文件

然后访问https://fengfan007.github.io/ffToast/dist/index.html就可以看到了。

关于这个地址GitHub Pages生成我这里不做介绍了，自己百度[微笑]

至此，我们上传github的操作已经完成。

发布到npm

1、先去npm官网注册账号。

2、执行npm login命令登录我们的npm账号，输入用户名和密码（输入密码没有提示）

如果配置了淘宝镜像，先设置回npm镜像，不然会报错：

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

3、执行npm init 初始化package.json文件

关于README.md，我们可以写一个简单的markdown文档，这里就不多做介绍。

关于package.json文件，这个一开始是没有的，这是npm包的配置文件。我们要首先进入toast文件夹的位置，

然后终端运行npm init命令来初始化一个npm包配置文件，此时他会问你一些列问题来完成配置文件：

• name：包名，默认是文件夹名。但是这个名字是需要唯一的，如果你命的名字已经被使用过了，那就只能换个名字。至于怎么查看包名是否存在，你可以去npmjs官网搜索你的包名，如果没搜索到则可以使用。

• version：包的版本，默认是1.0.0， 你可以更换，例如0.1.0或2.0.1等。
• description：包的描述。主要描述你的包是用来做什么的。
• entry point：包入口文件，默认是Index.js，可以自定义。
• test command：测试命令，这个直接回车就好了，因为目前还不需要这个。
• git repository：包的git仓库地址，npm自动读取.git目录作为这一项的默认值。没使用则回车略过。
• keyword：包的关键词。该项会影响到用户怎样才能搜到你的包，可以理解为搜索引擎优化的关键词。建议关键词要能准确描述你的包，例如："vpay vue-pay vue-password password"
• author：作者。例如你的npm账号或者github账号
• license：开源协议，回车就好。

4、执行npm publish进行发布

这样就发布成功了。我们去npm官网查一下我们的包：

如果没搜索到，就等几分钟刷新下就好了。

以后就直接可以通过npm i ff-toast -g 将插件安装到我们的项目中了。

总结

1、创建项目

2、定义插件包，编写相应逻辑代码

3、本地测试

4、上传GitHub

5、上传Npm

6、npm install <packageName> 安装依赖

7、项目中应用

我这里不是在讲怎么样去封装一个组件，我是以一个简单的demo，进行一站式解决Vue插件开发，上传Github，Npm包发布整个流程。

结尾：希望小凡的每篇文章对你都有所帮助！

关注我，一起学习进步