V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
countdown
V2EX  ›  问与答

求教下前端单页应用如何从 angularjs1.4 迁移至 vue 2.5,能否平滑迁移?

  •  
  •   countdown · 2018-07-26 15:37:18 +08:00 · 2820 次点击
    这是一个创建于 2312 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近刚接手了一个前端项目改造的活,领导要求从 angularjs1.4.7 迁移至 vue2.5,该项目时单页应用。

    由于之前开发都是 java 后端,前端 js 只是了解基本的 jquery 操作。 这几天抽空学了下 angular 和 vue 的基本语法,发现这俩虽然很多地方差不多,但是真上手改起来却无从改起。一下子上手改这个项目难度还是挺高。

    网上搜了下类似的迁移资料,也不是很多,发现比较好的参考资料也就是一篇国外的译文-> 我们为什么以及是如何从 Angular.js 迁移到 Vue.js ?

    我捋了下现在应用的单页里面的引入的 css 和 js 库,主要如下, 请问下如果从 angularjs 迁移到 vuejs,是不是 angularjs 的 css 和 js 库都需要找替代的 vue 库,各位 v 友有没有什么迁移建议,能否平滑迁移还是重写,或者有好的实践文章推荐,感谢!

    全局 css 样式

    1. Font-Awesome: 图标库
    2. simple-line-icons: 图标库
    3. bootstrap: 前端 ui 框架
    4. uniform: Jquery 的表单美化插件
    5. angular-xeditable: ng 对表格操作的插件
    6. angular-ui-select: ng 的下拉框插件
    7. bootstrap-toastr: 消息提示插件
    8. datatables: 表格插件
    9. components-rounded: Metronic 的一种样式
    10. Bootstrap Colorpicker: 颜色选择器

    js

    1. bootstrap-hover-dropdown.js : 下拉菜单插件
    2. jquery-slimscroll: jquery 滚动条插件
    3. jquery.blockui.js: jquery 遮罩插件
    4. highstock: 图表插件
    5. bootstrap-toastr.js : 消息提示插件
    6. clipboard.js : 一个不需要 flash,将文本复制到剪贴板的插件
    7. codemirror.js: 代码高亮
    8. socket.io.js: 用于与后台消息通讯
    9. lodash.js : 一个模块化的 js 实用工具库

    angularjs

    1. angular-sanitize.js: 防止跨站攻击
    2. angular-touch.js: 移动端的 touch 事件
    3. angular-ui-router: 可嵌套路由 --> 可实现页面局部刷新,同时导航栏地址变化
    4. ocLazyLoad.js : ui-router 局部刷新加载的页面不能加载其中的 script 标签,即无法执行其 js 代码。可通过 ocLazyLoad 来实现加载对应的 js 或者 css
    5. ui-bootstrap-tpls.js : angularjs 操作 bootstrap 组件
    6. angular-xeditable.js: ng 对表格操作的插件
    7. angular-ui-select.js : ng 的下拉框插件
    13 条回复    2018-07-26 19:06:32 +08:00
    sfree2005
        1
    sfree2005  
       2018-07-26 15:54:02 +08:00 via Android   ❤️ 1
    你就当是重新用 vue 写这个 web app,angular 版本的就当是需求文档就好。你当然是需要认真读原项目代码的,部分可能也可以直接拷贝,但我想在实现同一个大功能的时候,你首先要去查下 vue 怎么实现,有没有类似的库给你直接用之类的。
    wu67
        2
    wu67  
       2018-07-26 16:02:43 +08:00   ❤️ 1
    去年我从 vue1.*升到 2.1 的时候, 实在忍不住了, 干脆立项重写...

    clipboard 可以直接过渡, lodash 这货还有存在意义吗?直接 es6 大法呀, 其他没用过不作评论
    countdown
        3
    countdown  
    OP
       2018-07-26 16:04:47 +08:00
    @sfree2005 重写的话,只能完全迁移完才可以用了。
    countdown
        4
    countdown  
    OP
       2018-07-26 16:05:53 +08:00
    @wu67 vue1.*迁移都这么麻烦么,看来我还是低估了 angular1.x 迁移的难度
    whypool
        5
    whypool  
       2018-07-26 16:11:47 +08:00
    重构
    countdown
        6
    countdown  
    OP
       2018-07-26 16:13:54 +08:00
    @whypool 需求就是重构,现在的问题在于重构的形式,希望学习下类似的项目重构经验
    yhxx
        7
    yhxx  
       2018-07-26 16:15:51 +08:00
    从 angular1.x 升级到 angular2 都基本等于重写
    countdown
        8
    countdown  
    OP
       2018-07-26 16:18:39 +08:00
    @yhxx 主要是看到我上面说的那篇迁移文章,看到他们项目实现了平滑迁移,想知道下平滑迁移和重写哪个更方便。
    learnshare
        9
    learnshare  
       2018-07-26 16:20:51 +08:00   ❤️ 1
    大概是可以用一部分样式和第三方插件,其他的都要重写
    countdown
        10
    countdown  
    OP
       2018-07-26 16:27:48 +08:00
    @learnshare 想想确实是只有部分可复用,angularjs 的第三方插件替代下估计就得好好找找了
    leafiy
        11
    leafiy  
       2018-07-26 17:01:56 +08:00 via Android   ❤️ 1
    刚好在做一个 ang to vue 和一个 react to vue,除了 css 真没啥过渡可说,还有一些 utils 可用,ui 方面的就别想了,要么重写要么重找
    yhxx
        12
    yhxx  
       2018-07-26 17:08:33 +08:00   ❤️ 1
    @countdown 建议重写
    有研究各种兼容 /替代方案的时间都够再写一遍了吧
    countdown
        13
    countdown  
    OP
       2018-07-26 19:06:32 +08:00
    @leafiy
    @yhxx
    看来还是重写好了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1697 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 16:47 · PVG 00:47 · LAX 08:47 · JFK 11:47
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.