vue2安装常见插件、配置、使用
一、网络请求【axios】
1、安装：
npm install axios@1.5.0 -save
2、全局注册main.js中
//导入axios import axios from "axios"; // 配置请求后端路径=IP:端口号/api axios.defaults.url='http://127.0.0.1:8888/'; // 将 axios 设置为 Vue 的原型属性，这样在组件中就可以通过 this.$http 访问 axios Vue.prototype.$http = axios;
或者
创建baseAxios.js
import axios from "axios"; // 设置新的axios标准 const baseAxios=axios.create({ baseURL:"http://localhost:8080", timeout:50000, timeoutErrorMessage:"请求已超时" }); //让请求携带上浏览器的cookie //baseAxios.defaults.withCredentials=true; // 默认出口axios export default baseAxios
main.js中
//导入axios import axios from "./util/baseAxios"; // 将 axios 设置为 Vue 的原型属性，这样在组件中就可以通过 this.$http 访问 axios Vue.prototype.$http = axios;
3、组件中使用
this.$http.post("/resource/search",{ "searchInput":"唐", "type":1, "page":1, "pageSize":2 } ) .then(res=>{ //响应的数据 alert(res.data) console.log("后端返回的数据======") console.log(res.data) }) .catch()
4、vueX中使用
// 修改数据,异步操作 actions: { // 模拟向springboot后端发送请求 async fetchPage({ state, commit }) { try { const response = await axios.post('/resource/search', { "searchInput":state.searchInput.text, "type":state.searchInput.type, } ) // 设置返回的数据 commit('setResItems', response.data.data); } catch (error) { console.error('分页请求失败:', error); } },
// 模拟定时执行某个方法 asyncIncrement(context) { setTimeout(() => { context.commit('increment'); }, 1000); }, }, // 插件，监听哪些方法被调用了，就向后端发送请求 plugins: [ store => { store.subscribe((mutation, state) => { // 输入内容 if (mutation.type === 'updateSearchInput') { store.dispatch('fetchPage'); } }); } ],
参考教程：https://www.javasoho.com/axios/index.html
参考教程：http://www.axios-js.com/zh-cn/docs/vue-axios.html
参考教程：https://blog.csdn.net/weixin_43529465/article/details/129806423#
二、饿了么美化页面【element-ui】
1、安装
npm i element-ui -S
2、全局注册main.js中
// 引入element-ui import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
3、组件中使用
三、状态集中管理【VueX】
1、安装
npm install --save vuex@3.6.2
2、注册、使用
四、视频【Dplayer】
官网地址：https://dplayer.diygod.dev/zh/
1、安装
npm install dplayer --save
npm i hls.js -s
2、使用
<template>
<div class="box">
<div id="dplayer" style="width:600px;height: 400px"></div>
</div>
</template>
<script>
import DPlayer from 'dplayer';
import Hls from 'hls.js';
export default {
data() {
return {
dp: {}
};
},
mounted() {
// 在 mounted 钩子中初始化 DPlayer 实例
this.initDPlayer();
},
methods: {
// 初始化 DPlayer 实例
initDPlayer() {
const player = new DPlayer({
container: document.getElementById("dplayer"), //播放器容器
mutex: false, // 防止同时播放多个用户，在该用户开始播放时暂停其他用户
theme: "#b7daff", // 风格颜色，例如播放条，音量条的颜色
loop: false, // 是否自动循环
lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'
screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
hotkey: true, // 是否支持热键，调节音量，播放，暂停等
preload: "auto", // 自动预加载
volume: 0.5, // 初始化音量
playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2], //可选的播放速度，可自定义
video: {
url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8', // 视频地址，初始为空字符串
type: 'customHls',
customType: {
customHls: function (video, player) {
const hls = new Hls(); //实例化Hls 用于解析m3u8
hls.loadSource(video.src);
hls.attachMedia(video);
}
},
//视频封面图片
pic: 'http://xxxx',
},
});
this.dp = player;
},
handleItemClick(item,index) {
// 切换到其他视频
this.dp.switchVideo(
{
url: item.url,
pic: this.randomLogo(),
},
);
// 播放视频
//this.dp.play();
},
},
};
</script>
<style lang="less" scoped>
</style>
五、图片预览【v-viewer】
官网地址：https://v-viewer.mirari.cc/
1、安装
npm install v-viewer@1.6.4
2、全局注册main.js中
//导入 图片预览 import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer) Viewer.setDefaults({ Options: { 'zIndex': 9999, 'inline': true, //启用lnline模式 'button': true, //显示右上角关闭按钮 'navbar': true, //显示缩略图导航 'title': true, //显示当前图片的标题 'toolbar': true, //显示工具栏 'tooltip': true, //显示缩放百分比 'movable': true, //显示可移动 'zoomable': true, //图片是否可缩放 'rotatable': true, //图片是否可旋转 'scalable': true, //图片是否可翻转 'transition': true, //使用css3过度 'fullscreen': true, //播放时是否全屏 'keyboard': true, //是否支持键盘 'url': 'data-source' //设置大图片的url } })
3、组件中使用
<div>
<viewer :images="photo">
<img
v-for="(src, index) in photo"
:src="src"
:key="index"
:onerror="errorImg"
/>
</viewer>
</div>
六、浏览器存储
2、cookie
安装
npm install vue-cookie --save
注册
import cookie from 'vue-cookie' // Vue.use(cookie) // Vue.prototype给Vue自定义个属性全局里有Vue就能用自定义属性 Vue.use()挂在到全局 // vue2中的设置方式 Vue.prototype.$cookie = cookie;
使用
<template>
<div>
<button @click="setCookie">设置Cookie</button>
<button @click="getCookie">获取Cookie</button>
<div v-if="cookieValue">Cookie值：{{ cookieValue }}</div>
</div>
</div>
</template>
export default {
name: "index",
data() {
return {
cookieValue: ''
}
},
methods: {
setCookie() {
this.$cookie.set('token', 'xiaogao', '1d'); // 设置cookie，有效期为1天
},
getCookie() {
this.cookieValue = this.$cookie.get('token'); // 获取cookie值
},
}
}
参考教程vue-cookie：https://blog.csdn.net/zsx1314lovezyf/article/details/96755304
参考教程vue-cookies：https://blog.csdn.net/m0_69257679/article/details/131780702
七、动态背景
参考教程：https://blog.csdn.net/AwesomeP/article/details/128241716
参考教程：https://blog.csdn.net/weixin_48337566/article/details/128818881
vue大纲：https://www.51cto.com/article/741440.html
