后台管理系统开发流程
首先我们是从0开始开发的,那么就要从脚手架开始,这个后台管理系统的项目使用的是Vue脚手架3.0,安装好脚手架之后,我们就可以对项目进行封装模块,配置多环境变量,方便后期维护和修改,下载Vuex,node-sass,axios,element-ui , 对axios进行封装,请求拦截,响应拦截,对element-ui进行按需引入,配置rem,实现自适应,在请求拦截和响应拦截中添加loading效果
首先我们是从0开始开发的,那么就要从脚手架开始,这个后台管理系统的项目使用的是Vue脚手架3.0,安装好脚手架之后,我们就可以对项目进行封装模块,配置多环境变量,方便后期维护和修改,下载Vuex,node-sass,axios,element-ui , 对axios进行封装,请求拦截,响应拦截,对element-ui进行按需引入,配置rem,实现自适应,在请求拦截和响应拦截中添加loading效果,对scss混入使用(mixin);
之后就可以对项目进行渲染数据了。
渲染好数据之后就要进行打包
在打包的时候 路由模式要选择 history 模式
之后进行优化,优化分为项目优化和性能优化
项目优化:
1.使用keep-alive缓存不活动的组件
2. 使用路由懒加载
3. element-ui按需引入
因为Vue是页面开发,可能有很多的路由引入,这样使用webpcak打包后的文件很大,当进入首页时,加载的资源过多,页面会出现白屏的情况,不利于用户体验,如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载,这样就更高效了,这样会大大提高首页显示的速度,但是可能其他页面的速度就会降下来,
- 图片懒加载
对于图片过多的页面,为了加速页面的加载速度,很多时候我们需要将页面内未出现在可视区域内的图片先不做加载,等滚动到可视区域后再去加载,这样对于页面加载性能上会有很大的提升,同时提高了用户体验。
使用Vue中的vue-lazyload插件
下载:npm i vue-lazyload -S
使用:
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>
4.使用防抖和节流函数(性能优化) (需要会手写)
实现防抖函数(debounce)
原理: 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
const debounce = (fn,delay) =>{
{let timer = null;
return (...args)=>{
clearTimeout(timer);
timer = setTimeout(() =>{
fn.apply(this,args);
},delay)
}
}
}
- 适应环境:
- 按钮提交场景:防止多次提交按钮,只执行最好提交的一次
- 服务端验证场景‘:表单验证需要服务端配合,只执行一段连续 的输入事件的最后一次,还有搜索联想词功能类似生存环境请用 lodash.debounce
实现节流函数(throttle)(需要会手写)
原理:规定在一个单位时间内,只能触发一次函数,如果这个单位时间内触发多次函数,只有一次生效。
手写简化版:
const throttle = (fn , delay = 500)=>
{
let flag = true;
return (...args) =>
{
if(!flag)
return ; flag = false;
setTimeout(()=>{
fn.apply(this,args);
flag = true;
},delay)
}
}
适用场景:
- 拖拽场景:固定数据内只执行一次,防止超高频率次触发位置变动
- 缩放场景:监控浏览器resize
- 动画场景:避免短时间内多次触发动画引起性能问题
更多推荐
所有评论(0)