前端老大们求助一个静态项目转 vue 版本问题

2019-08-19 09:54:36 +08:00
 imherer

我是一名后端,前端半吊子,最近有个项目是将一个静态的 web 项目转成 vue 版本

这个项目引用了大量的第三方 js 和 css ( bootstrap、jQuery、以及很多 jQuery 插件等)

我一开始是想把这些 js 全部转成 vue 版本的,但是发现很多在 npm 上没有,以及要改的东西太多,于是就直接在 index.html 里引用了它用到的所有 js 和 css,然后基本上也没什么问题,能正常运行

因为该项目首页的轮播图以及很多排版效果,都是通过 js 来实现的,看了下源代码主要是在 $(window).on('load'$(document).ready 这个两个函数里

现在的问题第一次加载的时候各种排版及效果正常,当点到其他页面再通过 router-link 回来或者是浏览器的 back 回来排版就不正常了

我现在将首页的链接的 router-link 改成了 a 标签 href="/",相当于每次进来都直接刷新,可以解决这个问题

但是浏览器的 back 不知道怎么解决?

其他页面我看了下也有类似的问题,不过代码量都很小,我可以直接将其改成 vue 版本,唯独首页的太多了

4987 次点击
所在节点    程序员
29 条回复
a4854857
2019-08-19 10:05:13 +08:00
换事件
不用 jq 的事件。用 vue 的 mount 就好了吧
hitaoguo
2019-08-19 10:05:39 +08:00
写到 mounted 里面
imherer
2019-08-19 10:11:23 +08:00
@a4854857
@hitaoguo 写到 mounted 里就是我说的改成 vue 版了,引用的好多库在 npm 上没有,而且要改的东西太多了
deleteDB
2019-08-19 10:12:55 +08:00
用了 vue-router 的话 应该是 actived 吧
caryqy
2019-08-19 10:18:12 +08:00
keep-alive ?
wednesdayco
2019-08-19 10:21:39 +08:00
这么转 vue 的意义何在?
deleteDB
2019-08-19 10:30:04 +08:00
@wednesdayco 可能是 招不到人吧
Yumwey
2019-08-19 10:30:29 +08:00
为什么一定要改 vue?
imherer
2019-08-19 10:31:03 +08:00
@caryqy 不是 keep-alive,没有用 keep-alive,是因为它的代码都写在了$(document).ready 和 load 里
imherer
2019-08-19 10:32:07 +08:00
@wednesdayco
@Yumwey
之前是静态的,现在想把里面的内容写在数据库里,可以通过后台,随时改变页面内容。
wednesdayco
2019-08-19 10:44:56 +08:00
@imherer 动态不动态,跟用不用 vue 之类的没关系啊。这么用 vue 肯定是有问题的= =。如果只想简单粗暴的解决浏览器的 back 问题的话,不用 vue router 就行了
treblex
2019-08-19 10:46:27 +08:00
import $ from 'Jquery' jq 也挺好的
imherer
2019-08-19 10:49:22 +08:00
@wednesdayco 确实不应该这么来用 vue,但是要在原有的项目上加载后端数据,用原生 js 写起来肯定没 vue 快,也不方便……所以就想着改成 vue 版本
imherer
2019-08-19 10:50:13 +08:00
@suke971219 jQuery 问题倒不大,主要问题是还用了好多 jQuery 插件,这些插件在 npm 上没有😒
strugglexiang
2019-08-19 11:15:39 +08:00
@imherer 排版有问题,要看具体代码才好解决
a4854857
2019-08-19 11:35:49 +08:00
意思就是你首页没有使用 vue 么。如果首页也使用了 vue 的话,在 index.html 里面引用了其他的 js 和 css。插件总是要初始化的吧,直接在 vue 生命周期里面初始化就好了吧。。
f056917
2019-08-19 11:45:08 +08:00
遇到这种问题我都是建议重写
enjoyCoding
2019-08-19 11:47:14 +08:00
建议重写或不改用 vue, 如果都改成这样了 建议在 destoryed 里面把时间清除一下 removeEventListener
qiandali
2019-08-19 11:49:28 +08:00
重构会不会好点,至少改的不会那么难受
galikeoy
2019-08-19 11:53:46 +08:00
npm 没有的库,可以放到一起做静态资源啊,路径映射引用打包?来自菜鸡前端

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/593026

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX