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

vuejs

jquery

渐进式

取代

35 条回复 • 2018-05-05 00:11:32 +08:00

1

noe132

2018-05-04 05:57:02 +08:00 via Android

在页面引入 vue.js 。
新的需求用 vue.js 来写就可以了。
比如假设页面有 2 个独立的 table
一个是 jq 的
另一个就用 vue 就可以了。
具体怎么写参考 vue 如何挂载到指定元素上。

2

Junjunya

2018-05-04 08:11:58 +08:00

码一下，看看大神是怎么解决的。
曾经试过引入页面 vue.js 来写，但是发现这种方法并不好。
因为直接页面引入 js 的话，感觉 vue.js 只能起到一个模板引擎的作用。
页面直接引入 vue.js 很难快速找到可以用的插件，
还是各种 jQuery 的库比较多，而并且如果页面 jQuery 和 vue 混用的话，
得需要一定 JS 功力，不然对新手来说，难以掌控。

感觉 vue 还是适合用在 SPA 的场景下

3

Lxxyx

2018-05-04 08:40:21 +08:00 via Android

1 楼加一，逐渐迁移吧

4

murmur

2018-05-04 08:47:15 +08:00

先拿 vue 当 template 用

5

carlclone

2018-05-04 08:53:45 +08:00

2 楼说的很清晰了

6

laogui

2018-05-04 08:55:31 +08:00 via Android

我们目前后台系统也是这样搞，不过体验不是很好，原来的页面显示出来 vue 相关的东西才显示。页面都替换的差不多就可以整体换 spa 了，到时候把代码复制粘贴就可以了。

7

drackzy

2018-05-04 09:16:55 +08:00

$.ajax 逐渐用 axios 替换

8

notreami

2018-05-04 09:38:11 +08:00

2

什么时候 Vue 能用其他编程语言后端渲染，并且性能不能比后端模版差太多，我才承认 Vue 可以替代 jquery。
现在的 Vue 嘛？不过是一个畸形儿，谈不上框架，也谈不上组件。

9

hasbug

2018-05-04 09:47:14 +08:00

@notreami 同感，开发其实也挺不顺畅的

10

371657110

2018-05-04 09:59:04 +08:00

把 vue 当成工具. 就能用了

11

oswuhan

2018-05-04 10:13:33 +08:00

@notreami vue 和 jq 是一类东西？讨论替代问题有意义？

@openplatform SEO 无关的业务场景用 vue 重构，比如会员系统的注册、登录、资讯系统的站内搜索、电商系统的下单、支付场景、微博系统的内容流等…… SEO 有关的功能，看能力，vue 生态现有的 SSR 方案都有一定的场景限制，用传统的 template 渲染视图反而更合适。

12

Torpedo

2018-05-04 10:23:45 +08:00

一个页面一个页面改不行么？在同一个页面里混合老的和新的代码本身就不是什么明智的选择吧。

13

wlwood

2018-05-04 10:27:56 +08:00

新的子模块，用 vue 的模式来开发，就是尽量按 vue 的那套来。老的，现存的，依然用 jquery 维护。比如，要做一个新的功能，想办法把它放在 vue 新模块上来。

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

昨天隔壁贴，竟然还有个回调地狱的问题。。。表示震惊。。。

14

fishliu

2018-05-04 10:29:29 +08:00

页面直接引用 vue，router，vuex 使用

15

oswuhan

2018-05-04 10:30:05 +08:00

再举一个例子，CSS 还不成熟的时候，大家都喜欢使用 table 标签进行网页开发，后来 CSS 发展成熟之后，“ table 布局思想”逐渐被淘汰，并且被认为是一种落后且错误的思想。

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

同样的道理，基于模板思想的视图渲染方式对于生成静态视图的业务场景有先天优势，而基于 DOM 思想的视图渲染方式对于生成强交互、多动画、多状态的动态视图的业务场景有先天优势。

16

notreami

2018-05-04 10:38:05 +08:00

@oswuhan 为什么不先看下提问呢？提问第一句，“ vuejs 肯定是要全部取代 jquery 的”。

17

oswuhan

2018-05-04 10:41:16 +08:00

@notreami 问者无罪，答者有心。如果有冒犯，希望不要太在意，我先道个歉。

18

openplatform

OP

2018-05-04 11:26:51 +08:00

@Torpedo 不错，这个思路挺好

19

openplatform

OP

2018-05-04 11:28:11 +08:00

@notreami
@oswuhan 二位不要吵嘛。和气生财。共同学习，共同进步。

20

zhuweiyou

2018-05-04 12:01:28 +08:00

求求你放过其它同事吧，新需求可以直接上全家桶，旧的就别去改了。改了也只能起到一个模板引擎的作用。

21

quietcoder

2018-05-04 12:03:07 +08:00

提供一个思路：
新建一个 vue 项目, 然后针对你的老项目挨个页面修改，改完了之后使用 iframe 内嵌到老项目里面，然后一个一个页面处理就好了，等全部处理完了直接替换掉老的项目，这样可以避免出现一些 “交叉感染” 的问题。

22

openplatform

OP

2018-05-04 12:05:05 +08:00

@zhuweiyou 我就是“其他同事”

23

lrz0lrz

2018-05-04 12:08:05 +08:00

vue 本来就以『渐进式』为卖点之一，在页面中通过 <script> 引入就行了，与 jQuery 基本没有冲突。

24

zhuweiyou

2018-05-04 12:13:49 +08:00

1

@openplatform 哈哈

25

MeteorCat

2018-05-04 12:30:01 +08:00

没必要，如果 vue.js|jquery.js 一起引入又没必要
但是去除其中 jquery，你不知道到底整个 ui 框架有没有依赖 jquery[没错，就是 boostrap 有的组件依赖 jquery]

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。