vue css load,vue css3loadding插件的开发以及npm包的发布管理

插件开发的话建议使用vue-gitment脚手架开发

vue init webpack-simple vue-gitment

如果提示

bVbciLr?w=278&h=25

执行cnpm install vue-cli -g 全局安装

cnpm install vue-cli -g

在次执行上面的命令完成之后可以看到这样的目录

bVbciMr?w=297&h=344

在src下面添加component loadding.js loadding.vue

loadding.vue

export default {

props:{

theme:String

}

}

.loadding {

z-index: 1000;

}

.jie-loadding{

width:10%;

height:10%;

max-width:150px;

max-height:150px;

position: absolute;

top:50%;

left:50%;

margin-left:-50px;

margin-top:-50px;

}

.spinner {

width: 100%;

height: 100%;

background-color: #67CF22;

margin: 0 auto;

-webkit-animation: rotateplane 1.2s infinite ease-in-out;

animation: rotateplane 1.2s infinite ease-in-out;

}

@-webkit-keyframes rotateplane {

0% { -webkit-transform: perspective(120px) }

50% { -webkit-transform: perspective(120px) rotateY(180deg) }

100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }

}

@keyframes rotateplane {

0% {

transform: perspective(120px) rotateX(0deg) rotateY(0deg);

-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)

} 50% {

transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);

-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)

} 100% {

transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

}

}

/*loadding second*/

.spinner2 {

margin: 0 auto;

width: 50px;

height: 50px;

position: relative;

}

.cube1, .cube2 {

background-color: #67CF22;

width: 50%;

height: 50%;

position: absolute;

top: 0;

left: 0;

-webkit-animation: cubemove 1.8s infinite ease-in-out;

animation: cubemove 1.8s infinite ease-in-out;

}

.cube2 {

-webkit-animation-delay: -0.9s;

animation-delay: -0.9s;

}

@-webkit-keyframes cubemove {

25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }

50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }

75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }

100% { -webkit-transform: rotate(-360deg) }

}

@keyframes cubemove {

25% {

transform: translateX(42px) rotate(-90deg) scale(0.5);

-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);

} 50% {

transform: translateX(42px) translateY(42px) rotate(-179deg);

-webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);

} 50.1% {

transform: translateX(42px) translateY(42px) rotate(-180deg);

-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);

} 75% {

transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);

-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);

} 100% {

transform: rotate(-360deg);

-webkit-transform: rotate(-360deg);

}

}

/* loadding three*/

.spinner3 {

width: 100px;

height: 100px;

position: relative;

margin: 0 auto;

}

.double-bounce1, .double-bounce2 {

width: 100%;

height: 100%;

border-radius: 50%;

background-color: #67CF22;

opacity: 0.6;

position: absolute;

top: 0;

left: 0;

-webkit-animation: bounce 2.0s infinite ease-in-out;

animation: bounce 2.0s infinite ease-in-out;

}

.double-bounce2 {

-webkit-animation-delay: -1.0s;

animation-delay: -1.0s;

}

@-webkit-keyframes bounce {

0%, 100% { -webkit-transform: scale(0.0) }

50% { -webkit-transform: scale(1.0) }

}

@keyframes bounce {

0%, 100% {

transform: scale(0.0);

-webkit-transform: scale(0.0);

} 50% {

transform: scale(1.0);

-webkit-transform: scale(1.0);

}

}

/* loadding fourth*/

.spinner4 {

margin: 100px auto 0;

width: 200px;

text-align: center;

}

.spinner4 > div {

width: 50px;

height: 50px;

background-color: #67CF22;

border-radius: 100%;

display: inline-block;

-webkit-animation: bouncedelay 1.4s infinite ease-in-out;

animation: bouncedelay 1.4s infinite ease-in-out;

/* Prevent first frame from flickering when animation starts */

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

}

.spinner4 .bounce1 {

-webkit-animation-delay: -0.32s;

animation-delay: -0.32s;

}

.spinner4 .bounce2 {

-webkit-animation-delay: -0.16s;

animation-delay: -0.16s;

}

@-webkit-keyframes bouncedelay {

0%, 80%, 100% { -webkit-transform: scale(0.0) }

40% { -webkit-transform: scale(1.0) }

}

@keyframes bouncedelay {

0%, 80%, 100% {

transform: scale(0.0);

-webkit-transform: scale(0.0);

} 40% {

transform: scale(1.0);

-webkit-transform: scale(1.0);

}

}

/*loadding five*/

.spinner5 {

margin: 0 auto;

width: 60px;

height: 60px;

position: relative;

}

.container1 > div, .container2 > div, .container3 > div {

width: 20px;

height: 20px;

background-color: #67CF22;

border-radius: 100%;

position: absolute;

-webkit-animation: bouncedelay 1.2s infinite ease-in-out;

animation: bouncedelay 1.2s infinite ease-in-out;

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

}

.spinner5 .spinner-container {

position: absolute;

width: 100%;

height: 100%;

}

.container2 {

-webkit-transform: rotateZ(45deg);

transform: rotateZ(45deg);

}

.container3 {

-webkit-transform: rotateZ(90deg);

transform: rotateZ(90deg);

}

.circle1 { top: 0; left: 0; }

.circle2 { top: 0; right: 0; }

.circle3 { right: 0; bottom: 0; }

.circle4 { left: 0; bottom: 0; }

.container2 .circle1 {

-webkit-animation-delay: -1.1s;

animation-delay: -1.1s;

}

.container3 .circle1 {

-webkit-animation-delay: -1.0s;

animation-delay: -1.0s;

}

.container1 .circle2 {

-webkit-animation-delay: -0.9s;

animation-delay: -0.9s;

}

.container2 .circle2 {

-webkit-animation-delay: -0.8s;

animation-delay: -0.8s;

}

.container3 .circle2 {

-webkit-animation-delay: -0.7s;

animation-delay: -0.7s;

}

.container1 .circle3 {

-webkit-animation-delay: -0.6s;

animation-delay: -0.6s;

}

.container2 .circle3 {

-webkit-animation-delay: -0.5s;

animation-delay: -0.5s;

}

.container3 .circle3 {

-webkit-animation-delay: -0.4s;

animation-delay: -0.4s;

}

.container1 .circle4 {

-webkit-animation-delay: -0.3s;

animation-delay: -0.3s;

}

.container2 .circle4 {

-webkit-animation-delay: -0.2s;

animation-delay: -0.2s;

}

.container3 .circle4 {

-webkit-animation-delay: -0.1s;

animation-delay: -0.1s;

}

@-webkit-keyframes bouncedelay {

0%, 80%, 100% { -webkit-transform: scale(0.0) }

40% { -webkit-transform: scale(1.0) }

}

@keyframes bouncedelay {

0%, 80%, 100% {

transform: scale(0.0);

-webkit-transform: scale(0.0);

} 40% {

transform: scale(1.0);

-webkit-transform: scale(1.0);

}

}

loadding.js

import loadding from './loadding.vue'

const Loadding ={

install:function (Vue) {

Vue.component('Loadding',loadding)

}

};

// 这里的判断很重要

if (typeof window !== 'undefined' && window.Vue) {

window.Vue.use(Loadding)

}

export default Loadding

然后修改webpack.config.js文件

bVbciMY?w=780&h=399

entry：webpack打包的入口文件

output:webpack打包的出口文件里面的是一些配置

library:模块名字 这里是Loadding

libraryTarget:'umd'//写插件的时候需要umd

umdNamedDefine:true //对umd的模块命名表示负责

然后npm run build一下

emmmm这个时候出现了一坨东西 表示成功了

bVbciNj?w=280&h=88

确认没问题之后 就再次修改package.json文件

我的是这样子

{

"name": "cssloadding-jie",

"description": "A Vue.js project",

"version": "1.0.0",

"author": "Livejie <18312173568@163.com>",

"license": "MIT",

"private": false,

"main":"loadding/js/loadding.js",

"keywords": [

"vue",

"css3loadding",

"ajax loadding"

],

"scripts": {

"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",

"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"

},

"dependencies": {

"vue": "^2.5.11"

},

"browserslist": [

"> 1%",

"last 2 versions",

"not ie <= 8"

],

"devDependencies": {

"babel-core": "^6.26.0",

"babel-loader": "^7.1.2",

"babel-preset-env": "^1.6.0",

"babel-preset-stage-3": "^6.24.1",

"cross-env": "^5.0.5",

"css-loader": "^0.28.7",

"file-loader": "^1.1.4",

"vue-loader": "^13.0.5",

"vue-template-compiler": "^2.4.4",

"webpack": "^3.6.0",

"webpack-dev-server": "^2.9.1"

}

}

![图片描述][5]

name:插件的名字

description：提示

version:版本号

author:作者

main:加入main入口文件

keywords:添加关键词

然后把不要的删除掉

目录结构变成这样子

bVbciNz?w=283&h=75

然后登陆npm

npm login

输入用户名 密码 邮箱登陆

没有的话去这里注册https://www.npmjs.com/

发布

npm publish

发布成功

bVbciOo?w=451&h=122

更新的话再次publish但是需要修改下version版本

一定要修改version版本不然会报错

再次npm publish

bVbciOS?w=262&h=36

再次打开一个新的项目

npm install cssloadding-jie

main.js下

import Loadding from 'cssloadding-jie'

Vue.use(Loadding);

vue文件下使用

npm run dev 打开浏览器查看

bVbciPx?w=578&h=301

成功引入

成功发布并使用。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/571662.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

