老瓶装新酒：在老页面中使用vue实现功能

老瓶装新酒：在老页面中使用vue实现功能

起因

公司有些老项目需要维护，这些项目老到什么程度呢，没有前后分离，开发的时候需要在本地打开Eclipse，在本地启动服务，一边运行后端服务一边调试代码。最近接了一个老系统的需求，其中有个需求就是改造手动分配功能，让它变得更好用。
我们先来看看，原界面是长什么样的：

再来看看新需求的界面是什么样的：

其实也没改太多，对不对。接到需求的时候，我也是这么想的，直到我开始翻看系统代码。我们先来分析一下这个界面最麻烦的地方在哪里，在于那个类似于穿梭框的左右选择的表格。我们先来看一下系统原有的代码实现：
通过查看代码，查到了整个系统采用的ui是jQuery-ui

我去Jquery-UI的网站找了一圈，没看到穿梭框的部件库，好吧。其实也还好。直到我查到了源代码是如何实现这个模态框的，整个人都不好了，界面展示的具体核心部分：

整个模态框都是通过字符串拼接模板生成的！！！
jquery-UI没有穿梭框的部件库，要实现这么复杂的功能，必须手写出一个穿梭框再通过拼接字符串实现，我陷入了深深的悲剧中~~，不是不能实现，可是真的好麻烦啊T_T。
我就在想，公司常用的element部件库中有穿梭框组件，稍稍修饰下，能实现需求功能。我能否在老页面中把这个模态框用vue来实现呢？理论上是可行的，因为vue也只是生成相应的代码，通过插入到id中实现，我只单独单独调用这个模态框，不对现有的模块功能进行交互，即使有，也大多数通过ID操控，应该是能实现这个功能。

于是，开始作最初级的尝试，先写一段示例代码证明在此页面中能实现：


在老页面的任意地方写上此ID

引入编译后的JS地址，CSS文件，

打开系统中的老页面，看vue生成的代码有没有插入到页面中。测试了下，是OK的。这就好办了，接下来就是通过vue实现模态框功能，点击打开模态框，与原页面的数据交互通过ID来实现和读取就可以了。

最终实现的效果如下：

在老页面中使用vue实现功能，只要想通了其中关节,并不是很复杂，我也只是告知大家一个实现的途径吧。