vue-loading插件开发+npm部署

简介

作为一个开发萌新，一直秉承着轮子的搬运工，时而感叹着搬运真爽原则，哈哈哈哈，见笑了各位。但是，摸着良心说，我内心对那些开发插件的大牛，有着一颗赤诚的敬畏之心。很羡慕他们有能力能造福大家，省去了大部分开发的时间。

所以我决定也要学习着开发一个属于自己的插件，并且发布到npm可以造福大家哈哈哈哈哈，虽然我是个萌新，但是我会努力的。

插件功能概述

功能：实现一个loading加载功能。同时用户可以自定义样式大小以及文字。

介绍：此版本为第一个版本，而且主要以发布流程流程为主。所以只封装了三个loading组件。在以后的版本中，会增加许多种类。大家有什么好的建议也可以提供给我，让我多多改进。

组件1：环形loading

  <ys-load-ring text='loading':isShow='true'></ys-load-ring>

参数：

参数	描述	类型
background	背景颜色	String
radius	圆圈的半径	String
color	文字颜色	String
isShow	显示与隐藏	Boolean
text	文字内容	String

展示：

组件2：条纹加载

<ys-load-wave :isShow='true'></ys-load-wave>

参数		描述	类型
isShow		显示与隐藏	Boolean

组件3：闪烁小球加载

 <ys-load-bobble :isShow='true'

参数		描述	类型
isShow		显示与隐藏	Boolean
radius		圆圈的半径	String

小结：再检查组件功能无误的话，我们就可以进行部署操作了。

部署准备工作

a.理解vue插件工作原理

我们都知道插件是通过Vue.use()引入的，那么其工作原理到底是什么呢？先了解一下这个api.
参数：

{Object | Function} plugin

用法：

安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

该方法需要在调用 new Vue() 之前被调用。

当 install 方法被同一个插件多次调用，插件将只会被安装一次。

b.编写install方法：

思路：我们知道会执行install函数，所以在install函数里，我们就开始全局注册组件，并且install函数第一参数默认是Vue:

import YsLoadRing from './YSLoadRing'
import YsLoadBobble from './YSLoadBobble'
import YsLoadWave from './YSLoadWave'
import Vue from 'vue'

const components = {
  YsLoadRing,
  YsLoadBobble,
  YsLoadWave

}
function install () {
  Object.keys(components).forEach(name => {
    Vue.component(name, components[name])
  })
}
export default { install }

导入所有组件，在install函数里进行全局注册，然后在把这个函数导出。所以，这个文件便是插件的入口文件。

c.配置package.json文件

{
  "name": "load-vue",   //项目名称
  "version": "0.0.1",   //版本号 每次发布必须要不一样哦
  "private": false,     //是否隐私
  "main": "./src/components/Load/index.js",     //入口文件一定要是刚刚写的那个Js文件
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "vue": "^2.6.11",
    "vue-router": "^3.1.6"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.3.0",
    "@vue/cli-plugin-eslint": "^4.3.0",
    "@vue/cli-plugin-router": "^4.3.0",
    "@vue/cli-service": "^4.3.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "vue-template-compiler": "^2.6.11"
  }
}