-
让品牌有温度、有情感
专注品牌策划15年
vue开发项目遇到的难点（vue开发中遇到的难点）
发布时间：2023-04-08 08:37:12
稿源：
创意岭 阅读：
83
大家好！今天让创意岭的小编来大家介绍下关于vue开发项目遇到的难点的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。
开始之前先推荐一个非常厉害的Ai人工智能工具，一键生成原创文章、方案、文案、工作计划、工作报告、论文、代码、作文、做题和对话答疑等等
只需要输入关键词，就能返回你想要的内容，越精准，写出的就越详细，有微信小程序端、在线网页版、PC客户端
创意岭作为行业内优秀的企业，服务客户遍布全球各地，如需了解SEO相关业务请拨打电话175-8598-2043，或添加微信：1454722008
本文目录:
一、Vue2.x仿网易云音乐项目问题记录（1）
近期在做仿网易云音乐的项目，api用到GitHub上
NeteaseCloudMusicApi项目。
技术栈：Vue2.x，elementUI，Vuex，Vue Router
其中遇到部分问题特记录下：
如果想要修改elementUI，可以使用全局css。并在main.js中import。这样自定义的样式会作用的到对应的组件上例如
特别注意，class的名字一定要与elementUI的组件名一致，具体原因看下组件源码样式class就是组件名称。如果不想全局引用。可以在vue文件中，添加/deep/：
这样就可以在vue文件更改对应样式。
absolute和relative的区别
absoleute绝对定位的意思是说，它的定位不受父元素中其他元素的影响
relative相对定位，就是会受到父元素中其他元素影响
其中又left，right，top，bottom等控制元素所在位置。
对于absolute状况下：
left是，子控件，距离包含他的父控件的左侧的位置多少。类似padding-left。
right，top，bottom同上
其中，如果想做动态的布局，元素块随着窗口的大小改变而改变，可以这样用。
不设置width，设置父，子块元素的left，right，top， bottom即可。如果父级设置，子元素也要设置，不然对应效果不会显示的。
具体效果自行脑补。
ps：
会不定期的更新vue项目开发中遇到的部分坑吧。
二、vue项目 处理addEventListener的坑
最近项目中遇到一个问题，让我很是费解。就是同一个页面在首次进入并且对页面进行一些操作时并没有什么问题。数据的交互及保存操作也能完成。但当次页面重复几次进入并操作时，页面就会卡死，cpu的占用也急剧升高。在排查了一天之后终于找到了原因：
原来是这个页面之中注册了一个addEventListener事件，用来监听document的点击事件，从而对用户的点击做出一些反馈。
乍看这里是没有什么问题的，但我疏忽的是光注册了这个监听事件，没有对这个事件做到“有始有终”。这是对document的监听事件是一个全局的操作，如果没有手动的去取消这个监听那么它的监听机制也就一直存在着，这样每次进入这个页面也就意味着都会增加一次对它的监听。多次之后自然页面也就会卡死了。发现了问题，那么解决方案也就很简单了，只要在页面被注销之前手动清除这个监听事件也就可以了：
这之后再进行多次的操作该页面也就不会有这样的问题了~
三、前端项目开发<Vue>
说明： 在项目开发中，在一个js或css文件中如果导入其他目录下的相关文件，就需要通过如下方式,
示例：
但如果每次都导入同一目录下的文件，会比较麻烦，就可以通过设置简写路径达到同样的导入效果
配置方法如下，其中key值为自定义的简写名称（如stylePath），value值为配置的路径
示例：
在需要跳转的元素外包裹一层 <router-link></router-link> ，使用 to 语法即可跳转到指定的页面中
实际上，HTML会将 router-link 渲染成 <a> 标签
这就会导致被 router-link 包裹的元素中的文字显示成 <a> 默认的蓝色样式，可通过如下方式解决：
使用tag将 router-link 标记为 li 标签，这样既保证了 ul 中的子元素为 li ，又保证了html在渲染的时候，不会讲 router-link 渲染为 a 标签
如果某一页面多次被访问，并且其中的数据基本保持不变，则可以使用页面缓存的技术：
注： 当页面被缓存后，生命周期钩子 mounted 方法则只会在第一次进入的时候，执行一次，就不会再执行了。但生命周期钩子方法 activated 方法会每次调用
但如果页面的数据根据传过来的参数来判定是否需要缓存和刷新数据，则可以通过生命周期的钩子 activated 来实现数据的刷新
如果通过 keep-alive 进行页面的缓存，会将其包裹下的路由子页面都会被缓存，假如其中的某一子页面不需要被缓存，则可以通过 exclude 语法将不需要缓存的页面隔离出去，保证其每次都会重新加载请求：
注：
当在一个页面拖动到底部的某个位置的时候，再点击其中的一个元素进入到下一个页面，则进入的这个页面也会被拖到相同的位置，这就造成了多页面的拖动影响
在路由配置中，加入一项 scrollBescrollBehavior ，即每次进行路由切换的时候，让页面的初始位置为指定的x和y值
前端项目通过webpage 启动的，它不支持IP的形式进行页面访问，所以需要修改项目的默认配置项
在项目的根目录下的package.json文件中，进行如下配置：
注： 主页增加了 --host 0.0.0.0
在某些浏览器和手机上不支持一些es6和vue的新特性，就会出现兼容性的问题
通过使用第三方框架库 babel-polyfill 来解决兼容性问题
参考文章： https://blog.csdn.net/crazyfeeling/article/details/70241285
说明：
四、Vue项目，登录成功，但是请求其他接口报错的问题
在Vue项目开发中，遇到一个很奇怪的问题，就是登录成功，已经返回200了，然后跳转到项目首页，去请求其他接口的时候，却显示没有权限，起初有这个问题的时候，我只要删除了使用命令：
生成的 MyChromeDevUserData 文件夹就可以的，但是显示不行了，真是奇怪了。
在Chrome中访问 chrome://flags/ ，搜索SameSite并设置为disabled即可。
谷歌浏览器接口请求cookie突然无法携带的问题
Chrome 80跨域cookie无法携带
新版本chrome浏览器带来的跨域请求cookie丢失问题
以上就是关于vue开发项目遇到的难点相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。
推荐阅读：
赣公网安备 50019002502384号