python label显示图片_python 实现在tkinter中动态显示label图片的方法

python label显示图片_python 实现在tkinter中动态显示label图片的方法

在编程中我们往往会希望能够实现这样的操作&#xff1a;点击Button&#xff0c;选择了图片&#xff0c;然后在窗口中的Label处显示选到的图片。那么这时候就需要如下代码&#xff1a;from tkinter import *from tkinter.filedialog import askopenfilenamedef choosepic():path…
阅读更多...
如何更改服务器上的数据库文件夹,如何设置数据库文件位置

如何更改服务器上的数据库文件夹,如何设置数据库文件位置

如何设置数据库文件位置08/07/2014本文内容适用于&#xff1a; Exchange Server 2007 SP3, Exchange Server 2007 SP2, Exchange Server 2007 SP1, Exchange Server 2007上一次修改主题&#xff1a; 2007-01-02本主题说明如何使用 Exchange 管理控制台或 Exchange 命令行管理程…
阅读更多...
js删除数组中指定元素_js中数组操作详解

js删除数组中指定元素_js中数组操作详解

今天给大家带来一篇有关数组操作方法的文章。新建数组方法一&#xff1a;通过new运算符创建一个数组构造函数。var arr new Array();方法二&#xff1a;通过方括号直接创建直接量数组。var arr [1,2,3];添加数组中的元素方法一&#xff1a;通过下标添加元素。var arr new Ar…
阅读更多...
控制台文字对战游戏 初始版

控制台文字对战游戏 初始版

