项目需求场景: 在开发项目过程中,在项目过于庞大,路由信息非常多的情况下,如果将路由配置信息都放在一个文件里面,那么这个JS是不方便维护的, 那么,这个时候需要我们把这个庞大的路由文件,根据项目功能分类,拆分为几个不同的路由文件. 实现步骤: 1.不管你拆分为几个,最后都是要整合到一个js文件里面的, 2.比如你建立了两个文件夹,分别为router,router2,里面都有一个index.js,其中router为主文件夹,在里面的index.js中引入外部配置的路由信息 3.在router2中的…

1.前言 在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示).虽然实际用处不大,但是对用户来说,有个进度条会大大减轻用户的等待压力,提升用户体验.本篇文章就来教你如何在Vue项目中实现这样的进度条. 2.安装Nprogress 虽然我们也可以自己手动实现这样的功能,但是,nprogress.js已经帮我们把进度条的样式呀,功能呀都已经封装的很好了,既然有现成的轮子,我们就直接使用轮子就好啦! npm inst…

最近有个Vue项目中会偶尔出现Loading chunk {n} failed的报错,报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败.但是这个问题的根本原因没有被找到,因为这个问题出现的偶然性太高了,而且有的手机上会出现,有的不会,用模拟器不会出现,用真机又会出现,不知道是网络原因还是webpack的bug.在github.stackoverflow等各种地方也找不到原因和解决方案,这是github上关于这个问题的讨论: Loading ch…

在写基于vue-cli的vue项目时,如果直接引入styl文件,会报错,需要安装stylus.stylus-loader依赖以及别名配置. 1.下载安装stylus.stylus-loader,推荐使用cnpm下载,速度快 cnpm install stylus stylus-loader 2.配置别名 配置别名是为了引用的时候方便,不容易出错,打开文件根目录下 build >webpack.base.conf.js resolve: { extensions: ['.js', '.vue',…

路由守卫的意义就相当于一个保安一样,作用很大,在实际的项目中运用也是不少,也就是当客户在登陆自己账号的时候,有可能存在客户有啥事的时候,自己后台或者pc的关闭全部浏览器,没有点击退出登录,或者在退出登录以后,部分客户收藏了登录过后的链接地址,为了不需要登录就直接进入软件或者页面,这样就会存在部分隐患,所以在实际项目中,公司也会让你考虑到这一点.所以就需要记录一下. 这里我们使用的是router.beforeEach()的方法 一:这个方法含有3个参数 1.1:第一个to(我理解的去哪里) 1.2…

在项目中遇到了两种不同情况, 1.get请求导出文件,实现起来相对简单 // 导出数据 exportData() { window.location.href = `/oes-content-manage/role/export-roles?size=${this.totalCount}&sidx=roleName&sord=desc&roleId=${this.searchForm.roleId}`; }, 直接把要传递的参数拼接在请求地址url后面即可 2.post请求方式 /…

以前从来没接触过前端要求显示PDF文件,一时之间有点懵逼,不知从哪下手啊... 无奈之下,去找度娘,方法还不少,iframe  embed  object这些标签就可以, 可是拿过来做个demo一试,并没有什么卵用,网页中可以显示pdf,但是页面上就是出不来,反正我是没有试成功:还有PDFObject    PDF.js  这两个吧,PDFObject操作起来简单一些,PDF.js就稍微麻烦一些,不过基于jquery的不是我想要的效果,有兴趣的同学可以研究一下,貌似这个PDF.js很强大,附上链…

介绍 路由:控制组件之间的跳转,不会实现请求.不用页面刷新,直接跳转-切换组件>>> 安装 本地环境安装路由插件vue-router:    cnpm install vue-router --save-dev *没有安装淘宝镜像的可以将 cnpm 替换成 npm 想要安装的可以看这篇文章http://www.cnblogs.com/padding1015/p/7162024.html,(打开搜索  镜像  即可跳转到对应位置) 配置 两种配置方法:在main.js中 || 在src/r…

例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步骤二:在src/assets下面新建css.js.less.fonts文件夹,并放入对应文件. 将bootstrap.css放入css目录下,bootstrap.min.js放入js文件下,fonts字体放入fonts目录下 步骤三:安装js依赖 cnpm install jquery --save…

参考的网址:https://blog.csdn.net/weixin_34353714/article/details/86958742 不为其他,就为了记录一下,方便以后查看: 第一种方法: 1.首先在http.js中:定义一个变量context用来接收vue,再定一个initVue方法传入的参数是vue,并导出这个方法. import axios from 'axios' const TIME_OUT_MS = 60 * 1000 // 默认请求超时时间 let context = null…