列表进入详情页的传参问题。

例如商品列表页面前往商品详情页面,需要传一个商品id;

<router-link :to="{path: 'detail', query: {id: 1}}">前往c页面</router-link>

c页面的路径为http://localhost:8080/#/detail?id=1,可以看到传了一个参数id=1,并且就算刷新页面id也还会存在。此时在c页面可以通过id来获取对应的详情数据,获取id的方式是this.$route.query.id

补充一下其他两种传参:

  • 如果传参通过<router-link :to="{name: 'Detail', params: {id:1}}">前往Detail页面</router-link>的话,这种传参方式,params中的参数不会出现在url中,所以一旦刷新页面,id就不存在了,很懊恼有木有!!!刚开始我就在这里纠结了好一阵~~实际是因为没有发现更好的办法,被自己蠢到了!!!
  • 还有一种传参的方式:动态路由传参。动态路由通过在路由文件中定义路由:{ path: '/detail/:id', name: 'Detail', component: Detail },就是这里/detail/:id,然后在页面进行传参<router-link to="/detail/123">前往d页面</router-link>,在详情页可以通过this.$route.params.id获取传来的参数,url会显示为http://localhost:8080/#/detail/123,且刷新页面参数也会存在。对于传单个参数,这种方式实现了我们的需求,但是没法传多个参数。除非定义路由的时候,定义为'/detail/:id/:param1/param2/param3',这样限制死了,必须要这样传参数。且个人角度看来,这种/detail/1/123/1d的url不如detail?id=1&user=123&identity=1来的优雅。

本地开发环境请求服务器接口跨域的问题

上面的这个报错大家都不会陌生,报错是说没有访问权限(跨域问题)。本地开发项目请求服务器接口的时候,因为客户端的同源策略,导致了跨域的问题。

vue-cli初始化的项目,在配置文件中提供了proxyTable来解决本地开发的跨域问题。config文件的index.js文件中,找到proxyTable选项,进行如下配置:

proxyTable: {
// 用‘/api’开头,代理所有请求到目标服务器
'/api': {
target: 'http://jsonplaceholder.typicode.com', // 接口域名
changeOrigin: true, // 是否启用跨域
pathRewrite: { //
'^/api': ''
}
}
}

例如请求接口:/api/posts/1 ==>http://jsonplaceholder.typicode.com/posts/1

这个时候就可以在本地环境请求后台接口了。

axios的封装和API接口的统一管理:

axios的封装,主要是用来帮我们进行请求的拦截和响应的拦截。

在请求的拦截中我们可以携带userToken,post请求头、qs对post提交数据的序列化等。

在响应的拦截中,我们可以进行根据状态码来进行错误的统一处理等等。

axios接口的统一管理,是做项目时必须的流程。这样可以方便我们管理我们的接口,在接口更新时我们不必再返回到我们的业务代码中去修改接口。

由于这里内容稍微多一些,日后放在另一篇文章,更新后这里会送上链接。

UI库的按需加载:

为什么要使用按需加载的方式而不是一次性全部引入,原因就不多说了。这里以vant的按需加载为例,演示vue中ui库怎样进行按需加载:

  • 安装: cnpm i vant -S
  • 安装babel-plugin-import插件使其按需加载:  cnpm i babel-plugin-import -D
  • 在 .babelrc文件中中添加插件配置 :
libraryDirectory { 

    "plugins": [
// 这里是原来的代码部分
// ………… // 这里是要我们配置的代码
["import",
{
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}
]
]
}
  • 在main.js中按需加载你需要的插件:

// 按需引入vant组件

import {
DatetimePicker,
Button,
List
} from 'vant';
  • 使用组件:
// 使用vant组件
Vue.use(DatetimePicker)
.use(Button)
.use(List);
  • 最后在在页面中使用:
<van-button type="primary">按钮</van-button>

补充:出来vant库外,像antiUi、elementUi等,很多ui库都支持按需加载,可以去看文档,上面都会有提到。基本都是通过安装babel-plugin-import插件来支持按需加载的,使用方式与vant的如出一辙,可以去用一下。

定时器问题:

我在a页面写一个定时,让他每秒钟打印一个1,然后跳转到b页面,此时可以看到,定时器依然在执行。这样是非常消耗性能的。如下图所示:

解决思路很简单:

首先我在data函数里面进行定义定时器名称:

data() {
return {
timer: null // 定时器名称
}
},

然后使用的定时器的这样使用this.timer = setInterval(……………………)

最后在beforeDestroy()生命周期内清除定时器:

beforeDestroy() {
clearInterval(this.timer);
this.timer = null;
}

rem文件的导入问题:

我们在做手机端时,适配是必须要处理的一个问题。例如,我们处理适配的方案就是通过写一个rem.js,原理很简单,就是根据网页尺寸计算html的font-size大小,基本上小伙伴们都知道,这里直接附上代码,不多做介绍。

;(function(c,d){var e=document.documentElement||document.body,a="orientationchange" in window?"orientationchange":"resize",b=function(){var f=e.clientWidth;e.style.fontSize=(f>=750)?"100px":100*(f/750)+"px"};b();c.addEventListener(a,b,false)})(window);

这里说下怎么引入的问题,很简单。在main.js中,直接import './config/rem'导入即可。import的路径根据你的文件路径去填写。

Vue-Awesome-Swiper基本能解决你所有的轮播需求

在我们使用的很多ui库(vant、antiUi、elementUi等)中,都有轮播组件,对于普通的轮播效果足够了。但是,某些时候,我们的轮播效果可能比较炫,这时候ui库中的轮播可能就有些力不从心了。当然,如果技术和时间上都还可以的话,可以自己造个比较炫的轮子。

这里我说一下vue-awesome-swiper这个轮播组件,真的非常强大,基本可以满足我们的轮播需求。swiper相信很多人都用过,很好用,也很方便我们二次开发,定制我们需要的轮播效果。vue-awesome-swiper组件实质上给予swiper的,或者说就是能在vue中跑的swiper。下面说下怎么使用:

  • 安装 cnpm install vue-awesome-swiper --save
  • 在组件中使用的方法,全局使用意义不大:
// 引入组件
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper' // 在components中注册组件
components: {
swiper,
swiperSlide
} // template中使用轮播
// ref是当前轮播
// callback是回调
// 更多参数用法,请参考文档
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<!-- slides -->
<swiper-slide><div class="item">1</div></swiper-slide>
<swiper-slide><div class="item">2</div></swiper-slide>
<swiper-slide><div class="item">3</div></swiper-slide>
<swiper-slide><div class="item">4</div></swiper-slide>
<swiper-slide><div class="item">5</div></swiper-slide>
<swiper-slide><div class="item">6</div></swiper-slide>
<swiper-slide><div class="item">7</div></swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
// 参数要写在data中
data() {
return {
// swiper轮播的参数
swiperOption: {
// 滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
// 上一张,下一张
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 其他参数…………
}
}
},

打包后生成很大的.map文件的问题

项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。 而生成的.map后缀的文件,就可以像未加密的代码一样,准确的输出是哪一行哪一列有错可以通过设置来不生成该类文件。但是我们在生成环境是不需要.map文件的,所以可以在打包时不生成这些文件:在config/index.js文件中,设置productionSourceMap: false,就可以不生成.map文件

fastClick的300ms延迟解决方案

开发移动端项目,点击事件会有300ms延迟的问题。至于为什么会有这个问题,请自行百度即可。这里只说下常见的解决思路,不管vue项目还是jq项目,都可以使用fastClick解决。

安装 :

cnpm install fastclick -S

在main.js中引入和初始化:

import FastClick from 'fastclick'; // 引入插件
FastClick.attach(document.body); // 使用 fastclick

组件中写选项的顺序

export default {
name: '', mixins: [], components: {}, props: {}, data() {}, computed: {}, watch: {}, created() {}, mounted() {}, destroyed() {}, methods: {}
};

查看打包后各文件的体积,把你快速定位大文件

如果你是vue-cli初始化的项目,会默认安装webpack-bundle-analyzer插件,该插件可以帮助我们查看项目的体积结构对比和项目中用到的所有依赖。也可以直观看到各个模块体积在整个项目中的占比。很霸道有木有~~

npm run build --report // 直接运行,然后在浏览器打开http://127.0.0.1:8888/即可查看

记得运行的时候先把之前npm run dev开启的本地关掉

路由懒加载(也叫延迟加载)

路由懒加载可以帮我们在进入首屏时不用加载过度的资源,从而减少首屏加载速度。

路由文件中,

非懒加载写法:

import Index from '@/page/index/index';
export default new Router({
routes: [
{
path: '/',
name: 'Index',
component: Index
}
]
})
路由懒加载写法:
export default new Router({
routes: [
{
path: '/',
name: 'Index',
component: resolve => require(['@/view/index/index'], resolve)
}
]
})

开启gzip压缩代码

spa这种单页应用,首屏由于一次性加载所有资源,所有首屏加载速度很慢。解决这个问题非常有效的手段之一就是前后端开启gizp(其他还有缓存、路由懒加载等等)。gizp其实就是帮我们减少文件体积,能压缩到30%左右,即100k的文件gizp后大约只有30k。

vue-cli初始化的项目中,是默认有此配置的,只需要开启即可。但是需要先安装插件:

cnpm i compression-webpack-plugin

然后在config/index.js中开启即可:

build: {
………………
productionGzip: true, // false不开启gizp,true开启
………………
}

现在打包的时候,除了会生成之前的文件,还是生成.gz结束的gzip过后的文件。

**注意:这里前端进行的打包时的gzip,但是还需要后台服务器的配置。具体实现就是如果客户端支持gzip,那么后台后返回gzip后的文件,如果不支持就返回正常没有gzip的文件。

详情页返回列表页缓存数据和浏览位置、其他页面进入列表页刷新数据的实践

这样一个场景:有三个页面,首页/或者搜索页,商品分类页面,商品详情页。我们希望从首页进入分类页面时,分类页面要刷新数据,从分类进入详情页再返回到分类页面时,我们不希望刷新,我们希望此时的分类页面能够缓存已加载的数据和自动保存用户上次浏览的位置。之前在百度搜索的基本都是keep-alive处理的,但是总有那么一些不完善,所以自己在总结了之后进行了如下的实践。

解决这种场景需求我们可以通过vue提供的keepAlive属性。这里直接送上另一篇处理这个问题的传送门

CSS的coped私有作用域和深度选择器

大家都知道当 <style>标签有 scoped属性时,它的 CSS 只作用于当前组件中的元素。那么他是怎么实现的呢,大家看一下编译前后的代码就明白了:

编译前:

<style scoped>

.example {
color: red;
}
</style>

编译后:

<style>
.example[data-v-f3f3eg9] {
color: red;
}

看完你肯定就会明白了,其实是在你写的组件的样式,添加了一个属性而已,这样就实现了所谓的私有作用域。但是也会有弊端,考虑到浏览器渲染各种 CSS 选择器的方式,当 p { color: red }设置了作用域时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之,比如 .example { color: red },性能影响就会消除。所以,在你的样式里,进来避免直接使用标签,取而代之的你可以给标签起个class名。

如果你希望 scoped样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>>操作符:

<style scoped>
.parent >>> .child { /* ... */ }
</style>

上述代码将会编译成:

.parent[data-v-f3f3eg9] .child {
/* ... */
}

而对于less或者sass等预编译,是不支持>>>操作符的,可以使用/deep/来替换>>>操作符,例如:.parent /deep/ .child { /* ... */ }

vue.js开发SPA常见问题及解决方法的更多相关文章

  1. vue 移动端/PC常见问题及解决方法

    一.判断手机/PC浏览器语言 navigator.language // 返回语言代码 语言代码文档: http://www.lingoes.cn/zh/translator/langcode.htm ...

  2. Delphi XE8中开发DataSnap程序常见问题和解决方法 (二)想对DBExpress的TSQLDataSet写对数据库操作的SQL语句出错了!

    当我们搞定DataSnap后,我们进入客户端程序开发阶段了,我们建立了客户端模块后,打算按照刚才开发服务器的步骤开发客户端程序,随后加入了DBExpress的TSQLDataSet,设定数据库连接后, ...

  3. 用Vue.js开发微信小程序:开源框架mpvue解析

    前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...

  4. MPVUE - 使用vue.js开发微信小程序

    MPVUE - 使用vue.js开发微信小程序 什么是mpvue? mpvue 是美团点评前端团队开源的一款使用 Vue.js 开发微信小程序的前端框架.框架提供了完整的 Vue.js 开发体验,开发 ...

  5. Mac安装vue.js开发环境

    Mac安装vue.js开发环境 DannyHooDanny的专栏订阅 一.vue.js开发环境 二.初始化一个vue.js项目 三.vue.js项目打包部署 本来以为在Mac上搭建vue.js的环境挺 ...

  6. 基于 Laravel、Vue.js开发的全新社交系统----ThinkSNS+

    什么是ThinkSNS+ ThinkSNS(简称TS)始于2008年,一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方案,目前最新版本为ThinkSNS+.新的产品名 ...

  7. electron-vue:Vue.js 开发 Electron 桌面应用

    相信很多同学都知道 Electron 可以帮助开发人员使用前端技术开发桌面客户端应用,今天介绍的 electron-vue 框架是一套基于 Vue.js 开发 Electron 桌面应用的脚手架,该项 ...

  8. NHibernate常见问题及解决方法

    NHibernate常见问题及解决方法 曾经学过NHibernate的,但是自从工作到现在快一年了却从未用到过,近来要巩固一下却发现忘记了许多,一个"in expected: <end ...

  9. 使用node+vue.js实现SPA应用,nodevue.jsspa应用

    使用node+vue.js实现SPA应用,nodevue.jsspa应用 http://www.bkjia.com/Javascript/1097617.html https://github.com ...

随机推荐

  1. GO语言练习:channel select 超时机制

    1.代码 2.运行 3.解析 1.代码 package main import ( "time" "fmt" ) func waitFor(ch chan in ...

  2. 解决Windows Server 2003不认U盘或移动硬盘的问题

    1.进入命令提示符环境(也就是DOS) 2.进入DISKPART程序 3.输入AUTOMOUNT ENABLE指令 4.OK,下次USB硬盘接入后就可以像XP 一样自动装载了.

  3. ie F12开发工具出不来

    IE的F12开发人员工具不显示问题: 按下F12之后,开发人员工具在桌面上看不到,但是任务栏里有显示.将鼠标放在任务栏的开发人员工具上,出现一片透明的区域,选中之后却出不来.将鼠标移动到开发人员工具的 ...

  4. Lua Table 操作

    Lua中table类似与C#种的字典,其实就是一个key-value键值对数据结构.来学习下table基本操作 Table的创建 myTable = {} --表名后面使用{}赋值,表示一个空的表 m ...

  5. 【Linux命令】查找命令

    如果你想在当前目录下 查找"hello,world!"字符串,可以这样: grep -rn "hello,world!" *

  6. 苹果笔记本只能上QQ,微信,任何浏览器不能打开网页的问题。

    我的笔记本一共遇到过两次这种情况.第一次是浏览器输入域名打不开网页,而输入ip地址可以打开.这就是DNS服务器的问题,解决方法很简单.在系统偏好设置里面找到网络,然后,点击正在连接的网络的高级选项,选 ...

  7. windows服务器修改登录密码

    1. 右键我的电脑---管理 2. 计算机管理---本地用户和组--用户 3. 右键administrator用户,选择修改密码 4. 点击继续进入下一步 5. 输入新密码并保存

  8. 【转】python 退出程序的方式

    [转]python 退出程序的方式 python程序退出方式[sys.exit() os._exit() os.kill() os.popen(...)] 知乎说明 http://www.zhihu. ...

  9. spring/java ----&gt;记录和整理用过的注解以及spring装配bean方式

    spring注解 @Scope:该注解全限定名称是:org.springframework.context.annotation.Scope.@Scope指定Spring容器如何创建Bean的实例,S ...

  10. Jquery 属性选择器&amp;设置元素属性

    什么是属性选择器呢?感觉理解起来有点难,举个例子就很容易明白了,<div id="ajaxa"></div>这里的id就是属性,这下就很容易理解了, jqu ...