namespace 对战游戏{ class Program { #region public struct JueSe //创建一个角色对象 { public string XingMing;//这个对象中有这些属性 public int GongJi; public int ShengMing; public int…
阅读更多...
查询链接服务器信息,如何通过 SQL Server 链接服务器和分布式查询使用 Excel

查询链接服务器信息,如何通过 SQL Server 链接服务器和分布式查询使用 Excel

作为链接服务器查询 Excel您可以使用企业管理器、系统存储过程或 SQL-DMO(分布式管理对象)将 Excel 数据源配置为 SQL Server 链接服务器。在所有的这些情况中&#xff0c;您总需要设置以下四个属性&#xff1a;链接服务器要使用的名称。连接要使用的 OLE DB 提供程序。Excel 工…
阅读更多...
python画精美图案_Python语言的魅力------完美图案

python画精美图案_Python语言的魅力------完美图案

1.画椭圆(代码如下)#!user/bin/python# -*- conding:UTF-8 -*-if __name__ __main__:from Tkinter import *canvas Canvas(width800,height600,bgpurple)canvas.pack(expandYES,fillBOTH)k 1j 1for i in range(0,26):canvas.create_oval(310 - k,250 - k,310 k,250 k,wid…
阅读更多...
批量下载，多文件压缩打包zip下载

批量下载，多文件压缩打包zip下载

0、写在前面的话图片批量下载&#xff0c;要求下载时集成为一个压缩包进行下载。从昨天下午折腾到现在&#xff0c;踩坑踩得莫名其妙&#xff0c;还是来唠唠&#xff0c;给自己留个印象的同时&#xff0c;也希望给需要用到这个方法的人带来一些帮助。1、先叨叨IO叨叨IO是因为网…
阅读更多...
选了combobox里的选项后没激发change事件_35岁前多用利弊分析，35岁后要有“安全边际”...

选了combobox里的选项后没激发change事件_35岁前多用利弊分析，35岁后要有“安全边际”...

想冒险&#xff0c;要趁早1/6、距离糟糕的事情发生&#xff0c;还有多远&#xff1f;我现在同时在职场和投资两类战线写文章&#xff0c;读者也开始串戏。前几天在我另外一个投资号上&#xff0c;有人问我&#xff1a;如果你把投资理念原则扩大到生活中&#xff0c;你觉得最有启…
阅读更多...
不连续曲线 highcharts_什么是正则曲线和正则曲面

不连续曲线 highcharts_什么是正则曲线和正则曲面

微分几何和微分流形的书上经常提到“正则曲线”和“正则曲面”。其实英文书中写作”Regular Curve“和”Regular Surface“&#xff0c;让人一眼能够了解其大意&#xff08;这也是我更偏向看英文原版书的原因&#xff09;。我就想&#xff0c;数学家为啥不翻译成”规则曲线“和…
阅读更多...
centos安装 node.js

centos安装 node.js

curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash - yum clean all yum makecache yum -y install nodejs转载于:https://www.cnblogs.com/linkenpark/p/7810238.html
阅读更多...
11.06

11.06

{% extendsdaohang.html %} {% block title %}发布问答{% endblock %} {% block head %}<link rel"stylesheet" href"{{ url_for(static,filenamecss/14.css) }}" type"text/css"> {% endblock %}{% block main %}<div class"box&…
阅读更多...
python 安卓模拟器电脑版_【夜神安卓模拟器电脑版】夜神安卓模拟器电脑版 V6.6.0.6免费版官方免费下载_正式版下载-多特软件站...

python 安卓模拟器电脑版_【夜神安卓模拟器电脑版】夜神安卓模拟器电脑版 V6.6.0.6免费版官方免费下载_正式版下载-多特软件站...

夜神安卓模拟器是目前非常流行的一款安卓模拟器&#xff0c;相比一般的模拟器它具有更好的兼容性&#xff0c;稳定性&#xff0c;系统基于Android4.4.2&#xff0c;可以更好地兼容安卓软件&#xff0c;安卓游戏&#xff0c;可以放心使用&#xff0c;软件使用非常简单。相关软件…
阅读更多...
python爬取10个网站_十个Python爬虫武器库示例，十个爬虫框架，十种实现爬虫的方法！...

python爬取10个网站_十个Python爬虫武器库示例，十个爬虫框架，十种实现爬虫的方法！...

一般比价小型的爬虫需求&#xff0c;我是直接使用requests库 bs4就解决了&#xff0c;再麻烦点就使用selenium解决js的异步 加载问题。相对比较大型的需求才使用框架&#xff0c;主要是便于管理以及扩展等。1.ScrapyScrapy是一个为了爬取网站数据&#xff0c;提取结构性数据而…
阅读更多...
[W班]第二次结对作业成绩评价

[W班]第二次结对作业成绩评价

作业地址&#xff1a; https://edu.cnblogs.com/campus/fzu/FZUSoftwareEngineering1715W/homework/1016 作业要求&#xff1a; 1、代码具有规范性。 2、实现的程序语言不做限制性要求&#xff0c;但需要能生成Windows平台的可执行文件。C/C/C#编译后即可生成&#xff0c;其他…
阅读更多...
resnet50结构_无需额外数据、Tricks、架构调整，CMU开源首个将ResNet50精度提升至80%+新方法

resnet50结构_无需额外数据、Tricks、架构调整，CMU开源首个将ResNet50精度提升至80%+新方法

本文是CMU的Zhiqiang Shen提出的一种提升标准ResNet50精度的方法&#xff0c;它应该是首个将ResNet50的Top1精度刷到80%的(无需额外数据&#xff0c;无需其他tricks&#xff0c;无需网络架构调整)。该文对于研究知识蒸馏的同学应该是有不少可参考的价值&#xff0c;尤其是里面提…
阅读更多...
msp430项目编程14

msp430项目编程14

msp430中项目---电子测重系统 1、hx711工作原理 2、电路原理说明 3、代码&#xff08;显示部分&#xff09; 4、代码&#xff08;功能实现&#xff09; 5、项目总结 msp430项目编程msp430入门学习转载于:https://www.cnblogs.com/guochaoxxl/p/7818040.html
阅读更多...
linq to sql 行转列_SQL 难题：行转列

linq to sql 行转列_SQL 难题：行转列

问题&#xff1a;有一张学生成绩表sc&#xff08;sid 学号&#xff0c;cid 课程&#xff0c;score 成绩&#xff09;&#xff0c;请查询出每个学生的英语、数学的成绩&#xff08;行转列&#xff0c;一个学生只有一行记录&#xff09;。建表语句&#xff1a;create 实现方式1—…
阅读更多...
python课程设计矩阵对角线之和,为每个python numpy用不同的值填充矩阵对角线

python课程设计矩阵对角线之和,为每个python numpy用不同的值填充矩阵对角线

I saw a function numpy.fill_diagonal which assigns same value for diagonal elements. But I want to assign different random values for each diagonal elements. How can I do it in python ? May be using scipy or other libraries ?解决方案You can use np.diag_i…
阅读更多...
SpringMvc 系统启动时加载数据到内存中

SpringMvc 系统启动时加载数据到内存中

SpringMvc 系统启动时加载数据到内存中 学习了&#xff1a;http://blog.csdn.net/newstruts/article/details/18668269 https://www.cnblogs.com/zhengteng/p/5381910.html http://xfxlch.iteye.com/blog/2048049 http://duanxuchu.iteye.com/blog/2181647 结论&#xff1a; 方…
阅读更多...
python字符串计算加减乘除代码_Python 70行代码实现简单算式计算器解析

python字符串计算加减乘除代码_Python 70行代码实现简单算式计算器解析

描述&#xff1a;用户输入一系列算式字符串&#xff0c;程序返回计算结果。要求&#xff1a;不使用eval、exec函数。实现思路&#xff1a;找到当前字符串优先级最高的表达式&#xff0c;在算术运算中&#xff0c;()优先级最高&#xff0c;则取出算式最底层的()&#xff0c;再进…
阅读更多...
最新文章

Copyright @ 2022~2023