首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX  ›  程序员

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

  •  
  •   imherer · 61 天前 · 2070 次点击
    这是一个创建于 61 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我是一名后端,前端半吊子,最近有个项目是将一个静态的 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 版本,唯独首页的太多了

    29 回复  |  直到 2019-08-20 22:31:00 +08:00
        1
    a4854857   61 天前   ♥ 1
    换事件
    不用 jq 的事件。用 vue 的 mount 就好了吧
        2
    hitaoguo   61 天前   ♥ 1
    写到 mounted 里面
        3
    imherer   61 天前
    @a4854857
    @hitaoguo 写到 mounted 里就是我说的改成 vue 版了,引用的好多库在 npm 上没有,而且要改的东西太多了
        4
    deleteDB   61 天前   ♥ 1
    用了 vue-router 的话 应该是 actived 吧
        5
    caryqy   61 天前   ♥ 1
    keep-alive ?
        6
    wednesdayco   61 天前
    这么转 vue 的意义何在?
        7
    deleteDB   61 天前
    @wednesdayco 可能是 招不到人吧
        8
    Yumwey   61 天前
    为什么一定要改 vue?
        9
    imherer   61 天前
    @caryqy 不是 keep-alive,没有用 keep-alive,是因为它的代码都写在了$(document).ready 和 load 里
        10
    imherer   61 天前
    @wednesdayco
    @Yumwey
    之前是静态的,现在想把里面的内容写在数据库里,可以通过后台,随时改变页面内容。
        11
    wednesdayco   61 天前   ♥ 1
    @imherer 动态不动态,跟用不用 vue 之类的没关系啊。这么用 vue 肯定是有问题的= =。如果只想简单粗暴的解决浏览器的 back 问题的话,不用 vue router 就行了
        12
    suke971219   61 天前   ♥ 1
    import $ from 'Jquery' jq 也挺好的
        13
    imherer   61 天前
    @wednesdayco 确实不应该这么来用 vue,但是要在原有的项目上加载后端数据,用原生 js 写起来肯定没 vue 快,也不方便……所以就想着改成 vue 版本
        14
    imherer   61 天前
    @suke971219 jQuery 问题倒不大,主要问题是还用了好多 jQuery 插件,这些插件在 npm 上没有😒
        15
    strugglexiang   61 天前   ♥ 1
    @imherer 排版有问题,要看具体代码才好解决
        16
    a4854857   61 天前   ♥ 1
    意思就是你首页没有使用 vue 么。如果首页也使用了 vue 的话,在 index.html 里面引用了其他的 js 和 css。插件总是要初始化的吧,直接在 vue 生命周期里面初始化就好了吧。。
        17
    f056917   61 天前   ♥ 1
    遇到这种问题我都是建议重写
        18
    enjoyCoding   61 天前   ♥ 1
    建议重写或不改用 vue, 如果都改成这样了 建议在 destoryed 里面把时间清除一下 removeEventListener
        19
    qiandali   61 天前
    重构会不会好点,至少改的不会那么难受
        20
    galikeoy   61 天前   ♥ 1
    npm 没有的库,可以放到一起做静态资源啊,路径映射引用打包?来自菜鸡前端
        21
    flxxy   61 天前 via Android   ♥ 1
    @imherer 都 jquery 了为什么不试试$.ajax 呢
        22
    galikeoy   61 天前
    不用 jq 的事件,插件估计也用不了吧,npm 库没有代替的就手写吧。。。
        23
    mrcotter2013   61 天前 via Android
    @galikeoy 这个可以举个具体的例子吗?怎么做?
        24
    galikeoy   61 天前
    @mrcotter2013 #23 在 webpack 中配置 resolve.alias,
        25
    redbuck   61 天前
    排版不正常是 css 污染了吧

    不同页面的 css 类名有冲突,以前是多页跳来跳去没关系,所以没有问题.
    然后现在换了前端路由,页面不会重新加载,样式全部是 style 塞到头部去了,导致回到首页的时候样式就错了.

    最简单的办法是给 vue 文件的 style 标签里加 scoped
        26
    agdhole   61 天前
    vue 全部重写,动画效果原生撸就完事了
        27
    lizz666   61 天前
    你的是不是 jsp 啊。。。
        28
    duan602728596   61 天前 via iPhone
    重写吧,为了你好,也为了后来接手的人好
        29
    luozic   60 天前
    重写,除非这个东西用几次就扔掉了。
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1487 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 25ms · UTC 00:49 · PVG 08:49 · LAX 17:49 · JFK 20:49
    ♥ Do have faith in what you're doing.