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

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

  •  
  •   imherer · 2019-08-19 09:54:36 +08:00 · 4975 次点击
    这是一个创建于 1908 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    最简单的办法是给 vue 文件的 style 标签里加 scoped
    agdhole
        26
    agdhole  
       2019-08-19 15:28:29 +08:00
    vue 全部重写,动画效果原生撸就完事了
    lizz666
        27
    lizz666  
       2019-08-19 15:52:30 +08:00
    你的是不是 jsp 啊。。。
    duan602728596
        28
    duan602728596  
       2019-08-19 18:05:42 +08:00 via iPhone
    重写吧,为了你好,也为了后来接手的人好
    luozic
        29
    luozic  
       2019-08-20 22:31:00 +08:00
    重写,除非这个东西用几次就扔掉了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5356 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 07:11 · PVG 15:11 · LAX 23:11 · JFK 02:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.