vue插件应用实列集合

1：animate.css的应用
2：jwt的解密应用
3：监听安卓手机的物理返回键 mui
4：vue复制的功能
5：vue生成二维码
6：vue前端生成验证码
7：获取验证码的方法
8：vue项目中简单的px到rem的换算单位
9：vue的tab切换 以及底部栏
10：vue中的tab切换直接上代码，底部栏
11：vue项目自定义顶部栏组件
12：vue中判断是iOS，安卓，以及微信的方法
13：vuex的超级简单的应用
14：vant的按需引用
15：vue的组件传参以及 事件点击
16：vue前端生成图片验证码包含验证
17：vue获取国家以及地区的方法
18：vue实现长按删除方法
19：vue将时间戳转换成日期格式
20：vue三种路由引用以及路由守卫
21：vue i18n做国际化切换中英文
22：vue 简单粗暴，复制粘贴改变跨域
23：vue中axios的封装
24：拿到token后存到headers中方法 AXios的方法
25：删除全部的console
26：uniapp 保存图片到本地的方法

1：animate.css的应用

1：npm install animate.css --save

2：main.js

main.js中
import animated from 'animate.css';
Vue.use(animated);

== 3：应用==

<div class="animated slideInLeft">
			132132132
</div>

2：jwt的解密应用

1：npm i jwt-decode
2：在需要解密的页面引用
import jwtDecode from ‘jwt-decode’;
==3：在方法中用 ==

res.data.info = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IlU4OTg5ODkifQ.eyJpc3MiOiJodHRwOlwvXC9hcGlhYmMua3VhaTIzMy5jbiIsImF1ZCI6IjIyMy4xMDQuMTk0LjEyOSIsImp0aSI6IlU4OTg5ODkiLCJpYXQiOjE2MTA0MjA2OTYsInN1YiI6ImxvZ2luIiwibmJmIjoxNjEwNDIwNjk2LCJleHAiOjE2MTA0OTI2OTYsImluZm8iOnsidXVpZCI6IlU4OTg5ODkiLCJsb2dpbl90b2tlbiI6ImhyaXB3IiwicGhvbmUiOiIxMzg5NTk3MDQ4NyJ9fQ.kMZ3isXKxIUnEZQBNUv47vLLguFgf6iGqDD366VmTA_IX60_3dkEmgUXmb7v-Inb0Y5fLNRLOuGrfgzTZYJkqrHPf6absHboJqzLztsAQC1vd-QqlCWcQgOeX1WnIGDkX5-rJbKnZt7_rnCbzDdYoTdlFPYLbAq7ceJp3Y-_bO7SNdisZ88qXUowLvRmbrOS35dt5KjujF8jtZLVd3uWFKP8fLMJyRz8WlGPPZ9df5vAnCeYmBRcjyqb5h5L32dZDQCuKxllA7UjZgr1FPmIbC8bzPOCDCHq3M4fwReYQy61AYld_TrqUEpYvFo2d0t_YTgh9eYz7O_0O7EsVcHVXQ
let decoded = jwtDecode(res.data.info);
console.log(decoded);

参考：jwt获取和解析

3：监听安卓手机的物理返回键 mui

1：npm i vue-awesome-mui
2：main.js中引用

import Mui from 'vue-awesome-mui';
Vue.use(Mui);

3：在index.html中添加

 // //处理逻辑：1秒内，连续两次按返回键，则退出应用；
    var first = null;
    mui.back = function() {
      //首次按键，提示 再按一次退出应用
      if (!first) {
        first = new Date().getTime(); //记录第一次按下回退键的时间
        mui.toast("再按一次退出应用"); //给出提示
        history.go(-1); //回退到上一页面
        setTimeout(function() {
          //1s中后清除
          first = null;
        }, 1000);
      } else {
        if (new Date().getTime() - first < 1000) {
          //如果两次按下的时间小于1s，
          plus.runtime.quit(); //那么就退出app
        }
      }
    };

