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

怎样把 vuejs 渐进式整合到已经有大量 jQuery 代码的老网站里?

  •  1
     
  •   openplatform · 2018-05-04 05:50:49 +08:00 · 8321 次点击
    这是一个创建于 2399 天前的主题,其中的信息可能已经有所发展或是发生改变。

    vuejs 肯定是要全部取代 jquery 的 但也不可能一夜之间全部改写,几乎不可能。

    所以这个渐进式取代是怎样发生的?有人能给出一些经验之谈么?

    35 条回复    2018-05-05 00:11:32 +08:00
    noe132
        1
    noe132  
       2018-05-04 05:57:02 +08:00 via Android
    在页面引入 vue.js 。
    新的需求用 vue.js 来写就可以了。
    比如假设页面有 2 个独立的 table
    一个是 jq 的
    另一个就用 vue 就可以了。
    具体怎么写参考 vue 如何挂载到指定元素上。
    Junjunya
        2
    Junjunya  
       2018-05-04 08:11:58 +08:00
    码一下 ,看看大神是怎么解决的。
    曾经试过引入页面 vue.js 来写,但是发现这种方法并不好。
    因为直接页面引入 js 的话,感觉 vue.js 只能起到一个模板引擎的作用。
    页面直接引入 vue.js 很难快速找到可以用的插件,
    还是各种 jQuery 的库比较多,而并且如果页面 jQuery 和 vue 混用的话,
    得需要一定 JS 功力,不然对新手来说,难以掌控。

    感觉 vue 还是适合用在 SPA 的场景下
    Lxxyx
        3
    Lxxyx  
       2018-05-04 08:40:21 +08:00 via Android
    1 楼加一,逐渐迁移吧
    murmur
        4
    murmur  
       2018-05-04 08:47:15 +08:00
    先拿 vue 当 template 用
    carlclone
        5
    carlclone  
       2018-05-04 08:53:45 +08:00
    2 楼说的很清晰了
    laogui
        6
    laogui  
       2018-05-04 08:55:31 +08:00 via Android
    我们目前后台系统也是这样搞,不过体验不是很好,原来的页面显示出来 vue 相关的东西才显示。页面都替换的差不多就可以整体换 spa 了,到时候把代码复制粘贴就可以了。
    drackzy
        7
    drackzy  
       2018-05-04 09:16:55 +08:00
    $.ajax 逐渐用 axios 替换
    notreami
        8
    notreami  
       2018-05-04 09:38:11 +08:00   ❤️ 2
    什么时候 Vue 能用其他编程语言后端渲染,并且性能不能比后端模版差太多,我才承认 Vue 可以替代 jquery。
    现在的 Vue 嘛?不过是一个畸形儿,谈不上框架,也谈不上组件。
    hasbug
        9
    hasbug  
       2018-05-04 09:47:14 +08:00
    @notreami 同感,开发其实也挺不顺畅的
    371657110
        10
    371657110  
       2018-05-04 09:59:04 +08:00
    把 vue 当成工具. 就能用了
    oswuhan
        11
    oswuhan  
       2018-05-04 10:13:33 +08:00
    @notreami vue 和 jq 是一类东西?讨论替代问题有意义?

    @openplatform SEO 无关的业务场景用 vue 重构,比如会员系统的注册、登录、资讯系统的站内搜索、电商系统的下单、支付场景、微博系统的内容流等…… SEO 有关的功能,看能力,vue 生态现有的 SSR 方案都有一定的场景限制,用传统的 template 渲染视图反而更合适。
    Torpedo
        12
    Torpedo  
       2018-05-04 10:23:45 +08:00
    一个页面一个页面改不行么?在同一个页面里混合老的和新的代码本身就不是什么明智的选择吧。
    wlwood
        13
    wlwood  
       2018-05-04 10:27:56 +08:00
    新的子模块,用 vue 的模式来开发,就是尽量按 vue 的那套来。老的,现存的,依然用 jquery 维护。比如,要做一个新的功能,想办法把它放在 vue 新模块上来。


    额,后端的人,老喜欢把前端的东西说的一无是处(其实我也是后端人员,tao)。都这年代了,就不用过度强调后端渲染了吧?
    给 seo 的,就给个主页就好了。
    现在不都搞 app,小程序,公众号了么。后端模板渲染那套,对开发产品这类产品来说,真没 vue, react.js 这些来的好。

    昨天隔壁贴,竟然还有个回调地狱的问题。。。表示震惊。。。
    fishliu
        14
    fishliu  
       2018-05-04 10:29:29 +08:00
    页面直接引用 vue,router,vuex 使用
    oswuhan
        15
    oswuhan  
       2018-05-04 10:30:05 +08:00
    再举一个例子,CSS 还不成熟的时候,大家都喜欢使用 table 标签进行网页开发,后来 CSS 发展成熟之后,“ table 布局思想”逐渐被淘汰,并且被认为是一种落后且错误的思想。

    但是,现在网页开发中就完全不使用 table 标签进行网页布局吗?答案肯定是要用的。“ table 布局思想”对于数据表格、信息图表等等视图表现形式有先天优势,这种情况下使用 BFC 或者 FFC 布局思想反而不合适。

    同样的道理,基于模板思想的视图渲染方式对于生成静态视图的业务场景有先天优势,而基于 DOM 思想的视图渲染方式对于生成强交互、多动画、多状态的动态视图的业务场景有先天优势。
    notreami
        16
    notreami  
       2018-05-04 10:38:05 +08:00
    @oswuhan 为什么不先看下提问呢?提问第一句,“ vuejs 肯定是要全部取代 jquery 的”。
    oswuhan
        17
    oswuhan  
       2018-05-04 10:41:16 +08:00
    @notreami 问者无罪,答者有心。如果有冒犯,希望不要太在意,我先道个歉。
    openplatform
        18
    openplatform  
    OP
       2018-05-04 11:26:51 +08:00
    @Torpedo 不错,这个思路挺好
    openplatform
        19
    openplatform  
    OP
       2018-05-04 11:28:11 +08:00
    @notreami
    @oswuhan 二位不要吵嘛。和气生财。共同学习,共同进步。
    zhuweiyou
        20
    zhuweiyou  
       2018-05-04 12:01:28 +08:00
    求求你放过其它同事吧,新需求可以直接上全家桶,旧的就别去改了。改了也只能起到一个模板引擎的作用。
    quietcoder
        21
    quietcoder  
       2018-05-04 12:03:07 +08:00
    提供一个思路:
    新建一个 vue 项目, 然后针对你的老项目挨个页面修改,改完了之后使用 iframe 内嵌到老项目里面,然后一个一个页面处理就好了,等全部处理完了直接替换掉老的项目,这样可以避免出现一些 “交叉感染” 的问题。
    openplatform
        22
    openplatform  
    OP
       2018-05-04 12:05:05 +08:00
    @zhuweiyou 我就是“其他同事”
    lrz0lrz
        23
    lrz0lrz  
       2018-05-04 12:08:05 +08:00
    vue 本来就以『渐进式』为卖点之一,在页面中通过 <script> 引入就行了,与 jQuery 基本没有冲突。
    zhuweiyou
        24
    zhuweiyou  
       2018-05-04 12:13:49 +08:00   ❤️ 1
    @openplatform 哈哈
    MeteorCat
        25
    MeteorCat  
       2018-05-04 12:30:01 +08:00
    没必要,如果 vue.js|jquery.js 一起引入又没必要
    但是去除其中 jquery,你不知道到底整个 ui 框架有没有依赖 jquery[没错,就是 boostrap 有的组件依赖 jquery]
    ferrum
        26
    ferrum  
       2018-05-04 12:40:19 +08:00 via iPhone
    我现在维护的一个项目,原来是用 jQuery 写的,为了提高开发效率,我把 vue、Element UI、axios 等库都通过 script 标签加入到 HTML 内。

    然后每个 HTML 是通过监听 hash change,然后使用 XHR 动态加载到页面的。这样的做法好处是,每个 HTML 页面对应着一个单独的 vue 组件,实际上也是为了提供和 spa 尽可能相似的开发体验。

    题外话,每次遇到这样的问题,都总有一些人冒出来说 jQuery 多好多好,真的烦。我觉得这些人都不是专业的前端开发者,很可能是原来做后端的,平时业余时间偶尔写写前端,觉得前端复杂度也不过如此。你要是做个一个常规的企业后台管理系统,就是左边有侧边栏,顶部有用户信息,右侧显示内容,系统包含大量表单、表格、弹出窗等常见 UI 组件,你就不会觉得 jQuery 开发效率高。你觉得 jQuery 好是因为你只会 jQuery。
    swsh007
        27
    swsh007  
       2018-05-04 12:47:48 +08:00 via Android
    vue 也不是唯一的选择,没有啥东西是永恒不变的,也没谁能完全替代前人,所以,自己觉得咋好就咋干,工具如果能提升效率就是好工具,但不是提升效率就是好框架好模板。
    580a388da131
        28
    580a388da131  
       2018-05-04 14:12:25 +08:00
    所以说叫码农嘛 体力活 慢慢改
    ycz0926
        29
    ycz0926  
       2018-05-04 14:53:16 +08:00
    @wlwood 后端程序员表示,巴不得前后端分离呢,一套 api,多个平台使用,省事
    whypool
        30
    whypool  
       2018-05-04 15:04:10 +08:00
    只能当模版用
    cxbig
        31
    cxbig  
       2018-05-04 15:20:19 +08:00 via iPhone
    并行,一个个区块替换掉
    sarices
        32
    sarices  
       2018-05-04 15:41:07 +08:00
    之前一个新项目,一个小小的后台用了 vue spa 方式写,同事接手不了
    bzw875
        33
    bzw875  
       2018-05-04 15:41:46 +08:00
    我试过了,之前用的是 jQuery 然后引入 Vue。然后页面代码乱得很难看,感觉下一个接手的前端杀我的心都有了
    crs0910
        34
    crs0910  
       2018-05-04 20:09:06 +08:00 via Android
    什么时候 📱 能用实体键换电台频道,并且手感不能比 📻 差太多,我才承认 📱 可以替代 🔦。
    现在的 📱 嘛?不过是一个畸形儿,谈不上电器,也谈不上通讯。
    xudaiqing
        35
    xudaiqing  
       2018-05-05 00:11:32 +08:00
    没用过 vue.js ,但是不能直接把原来的 jquery 网站做为纯 template 在 vue 里面直接用吗?我以前在 ember 下就是这么做的。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3436 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 11:21 · PVG 19:21 · LAX 03:21 · JFK 06:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.