标签：serve default 实现 pos nginx 配置 style value head
// import Recommend from "pages/Recommend.vue"; // import Singer from "pages/Singer.vue"; // import Detail from "pages/Detail.vue"; // 改为路由懒加载方式引入：引入组件的方式从同步变为异步 const Recommend=()=>import("pages/Recommend.vue"); const Singer=()=>import("pages/Singer.vue"); const Detail=()=>import("pages/Detail.vue");
created() { console.log("歌手创建") }, mounted() { console.log("歌手挂载") }, activated() { console.log("歌手缓存激活，进入keep-alive") }, deactivated() { console.log("歌手缓存停用，离开keep-alive") },
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="[‘a‘, ‘b‘]">
<component :is="view"></component>
</keep-alive>
<keep-alive>
<router-view></router-view>
</keep-alive>
export default{ set(key,data,expiresTime){ let obj={ data:data, ctime:(new Date()).getTime(),//时间戳，同Date.now() expiresTime:expiresTime||1000*60*60 // 如果没有传过期时间，则设置过期时间一个小时 } localStorage.setItem(key,JSON.stringify(obj)); }, get(key){ let obj=JSON.parse(localStorage.getItem(key)); let getItem=(new Date()).getTime(); if(getItem-obj.ctime>=obj.expiresTime){ // 如果超时 localStorage.removeItem(key); return null; }else{ // 未超时 return obj.data; } } }
import LocalStorage from "utils/localStorage.js";
Vue.prototype.$localStorage=LocalStorage;
this.$localStorage.set("name","吴启浪") console.log(this.$localStorage.get("name"))
npm install vue-lazyload
import VueLazyLoad from "vue-lazyload"; Vue.use(VueLazyLoad,{ preLoad:1.3, // 预加载 error:require("./assets/musicLogo.png"), // 错误时显示 loading:require("./assets/musicLogo.png"), // 加载时显示 attempt:1 // 每次加载多少张 });
<img :src="info.avatar">
<img v-lazy="info.avatar">
npm install mint-ui
import MintUI from "mint-ui"; import "mint-ui/lib/style.css"; Vue.use(MintUI);
import {Toast,Indicator} from "mint-ui";
<button @click="toast">toast</button> methods: { toast(){ Toast({ message:"点击我了，操作成功", // 信息 position:"center", // 位置 duration:3000 // 持续时间 }); } }
created() { Indicator.open({ text:"加载中", spinnerType:"fading-circle" }); setTimeout(() => { Indicator.close(); }, 2000); }
<mt-button type="default">default</mt-button>
<mt-button type="primary">primary</mt-button>
<mt-button type="danger">danger</mt-button>
<template>
<div class="loading">
<img :src="img">
</div>
</template>
<script>
// 以base64的方式引入图片
import img from "../assets/loading.gif";
export default {
data() {
return {
img:img
}
},
}
</script>
<style lang="less">
@import "~style/index.less";
.loading{
position: fixed;
top: 0;bottom: 0;
left: 0;right: 0;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
img{
.w(30);
.h(30);
}
}
</style>
import Loading from "components/Loading.vue"; data() { return { loading:true, songList:[] } }
<Loading v-if="loading"></Loading> <ul v-else class="songList"> <!-- --> <li v-for="(item,index) in songList" :key="index" @click="goDateil(item.creator.encrypt_uin)"> <img :src="item.imgurl"> <div class="info"> <h2>{{item.creator.name}}</h2> <p>{{item.dissname}}</p> </div> </li> </ul>
axios.get(url,(err,data)=>{ }).then((data)=>{ this.songList=data.data.list; this.loading=false; });
npm install axios qs
import axios from "./utils/axios.js";
Vue.prototype.$axios=axios;
module.exports={ devServer:{ port:8989, proxy:{ "/maoEr":{ target:"https://www.missevan.com",// 目标服务器路径 changeOrigin:true,// 是否允许改变源，默认为true pathRewrite:{// 重写路径 "^/maoEr":"" } }, } } }
mounted() { let url="/maoEr/site/getcomment"; let data={ order:1, pagesize:10, type:1, eId:1284079, p:1 } const options={ method:"POST", headers:{"content-type":"application/x-www-form-urlencoded"}, data:qs.stringify(data),// 需要下载qs依赖，npm i qs，node中queryString()有同样效果 url:url, } this.$axios(options).then((data)=>{ console.log(data) }); }
const querystring = require(‘querystring‘);
data:qs.stringify(data),
data:querystring.stringify(data),
router.beforeEach((to,from,next)=>{ console.log("去哪里",to) console.log("从哪来",from) let token=false; if(to.name=="About"){ if(token){ next(); }else{ next("/login"); } }else{ next(); } })
{ path: ‘/login‘, name: ‘Login‘, component: () => import(‘../views/Login.vue‘), beforeEnter: (to, from, next) => { console.log("去哪儿",to) console.log("从哪来",from) next(); } }
beforeRouteEnter(to, from, next) { console.log("组件进入前") next(); }
beforeRouterUpdate(to, from, next) { console.log("组件更新",to.params.id) next(); }
watch: { $route(newValue){ console.log("watch",newValue.params.id) } }
beforeRouteLeave(to, from, next) { console.log("组件要离开",this) // console.log("去哪儿", to); // console.log("从哪来", from); let state = confirm("确定要离开吗"); if (state) { next(); } }
npm install mint-ui
import MintUI from "mint-ui" import "mint-ui/lib/style.css" Vue.use(MintUI)
<template>
<div class="home">
这里是首页
<mt-loadmore
:top-method="loadTop"
:bottom-method="loadBottom"
:bottom-all-loaded="allLoaded"
ref="loadmore"
>
<ul>
<li v-for="(item,index) in list" :key="index">{{item.name}}</li>
</ul>
</mt-loadmore>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ name: "AAA" },
{ name: "BBB" },
{ name: "CCC" },
{ name: "DDD" },
{ name: "EEE" },
{ name: "FFF" },
{ name: "RRR" },
{ name: "HHH" },
{ name: "NNN" }
],
allLoaded: false
};
},
methods: {
loadTop() {
let url = "/api/city/city/getHotCityList?version=6.0.4&referer=2";
this.$axios
.get(url, () => {})
.then(data => {
this.list = data.data.hot_city_List; // 拿到数据后让页面回到原位
this.$refs.loadmore.onTopLoaded();
});
},
loadBottom() {
setTimeout(() => {
this.list = this.list.concat([
{ name: "窗前明月光" },
{ name: "疑是地上霜" },
{ name: "举头望明月" },
{ name: "低头思故乡" }
]);
console.log(this.list);
this.allLoaded = false;
this.$refs.loadmore.onBottomLoaded();
}, 1000);
}
}
};
</script>
<style>
.home {
overflow: scroll; // 注意：如果上拉函数无法触发，是因为这里没有设置超出滚动
}
li {
height: 50px;
font-size: 20px;
}
.mint-loadmore-text {
font-size: 20px !important;
}
.mint-loadmore-content {
font-size: 20px !important;
}
</style>
标签：serve default 实现 pos nginx 配置 style value head
原文地址：https://www.cnblogs.com/wuqilang/p/12310518.html
