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

vue init webpack-simple vue-gitment

如果提示

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

cnpm install vue-cli -g

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

在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文件

entry：webpack打包的入口文件

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

library:模块名字 这里是Loadding

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

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

然后npm run build一下

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

确认没问题之后 就再次修改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:添加关键词

然后把不要的删除掉

目录结构变成这样子

然后登陆npm

npm login

输入用户名 密码 邮箱登陆

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

发布

npm publish

发布成功

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

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

再次npm publish

再次打开一个新的项目

npm install cssloadding-jie

main.js下

import Loadding from 'cssloadding-jie'

Vue.use(Loadding);

vue文件下使用

npm run dev 打开浏览器查看

成功引入

成功发布并使用。