vue 项目难点_Vue 项目里戳中你痛点的问题及解决办法

<div style="font-size:16px;">
一、先总结出如下几点vue项目开发中常见的问题及解决办法。
列表进入详情页的传参问题。
本地开发环境请求服务器接口跨域的问题
API接口的统一管理
UI库的按需加载
定时器问题
rem文件的导入问题
Vue-Awesome-Swiper基本能解决你所有的轮播需求
打包后生成很大的.map文件的问题
fastClick的300ms延迟解决方案
组件中写选项的顺序
路由懒加载(也叫延迟加载)
开启gzip压缩代码
详情页返回列表页缓存数据和浏览位置、其他页面进入列表页刷洗数据的实践
css的scoped私有作用域和深度选择器
==========================================
(1)列表进入详情页的传参问题。
例如商品列表页面前往商品详情页面，需要传一个商品id;
前往detail页面
c页面的路径为http://localhost:8080/#/detail?id=1，可以看到传了一个参数id=1，并且就算刷新页面id也还会存在。此时在c页面可以通过id来获取对应的详情数据，获取id的方式是this.$route.query.id
补充一下其他两种传参：
如果传参通过前往Detail页面的话，这种传参方式，params中的参数不会出现在url中，所以一旦刷新页面，id就不存在了，很懊恼有木有！！！刚开始我就在这里纠结了好一阵~~实际是因为没有发现更好的办法，被自己蠢到了！！！
还有一种传参的方式：动态路由传参。动态路由通过在路由文件中定义路由：{ path: '/detail/:id', name: 'Detail', component: Detail }，就是这里/detail/:id，然后在页面进行传参前往d页面,在详情页可以通过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来的优雅。
(2)本地开发环境请求服务器接口跨域的问题
<img alt="" src="">
上面的这个报错大家都不会陌生，报错是说没有访问权限(跨域问题)。本地开发项目请求服务器接口的时候，因为客户端的同源策略，导致了跨域的问题。
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
这个时候就可以在本地环境请求后台接口了。
(3)axios的封装和API接口的统一管理:
axios的封装，主要是用来帮我们进行请求的拦截和响应的拦截。
在请求的拦截中我们可以携带userToken，post请求头、qs对post提交数据的序列化等。
在响应的拦截中，我们可以进行根据状态码来进行错误的统一处理等等。
axios接口的统一管理，是做项目时必须的流程。这样可以方便我们管理我们的接口，在接口更新时我们不必再返回到我们的业务代码中去修改接口。
由于这里内容稍微多一些，日后放在另一篇文章，更新后这里会送上链接。
(4)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.