用dw如何做网站链接,网页设计专业大学排名,网站建设大量定制阶段,网站not found插件开发的话建议使用vue-gitment脚手架开发vue init webpack-simple vue-gitment如果提示执行cnpm install vue-cli -g 全局安装cnpm install vue-cli -g在次执行上面的命令完成之后可以看到这样的目录在src下面添加component loadding.js loadding.vueloadding.vueexport def…插件开发的话建议使用vue-gitment脚手架开发vue init webpack-simple vue-gitment如果提示执行cnpm install vue-cli -g 全局安装cnpm install vue-cli -g在次执行上面的命令完成之后可以看到这样的目录在src下面添加component loadding.js loadding.vueloadding.vueexport 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.jsimport loadding from ./loadding.vueconst Loadding {install:function (Vue) {Vue.component(Loadding,loadding)}};// 这里的判断很重要if (typeof window ! undefined window.Vue) {window.Vue.use(Loadding)}export default Loadding然后修改webpack.config.js文件entrywebpack打包的入口文件output:webpack打包的出口文件里面的是一些配置library:模块名字 这里是LoaddinglibraryTarget:umd//写插件的时候需要umdumdNamedDefine:true //对umd的模块命名表示负责然后npm run build一下emmmm这个时候出现了一坨东西 表示成功了确认没问题之后 就再次修改package.json文件我的是这样子{name: cssloadding-jie,description: A Vue.js project,version: 1.0.0,author: Livejie 18312173568163.com,license: MIT,private: false,main:loadding/js/loadding.js,keywords: [vue,css3loadding,ajax loadding],scripts: {dev: cross-env NODE_ENVdevelopment webpack-dev-server --open --hot,build: cross-env NODE_ENVproduction 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:添加关键词然后把不要的删除掉目录结构变成这样子然后登陆npmnpm login输入用户名 密码 邮箱登陆没有的话去这里注册https://www.npmjs.com/发布npm publish发布成功更新的话再次publish但是需要修改下version版本一定要修改version版本不然会报错再次npm publish再次打开一个新的项目npm install cssloadding-jiemain.js下import Loadding from cssloadding-jieVue.use(Loadding);vue文件下使用npm run dev 打开浏览器查看成功引入成功发布并使用。
