c页面的路径为,可以看到传了一个参数id=1,并且就算刷新页面id也还会存在。此时在c页面可以通过id来获取对应的详情数据,获取id的方式是获取传来的参数,url会显示为,且刷新页面参数也会存在。对于传单个参数,这种方式实现了我们的需求,但是没法传多个参数。除非定义路由的时候,定义为’/detail/:id/:param1/param2/param3’,这样限制死了,必须要这样传参数。且个人角度看来,这种的url不如来的优雅。
上面的这个报错大家都不会陌生,报错是说没有访问权限(跨域问题)。本地开发项目请求服务器接口的时候,因为客户端的同源策略,导致了跨域的问题。
vue-cli初始化的项目,在配置文件中提供了proxyTable来解决本地开发的跨域问题。config文件的index.js文件中,找到proxyTable选项,进行如下配置:
例如请求接口: ==>
这个时候就可以在本地环境请求后台接口了。
axios的封装,主要是用来帮我们进行请求的拦截和响应的拦截。
在请求的拦截中我们可以携带userToken,post请求头、qs对post提交数据的序列化等。
在响应的拦截中,我们可以进行根据状态码来进行错误的统一处理等等。
axios接口的统一管理,是做项目时必须的流程。这样可以方便我们管理我们的接口,在接口更新时我们不必再返回到我们的业务代码中去修改接口。
由于这里内容稍微多一些,日后放在另一篇文章,更新后这里会送上链接。
为什么要使用按需加载的方式而不是一次性全部引入,原因就不多说了。这里以vant的按需加载为例,演示vue中ui库怎样进行按需加载:
- 安装:
- 安装babel-plugin-import插件使其按需加载:
- 在 .babelrc文件中中添加插件配置 :
- 在main.js中按需加载你需要的插件:
- 使用组件:
- 最后在在页面中使用:
补充:出来vant库外,像antiUi、elementUi等,很多ui库都支持按需加载,可以去看文档,上面都会有提到。基本都是通过安装babel-plugin-import插件来支持按需加载的,使用方式与vant的如出一辙,可以去用一下。
我在a页面写一个定时,让他每秒钟打印一个1,然后跳转到b页面,此时可以看到,定时器依然在执行。这样是非常消耗性能的。如下图所示:
解决思路很简单:
首先我在data函数里面进行定义定时器名称:
然后使用的定时器的这样使用
最后在beforeDestroy()生命周期内清除定时器:
我们在做手机端时,适配是必须要处理的一个问题。例如,我们处理适配的方案就是通过写一个rem.js,原理很简单,就是根据网页尺寸计算html的font-size大小,基本上小伙伴们都知道,这里直接附上代码,不多做介绍。
这里说下怎么引入的问题,很简单。在main.js中,直接导入即可。import的路径根据你的文件路径去填写。
在我们使用的很多ui库(vant、antiUi、elementUi等)中,都有轮播组件,对于普通的轮播效果足够了。但是,某些时候,我们的轮播效果可能比较炫,这时候ui库中的轮播可能就有些力不从心了。当然,如果技术和时间上都还可以的话,可以自己造个比较炫的轮子。
这里我说一下vue-awesome-swiper这个轮播组件,真的非常强大,基本可以满足我们的轮播需求。swiper相信很多人都用过,很好用,也很方便我们二次开发,定制我们需要的轮播效果。vue-awesome-swiper组件实质上给予swiper的,或者说就是能在vue中跑的swiper。下面说下怎么使用:
- 安装
- 在组件中使用的方法,全局使用意义不大:
附上文档:npm文档,swiper3.0/4.0文档,更多用法,请参考文档说明。
项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。 而生成的.map后缀的文件,就可以像未加密的代码一样,准确的输出是哪一行哪一列有错可以通过设置来不生成该类文件。但是我们在生成环境是不需要.map文件的,所以可以在打包时不生成这些文件:在config/index.js文件中,设置,就可以不生成.map文件
开发移动端项目,点击事件会有300ms延迟的问题。至于为什么会有这个问题,请自行百度即可。这里只说下常见的解决思路,不管vue项目还是jq项目,都可以使用fastClick解决。
安装 :
在main.js中引入和初始化: