今儿有点挫败感

因为这两天对 TS 的热情非常高涨，就准备把我们的一个正式应用中的一个子应用隔离出来，用 Vue+TS 的形式重构一下这个子应用。

结果，我还是小瞧了框架的学习难度，也高看了自己的理解能力~😟

怎么重构的

先按环境

这一步其实是最流畅的，基本 5 分钟搞定了

npm create vite@latest myProject -- --template vue

执行过程中，第一步直接回车，第二步选择 Vue，第三步选择 vue-ts。

然后安装一下需要用到的组件，如 axios

npm install axios

然后，就得到了这样一个初始项目

奥，对了，这个已经是被我蹂躏过的了，不干净了。

开始迁移

之前我们写这种简单的网页应用的流程，就是前端给到我们一个纯静态的 Demo 页，然后数据的渲染工作也是由后端来完成的（不要笑，很多小厂都是这种工作模式，前后分离即便是现在也是一个相对小众的群体，注意是相对小众，但基数肯定不小）

这种模式有一个很大的弊端。就是前端在写页面的时候，是不太会，或者没办法完全考虑到后端的渲染形式的，你可能是通过原生 js 来替换 dom，也可能是通过一些模板来动态渲染，总之就是他给到你的肯定是一个纯静态的页面。这个静态页面里，还会用到一些第三方的库，比如 JQuery，还有一些控制滚动之类插件，以及数量可观的 css。

这种模式，其实不太适合迁移成类似 Vue 框架风格的应用，因为涉及到原页面写法的问题，一些事件的迁移非常困难，比如鼠标上移到某个元素上就产生一些变化等等。不是说框架做不了这些事，是写法不一样，原来可能是依赖 JQuery，或者一些自己写的库来完成这些的。

比如我们的静态文件里，有这样的东西

 //tab初始化$('.tab-group .curW[data-name]').each(function(){  var nowTab = $(this).attr('data-name');  $(this).closest('.tab-group').find('[data-tab=' + nowTab + ']').show().siblings(['data-tab']).hide();});...其他事件效果不列了

还有这种，依赖第三方库写出来的方法

//弹出层-iframefunction openIframe(title, url, width, height) {    var area = ['893px', '600px'];    if (width && height) {        area = [width, height];    }    layer.open({        type: 2,        title: title,        shadeClose: true,        shade: false,        maxmin: true, //开启最大化最小化按钮        area: area,        content: url    });}

类似的东西，还有很多，真正迁移的时候，想要兼容原来的效果真的非常痛苦。这也是我今天晚上收到挫败感的主要原因。。。

我的一点做法

• 尽可能替换第三方插件

因为大部分依赖第三方插件的一些方法，都可以很容易的得到 Vue 版本的替代方案，对于这类情况，我就直接删掉了原有的方法，替换成了框架提供的原生方法。

• 不好替换的，找一些兼容方案

比如，一些页面上的事件效果，不是说不好替换，是我自己现在也不知道替换方案怎们弄！所以就找到了一些替代方案，比如在 TS 里也可以引用 JQuery，引用之后，之前的一些依赖 JQuery 的写法，就可以得到继承了。

比如，我在 Jquery 的 readme 方案里，找到了这样的说明

import $ from "jquery";export function main(){
    $(function(){        // 通用tab切换        //tab初始化        $('.tab-group .curW[data-name]').each(function(){            var nowTab = $(this).attr('data-name');            $(this).closest('.tab-group').find('[data-tab=' + nowTab + ']').show().siblings("['data-tab']").hide();        });      ...其他事件效果不列了    });    }

但事实上，这段代码并没有生效，所以我这种处理兼容的代码还是有问题的

数据接口

这部分算是整个迁移过程中比较流畅的吧，除了花了点时间处理了一下跨域问题，别的基本都很顺。就是引入 Axios 组件，编写请求基类和接口。比较简单，不贴代码了。

今天基本就是这些了，最后的结果是没有迁移成功，我感觉我不应该上来就脑子一热的选 TS+Vue 的形式来迁移，还是应该先修炼好 JS 水平，再来循序渐进，心机吃不了热豆腐啊。这次先到这里，挫败了半天多少还是有一点额外的收获，所以还没到要放弃的时候，明天再继续尝试，睡觉。