2021-01-10

zhi() {
window.scrollTo(0, 0);
// window.scrollTo(0, 0);
// document.documentElement.scrollTop = 0;
},

跨域
//方式一
//在项目的根目录下创建一个vue.config.js文件写入：
module.exports = {
devServer: {
proxy: ‘https://m.douyu.com/api/’
},
}
注意重启项目！！！！！！！
//在页面中请求时，把参数拼接上
this.$axios.get{(}^{\prime }参数地{址}^{\prime })//$axios要和挂载在原型上的$axios对应

//方式二
module.exports = {
publicPath: ‘./’,
devServer: {
open: true,
proxy: {
‘/api’: {
target: ‘http://47.115.85.237:3000/’, // 线上后端地址
changeOrigin: true, //允许跨域
pathRewrite: {
‘^/api’: ‘’
}
}
}
}
}

filter是过滤
includes是包含搜索
silce是截取
map是循环

import axios from “axios”;
Vue.prototype.$axios=axios;

shoplist userinfo userlist

import Vant from ‘vant’;
import ‘vant/lib/index.css’;

Vue.use(Vant);

import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;
Vue.use(ElementUI);

import http from “./http/http.js”;
Vue.prototype.$http=http;

beforeRouteEnter(to, from, next) {
if (localStorage.getItem(“token”)) {
next();
} else {
next("/login");
}
},
全局守卫
router.beforeEach((to, from, next)=>{
if (localStorage.getItem(“token”)) {
next();
} else {
if(to.path !="/tome"){
next()
}else{
next("/login")
}
}
})

vuex
beforeRouteEnter(to, from, next) {
next(vm => {
if (vm.$store.state.user) {
next()
} else {
alert(“你还没登录”)
next("/login")
}
})
},
token失效
function removeToken() {
setTimeout(() => {
store.commit(“tui”)
}, 2000);
}
Vue.prototype.removeToken = removeToken;

this.removeToken()

vuex

cnpm i vuex-persist -S

import persist from “vuex-persist”;

plugins: [
new persist({
storage: window.localStorage,
}).plugin,
],

import Vue from “vue”;
import Vuex from “vuex”;

Vue.use(Vuex);

export default new Vuex.Store({
state: {
shoplist: [],
},
mutations: {
add(state, item) {
console.log(item);
let flag = false;
state.shoplist.forEach((i) => {
if (i.id == item.id) {
item.num++;
flag = true;
}
});
if (flag == false) {
item.num = 1;
state.shoplist.push(item);
}
},
jia(state, obj) {
console.log(obj);
state.shoplist.forEach((item) => {
if (item.id == obj.id) {
item.num == obj.num;
}
});
},
del(state, id) {
state.shoplist.forEach((item, index) => {
if (item.id == id) {
state.shoplist.splice(index, 1);
}
});
},

},
actions: {},
modules: {},

});

动画转场
cnpm i animate.css --save
import ‘animate.css’

.slide-enter {
transform: translate(100%);
}
.slide-leave-to {
transform: translate(-100%);
}

.slide-enter-active,
.slide-leave-active {
transition: all 0.3s linear;
}

#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
}
html,
body,
#app {
width: 100%;
height: 100%;
overflow: hidden;
}

.page{
position: absolute;
width: 100%;
height: calc(100% -96px);
left: 0;
// overflow: auto;
}

动态路由：
console.log(val);
this.$router.push(path:"//"+val)this.$axios.get("/data.json").then((res) => {
res.data.data.filter((item) => {
if (item.id == val) {
this.cate = item.children;
}
});
});
},
路由里面
{
path: ‘//:id’,
name: ‘Home’,
component: Home
},
app里面
首页

登录

登陆页面

};

up(){

  this.cate.sort((a,b)=>{
    return a.price-b.price
  })
},
 down(){

  this.cate.sort((a,b)=>{
    return b.price-a.price
  })
},

排序

<van-search v-model=“value” placeholder=“请输入搜索关键词” @search=“opp” />
opp() {
this.list.forEach((item) => {
if (item.title.includes(this.value)) {
this.active = item._id;
this.change(this.active);
}
});
},