项目开发流程_scroll-container-CSDN博客

本文链接：https://blog.csdn.net/weixin_48456565/article/details/112171425

1.我独立搭建这个xxx项目，我使用Vue脚手架3，vue脚手架编码简洁，体积小，项目创建完后，首先我会配置多环境变量，方便后期测试，上线阶段快速切换后台接口。然后安装配置项目所用的ui框架（后台管理系统element-ui,移动端vant-ui）,我采用的是按需引入的方式babel-plugin-import 插件它会在编译过程中将import 的写法自动转换为按需引入的方式。之后安装axios，对axios进行封装，添加请求拦截，和响应拦截，我一般在请求拦截器中,给请求头添加token字段。当然这个token要存储在vuex中（稍后会降到），还有loding动画的开启，响应拦截器中，我一般会关闭请求时开启的动画，根据后端返回的状态码（code值），验证token是否有效或过期（一般401表示token无效，402表示token过期）。接着我会用封装好的axios进行api接口的封装，这里我用到了async、await封装请求接口函数，这样可以将异步操作同步化操作，代码更加友好，避免回到地狱的出现。

2.vuex使用
我这个《xxx》项目用vuex对数据进行了共享。包括token,购物车中的商品数据，商品类型，商品总价，商品订单，收货地址，等。之前遇到过刷新页面vuex数据丢失的问题，我查阅资料，可以用数据持久化解决，原理就是把vuex中的数据，同步到sessionStorage中，用一个插件就可以解决vuex-persistedstate。

组件化拆分，开发项目
整个项目采用组件拆分的思想开发的，开发初期，我会创建三个目录，分别是views(页面级组件目录，比如home首页,category分类,detail详情，cart购物车,myself个人中心),common（公共组件目录比如：header公共头组件,swiper轮播组件,item商品信息组件,list上拉列表组件）,feature（功能性组件目录，比如toTop返回顶部组件，search搜索组件，sticky吸顶组件，tabbar组件，sku商品规格组件等）,
列举5个重要的组件说下。

项目优化

使用keep-alive缓存不活动的组件
keep-alive是vue提供给我们的一个组件，不会渲染成dom，用来在路由切换的时候保存我们的组件状态
全部缓存
直接把router-view用《keep-alive》包裹起来
部分缓存
1、router.js中设置要缓存的页面
{
path: ‘/child1’,
name: ‘Child1’,
component: Child1,
meta:{
keepAlive:true
}
}
},
2.用v-if来显示router-view是否在keep-alive中出现
使用路由懒加载
Vue 是单页面应用，可能会有很多的路由引入，这样使用 webpcak 打包后的文件很大，当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。这样会大大提高首屏显示的速度，但是可能其他的页面的速度就会降下来。

export default new Router({
  mode: 'history',
  routes: [
			{
		     path: '/',
		     component: ()=>import('@/components/DefaultIndex') }
		     ]
		     })

图片懒加载
在（element或vant）中element-ui可通过lazy开启懒加载功能，当图片滚动到可视范围内才会加载。可通过scroll-container来设置滚动容器，若未定义，则为最近一个overflow值为auto或scroll的父元素。（vant通过lazyload插件）
自己写懒加载

npm引入：npm i vue-lazyload -S
CDN引入：[https://unpkg.com/vue-lazyload/vue-lazyload.js](https://unpkg.com/vue-lazyload/vue-lazyload.js)

main.js中

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
 
Vue.use(VueLazyload)
 
// or with options
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})
 
new Vue({
  el: 'body',
  components: {
    App
  }
})

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

5.使用节流防抖函数(性能优化)

防抖：在n秒之后执行，如果在这n秒内再次出发，从新计时。

。

// 防抖
export function _debounce(fn, delay) {
    var delay = delay || 200;
    var timer;
    return function () {
        var th = this;
        var args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            timer = null;
            fn.apply(th, args);
        }, delay);
    };
}
// 节流
export function _throttle(fn, interval) {
    var last;
    var timer;
    var interval = interval || 200;
    return function () {
        var th = this;
        var args = arguments;
        var now = +new Date();
        if (last && now - last < interval) {
            clearTimeout(timer);
            timer = setTimeout(function () {
                last = now;
                fn.apply(th, args);
            }, interval);
        } else {
            last = now;
            fn.apply(th, args);
        }
    }
}

在需要使用的组件引用

import { _debounce } from "@/utils/public";

  methods: {
    // 改变场数
    changefield: _debounce(function(_type, index, item) {
        // do something ...
    }, 200)
  }

节流：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效

引入和防抖一样
防抖在input输入时
6.webpack优化首先去除sourceMap和console.log和注释，吧element-ui（vant-ui）axios，vuex，router等用CDN外链，，插入到index.html中，代码压缩，图片压缩，公共代码抽离等，最后使用骨架屏，它是现阶段的很流行，比如淘宝，等都使用，在网页没加载出来之前显示个骨架可以提高用户体验