前端学习(2735):重读vue电商网站45之项目优化上线

 

优化Vue项目,部署Vue项目

项目优化

添加进度条

nprogress 进度条官方文档传送门

打开 vue-ui 面板,选择依赖,输入 nprogress 进行安装相关依赖。

npm

Javascript

npm install --save  nprogress

在 main.js 入口文件中,进行相关配置。首先先导入包对应的js 和 css

Javascript

// 导入NProgress包对应的js和css
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

配置 request 请求拦截器 和 response 响应拦截器,这样我们就能在每次网络请求时能够展示进度条了。

Javascript

// 在 request 拦截器中,显示进度条 NProgress.start()
// 设置axios请求拦截器
axios.interceptors.request.use(config => {NProgress.start()config.headers.Authorization = window.sessionStorage.getItem('token')// console.log(config)return config
})
// 在 response 拦截器中,隐藏进度条 NProgress.done()
axios.interceptors.response.use(config => {NProgress.done()return config
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/414634.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Push rejected: Push to origin/master was rejected

Push rejected: Push to origin/master was rejected 1、错误日志 23:04 Maven projects need to be imported: Import Changes Enable Auto-Import23:05 4 files committed: 初始化项目23:06 Push rejected: Push to origin/master was rejected23:07 2 files …

前端学习(2736):重读vue电商网站46之执行build 时报错

Error: No module factory available for dependency type: CssDependency 解决办法: 参考:解决webpack打包报错 No module factory available for dependency type: CssDependency 在执行 build 命令期间移除所有的 console babel-plugin-transform…

@RequestParam @PathVariable

RequestParam PathVariable 1、Request参数 在访问各种各样网站时,经常会发现网站的URL的最后一部分形如:?xxxxyyyy&zzzzwwww。这就是HTTP协议中的Request参数,它有什么用呢?先来看一个例子: 在知乎中…

蓄水池抽样算法 Reservoir Sampling

2018-03-05 14:06:40 问题描述:给出一个数据流,这个数据流的长度很大或者未知。并且对该数据流中数据只能访问一次。请写出一个随机选择算法,使得数据流中所有数据被选中的概率相等。 问题求解:如果是长度已知或者有限的问题&…

Android okhttp3使用实例,OKhttp设置请求超时时间,okgo使用demo,SSL证书验证

SSL证书验证 rootca证书资源 调用 //信任所有证书 HTTPSCerUtils.setTrustAllCertificate(okHttpBuilder); //信任raw资源目录下的证书 HTTPSCerUtils.setCertificate(context, okHttpBuilder, R.raw.rootca); //传入证书…

@ResponseBody ResponseEntity

ResponseBody ResponseEntity 1、产生疑问 我们知道,如果在 Controller 的某个方法上加上 ResponseBody 注解,那么你就能拿到 json 数据。 如果你只是知道这么用,那么你应该知道 ResponseBody 的具体作用: 其将方法的返回值通过…

22图的遍历

图的遍历 图的遍历:搜索属于图的基本运算。树的先序遍历和按层遍历的推广。图的遍历也称搜索,主要有: 先深搜索(depth-first search)——深度优先搜索——dfs搜索 先广搜索(breadth-first search&#xff0…

Cannot resolve symbol 'R',Failed to resolve: constraint-layout

1、当在github上下载demo项目在Android studio启动时,提示Cannot resolve symbol R。虽然提示错误,但是运行项目并没有问题 原因是gradle版本高于本地Android studio的gradle版本 把 classpath com.android.tools.build:gradle:3.3.1 改为 classpat…

Android Log工具类,Toast工具类,获取当前方法名称

Log新晋工具方法 public class LgqLog {private static boolean ifShowtrue;private static int sCurrentLogLevel Log.DEBUG;private static String sPrefix null;IntDef({ Log.VERBOSE, Log.DEBUG, Log.INFO, Log.WARN, Log.ERROR })Retention(RetentionPolicy.SOURCE)publ…

前端学习(2739):重读vue电商网站49之第三方库使用CDN

通过 externals 加载外部 CDN 资源 默认情况下,通过 import 语法导入的第三方依赖包,最终会被打包合并到同一个文件中,从而导致打包成功后,单文件体积过大的问题。 例如上述 chunk-vendors.js 体积很大,原因是全部 im…

Mysql--重点1

知识预览 sql语句规范数据类型数据库操作数据表操作表记录操作查询表记录(select)多表查询完整性约束回到顶部sql语句规范 sql是Structured Query Language(结构化查询语言)的缩写。SQL是专为数据库而建立的操作命令集,是一种功能齐全的数据库语言。 在使用它时&…

6、jeecg 笔记之 自定义excel 模板导出(一)

6、jeecg 笔记之 自定义excel 模板导出(一) 1、前言 jeecg 中已经自带 excel 的导出导出功能,其所使用的是 easypoi,尽管所导出的 excel 能满足大部分需求, 但总是有需要用到自定义 excel 导出模板,下文所…

Android Lambda 表达式使用实例,-

1、Lambda表达式理解 Lambda 表达式,也可称为闭包,它是推动 Java 8 发布的最重要新特性。 Lambda 允许把函数作为一个方法的参数(函数作为参数传递进方法中)。 使用Lambda 表达式可以使代码变的更加简洁紧凑。 2、Lambda表达式…

前端学习(2740):重读vue电商网站50之Element-UI 组件按需加载

通过 CDN 优化 ElementUI 的打包 虽然在开发阶段,我们启用了 element-ui 组件的按需加载,尽可能的减少了打包的体积,但是那些被按需加载的组件,还是占用了较大的文件体积。此时,我们可以将 element-ui 中的组件&#…

8、jeecg 笔记之 自定义word 模板导出(一)

8、jeecg 笔记之 自定义word 模板导出(一) 1、前言 jeecg 中已经自带 word 的导出导出功能,其所使用的也是 easypoi,尽管所导出的 word 能满足大部分需求, 但总是有需要用到自定义 word导出模板,下文所用到…

Android 全屏抽屉fragment,NavigationView

1、首先是右→左进入动画 、slide_left.xml <?xml version"1.0" encoding"utf-8"?> <set xmlns:android"http://schemas.android.com/apk/res/android"><translateandroid:duration"800"android:fromXDelta"20…

Eclipse 创建第一个 springboot 应用

Eclipse 创建第一个 springboot 应用 1、前言 一直想把笔记整理出来&#xff0c;分享一下 springboot 的搭建&#xff1b; 因为私下 idea 用的比较多&#xff0c;使用比较方便&#xff0c;但恰逢小伙伴问起 eclipse 怎么搭建的问题&#xff0c; 顾整理以记之。 2、springboot …

Can't process attribute android:fillColor=@color/gray,添加vector属性报错解决方法

Android studio添加vector属性文件报错 vector属性文件 <vector xmlns:android"http://schemas.android.com/apk/res/android"android:width"24dp"android:height"24dp"android:viewportHeight"49.94"android:viewportWidth"4…

前端学习(2742):重读vue电商网站52之路由懒加载

当打包构建项目时&#xff0c;JavaScript 包会变得非常大&#xff0c;影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块&#xff0c;然后当路由被访问的时候才加载对应组件&#xff0c;这样就更加高效了。 具体需要 3 步&#xff1a; 安装 babel/plugin-synt…

Android Service与IntentService区别

相同点&#xff1a; 1、首先Service与IntentService都是Android的基本组件service 2、使用时都是一样需要创建&#xff0c;配置&#xff1b;和调用启动方式都是一样的 不同点&#xff1a; 1、IntentService是继承自Service的service 类&#xff0c;创建了自己的特有方法onH…