1.清除默认样式
1. 安装reset-css
npm install reset-css
2. main.js中，引入reset-css。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//引入reset-css
import "reset-css"
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
3.清除默认样式。golbal.css
.wrap{
width: 1200px;
margin: 0 auto;
// background-color: red;
}
/* 清楚input的默认样式 */
input{
outline: none;
padding: 0;
}
// 网站基色抽取
@base-color:#0a328e;
2.vue警告处理
1. 出现这个错误，跟我们组件注册命名，和组件调用时的命名有关，这是一个Vue中隐形的坑。
3.测试发送网络请求
1. 在home组件测试接口：
<template>
<div>我是首页</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'home',
created() {
axios.get('http://kumanxuan1.f3322.net:8881/cms/products/recommend').then(res => {
console.log(res.data);
})
}
}
</script>
<style scoped></style>
成功：
network
2. 直接在一个组件发起网络请求的危害
import axios from 'axios'
export default {
name: 'home',
// 以下代码，作为案例可以，项目不行，会有缺陷。
// 1. 请求头写在哪里，多个连接的带请求头请求怎么写。
// 2.不便于接口的管理
// 3.容易出现回调地狱
created() {
axios.get('http://kumanxuan1.f3322.net:8881/cms/products/recommend').then(res => {
console.log(res.data);
})
}
}
4.axios的封装
1. 注意点：
- 不加大括号
- 加大括号：
- 响应请求的res
- 将单个的请求写成函数
2. 响应拦截和请求拦截
3. axios的简单封装
import axios from "axios";
// instance 实例 之前的axios对象
const instance = axios.create({
baseURL: 'http://kumanxuan1.f3322.net:8881/cms',
timeout: 5000,
})
// 主要有两个对象：请求拦截，响应拦截
instance.interceptors.request.use(config => {
// 什么时候，执行这里的代码，在每个请求发出去之前。
// config是一个对象,记录了本次请求的相关信息
console.log(config);
// 这个函数什么作用：可以用来做请求前的准备工作，如：添加请求头
return config
}, err => {
// 将错误抛出
return Promise.reject(err)
})
instance.interceptors.response.use(res => {
// 什么时候，执行这里的代码，在后端返回响应，在进入到组件中成功的回调函数之前，执行。
// res是一个对象,原先axiso封装的res对象。
console.log("res", res);
// 这个函数什么作用：
// 1.可以用来做请求前的准备工作
// 2.对服务器返回的数据做统一的处理
return res.data;
}, err => {
// 将错误抛出
return Promise.reject(err)
})
export default instance;
5.async和await书写异步请求
6. 关于重复点击同一个路由出现的报错问题解决
在新版本的vue-router中，重复点击同一个路由会出现以下报错：
解决方案如下：
方案1、vue-router降级处理(但不推荐)
npm i vue-router@3.0.7
方案2、直接在push方法最后添加异常捕获，例如：
<van-search v-model="SearchVal"
shape="round" placeholder="请输入搜索关键词"
disabled
@click="$router.push('/home/searchPopup').catch(err=>{})"/>
方案3、直接修改原型方法push(推荐)
// 把这段代码直接粘贴到router/index.js中的Vue.use(VueRouter)之前
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function(location) {
return originalPush.call(this, location).catch(err => {})
};
7.设置网页基础色
8. 登录模态窗口
1.获取store的子模块module里面的数据。
2. 关闭窗口
9.拼图验证滑块
9.1、安装插件
npm install --save vue-monoplasty-slide-verify
或者
yarn add vue-monoplasty-slide-verify
9.2 在main.js文件入口引入
9.3 在组件中使用
<template>
<slide-verify :l="42" :r="20" :w="362" :h="140" @success="onSuccess" @fail="onFail" @refresh="onRefresh" :style="{ width: '100%' }" class="slide-box" ref="slideBlock" :slider-text="msg"></slide-verify>
</template>
<script>
export default {
data() {
return {
msg: "向右滑动"
};
},
methods: {
// 拼图成功
onSuccess(times) {
let ms = (times / 1000).toFixed(1);
this.msg = "login success, 耗时 " + ms + "s";
},
// 拼图失败
onFail() {
this.onRefresh(); // 重新刷新拼图
},
// 拼图刷新
onRefresh() {
this.msg = "再试一次";
},
},
};
</script>
<style lang="less" scoped>
/deep/.slide-box {
width: 100%;
position: relative;
box-sizing: border-box;
canvas {
position: absolute;
left: 0;
top: -120px;
display: none;
width: 100%;
box-sizing: border-box;
}
.slide-verify-block{
width: 85px;
height: 136px;
}
.slide-verify-refresh-icon {
top: -120px;
display: none;
}
&:hover {
canvas {
display: block;
}
.slide-verify-refresh-icon {
display: block;
}
}
}
</style>
