林夏天的博客

剔除项目无用代码前端性能优化配置服务器做域名解析上传项目 启动服务（1）路由按需加载方案路由懒加载能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。路由懒加载主要目的是防止 首屏加载内容过多，延时过长，造成白屏，不利于用户体验。方式1：在router.js中：import Vue from 'vue';import Rou...

目录调整Order父组件结构（解决Bug）订单列表数据渲染Loading 和 NoData优化订单列表分页 - 分页器订单列表分页 - 加载更多订单列表分页 - 滚动加载（1）调整Order父组件结构（解决Bug）之前在Vue项目实战：订单确认页面实现中关于订单父组件结构封装里写到：在order.vue中引入<order-header></order-hea...

目录订单详情数据加载支付宝支付对接微信支付对接微信支付转态轮询（1）订单详情数据加载在orderPay.vue中：<p> 订单详情 <em class="icon-down up" :class="{'up': showDetail}" @click="showDetail=!showDetail"></em> <!-...

目录订单父组件结构封装地址和商品数据加载地址删除功能实现新增地址交互实现地址编辑和订单提交订单确认页面 如下：（1）订单父组件结构封装回顾路由文件router.js中关于order的路由: { path: '/order', name: 'order', component: Order...

退出功能实现（1）退出功能实现在NavHeader.vue中： <div class="topbar-user"> <a href="javascript:;" v-if="username">{{username}}</a> <a href="javascript:;" v-if="!usern...

目录1. 购物车页面Order-Header组件购物车列表渲染购物车全选和非全选购物车商品更新和删除购物车结算2. ElementUI集成3. Babel介绍购物车页面（1）Order-Header组件在Order-Header.vue中：<template> <div class="order-header"> &l...

目录产品站页面组件吸顶实现视频模块实现视频模块实现交互实现解决一个视频模块bug商品详情页面清楚浮动交互实现产品站页面（1）组件吸顶实现在要实现吸顶的组件文件ProductParam.Vue中<template> <div class="nav-bar"> <div class="container"&gt...

目录1. 登录页面登录功能拉取用户信息2. Vuex集成Vuex框架搭建Vuex存储读取数据解决vuex页面数据延迟登录页面（1）登录功能<template> <div class="login-form"> <h3> <span class="checked">帐...

商场首页项目1. Nav-Header组件组件复用的一个技巧通过 @mixin 简化代码统一修改系统主题色数据请求2. 首页轮播功能实现使用 vue-awesome-swiper 实现轮播图首页轮播菜单实现Modal 弹窗动画 与 父子组件通信懒加载一. Nav-Header组件（1）组件复用的一个技巧：因为商场网站中多个页面共用了头部组件nav-header和...

Mock设置作用：开发阶段，为了高效率，需要提前Mock减少代码冗余，灵活插拔减少沟通，减少接口联调时间mock设置三种方式：本地创建json集成Mock APIeasy-mock平台（1）本地加载请求静态json文件：在public下创建文件夹mock，mock里创建文件夹user,user里添加文件login.json:{ "status": 0, ...

接口错误拦截场景：统一报错未登录拦截请求值、返回值统一处理使用axios插件进行拦截:安装axiosnpm i axios --save-dev在main.js文件中加入：import axios from 'axios'import VueAxios from 'vue-axios'axios.defaults.baseURL = '/api'; ax...

Storage封装封装Storage的原因：Storage本身有API，但是只是简单的key/value，不能存储更复杂的形式。Storage只存储字符串，需要人工转换成json对象Storage只能一次性清空，不能单个清空封装方法：希望的session storage数据格式是：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5rZtTWOj-...

Git配置git config --listgit config --global user.name "..."git config --global user.email "..."git config --global credential.helper storessh-keygen -t rsa -C "..."需求梳理熟悉文档、查看原型、读懂需求...