标签: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