引用：vue 开发webapp 手机返回键 退出问题

4：vue复制的功能

npm i vue-clipboard2
2：在main.js中引用

import VueClipboard from ‘vue-clipboard2’
Vue.use(VueClipboard)

3：template

	<p class="code">{{icode}}</p>
	<p class="copy" v-clipboard:copy="icode" v-clipboard:success="onCopy">复制</span>

4：data

	data() {
		return {
			icode: "",
		}
	}

5：methods

	onCopy(e) {
		this.$toast('复制成功');
		var url = e.text;
	},

5：vue中拿到地址生成二维码的方式

npm i vue-qr
2：在需要生成 二维码的页面

	 import VueQr from 'vue-qr'

3：template

	<vue-qr class="bicode" :logoSrc="imagePath" :text="codeValue"></vue-qr>

4：data

	data() {
		return {
			codeValue: "", //显示的值、跳转的地址
			icode: "",
			imagePath: "" //中间logo的地址
		}
},
//定义引用的组件
components: {
	VueQr
},

4：mounted
this.codeValue = “http://www.baidu.com”

6：vue前端生成验证码

vue前端生成验证

7：获取验证码的方法

1:template:

<div>
	<div class="title-bo">
		验证码
	</div>
	<input type="text" placeholder="请输入短信验证码" class="inputText" v-model="code">
</div>
<div>
	<van-button class="alin-btn color" :disabled="disabled" @click="sendcode">
		{{codetext}}
	</van-button>
</div>

== 2:data:==

data() {
	return {
		time: 60,
		codetext: "获取验证码",
		disabled: false,
	}
},
methods:{
//既能验证手机号 也能验证邮箱
	sendcode() {
				let mobileReg = /^1(3|4|5|7|8|9)\d{9}$/;
				let emailReg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
				if (!this.account) {
					this.$toast('请输入手机号或邮箱'); // 请输入手机号或邮箱
				} else if (!mobileReg.test(this.account) && !emailReg.test(this.account)) {
					this.$toast('注册账号格式不正确'); 
				} else {
					this.timer()
				}
			},
	timer() {
		if (this.time > 0) {
			this.time--;
			this.codetext = this.time + 'S后重试'; //剩余秒数;
			this.disabled = true;
			console.log(this.disabled)
			setTimeout(this.timer, 1000);
		} else {
			this.time = 60;
			this.codetext = '获取验证码'; // 获取验证码
			this.disabled = false;
		}
	},
}

8：vue项目中简单的px到rem的换算单位

1：在 index.html文件中

 //得到手机屏幕的宽度
    var htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    //得到html的Dom元素
    var htmlDom = document.getElementsByTagName('html')[0];
    //设置根元素字体大小
    htmlDom.style.fontSize = htmlWidth / 20 + 'px';

1：2:这里用的是vscode 编辑器
下载插件：px2rem
修改设置

9：数字滚动插件countTo的使用

1：npm install --save vue-count-to
2：在需要用的页面引用

import countTo from 'vue-count-to';
components: {countTo},

3:手动开始的方法

template:
<countTo  ref='decreasing' :startVal='startVal' :endVal='endVal' :duration='3000' :autoplay='false'></countTo> 
<span @click='start'>开始倒计时</span>
data:
data() {
	return {
		startVal: 25,
		endVal:0,
	}
}
methods:{
	start() {
		this.$refs.decreasing.start();
		
	},
}

4：自动开始的方法
参考该同学的方法

26：uniapp 保存图片到本地的方法

   uni.saveImageToPhotosAlbum({
		filePath: this.imgPath,
		success(res) {
			uni.showToast({
				title: '已保存到相册',
				icon: 'success',
				duration: 2000
			});
		},
		fail() {
			uni.showToast({
				icon: 'none',
				title: '保存海报图片失败'
			})
		}
	});