vue-loading插件开发+npm部署

微信扫一扫,分享到朋友圈

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"
}
}
复制代码

如果出现这个页面,就说明上传成功了。哈哈哈哈如果你能出现的话?其中也有几个坑点:我们需要这样做:

到这里,我们还需要验证一下,从另外一项目引入自己发的插件(不要从刚刚那个项目引入),看看能不能成功。当然我是没有遇到问题,所以还是验证一下为好的。

微信扫一扫,分享到朋友圈

vue-loading插件开发+npm部署

Python|快速掌握Python爬虫XPath语法

上一篇

Feature Engineering for Election Result Prediction (Python)

下一篇

你也可能喜欢

vue-loading插件开发+npm部署

长按储存图像,分享给朋友