前后端未分离的项目如何引入vue、es6

发布于 2022-09-11 17:51:18 字数 190 浏览 13 评论 0

负责维护新公司的，就是那种功能特别多逻辑非常乱的上古遗留项目，重构基本不大现实，但是想引入vue再做些组件化拆分好歹逻辑能清晰些提升些代码的可维护性
基本框架是由c#+jquery+easyui构成
vue可以直接引入倒还好说，但是vue for easyui只能用npm安装，es6也要babel转码都没法直接用，请问各位老司机有什么比较好的处理方案吗

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

彩虹直至黑白 2022-09-18 17:51:18

使用 https://github.com/JeffreyWay...
虽然是配合php的包，但是写一个 mix 函数，就可以迁移到其他语言了

回复收藏 0

臻嫒无言 2022-09-18 17:51:18

es6 转码是需要 babel。但是 babel 也是 js 你可以，把代码转换一下，再写入 script 。

其实可以新功能放在一个独立目录里面，就是多一级跳转。问题不大呀。

回复收藏 0

迷鸟归林 2022-09-18 17:51:18

把前端项目拆分出来，拆分出来的使用vue来维护，后端负责将拆分出来的项目打包后的js转发到老项目

回复收藏 0

提笔落墨 2022-09-18 17:51:18

前端用vue-cli3照常做后端cs读取打包后index.html中的css和js 输出到页面上就可以了

前端用全局注册好的异步组件即可

Main.Master.cs

    public partial class Main : System.Web.UI.MasterPage
    {
        public string JsList = string.Empty;
        public string CssList = string.Empty;

        protected void Page_Load(object sender, EventArgs e)
        {
            var html = System.IO.File.ReadAllText(Server.MapPath("~/index.html"), Encoding.UTF8);
            CssList = GetValues(Regex.Matches(html, @"<link [^>]+>"));
            JsList = GetValues(Regex.Matches(html, @"<script .*?</script>"));
        }

        static string GetValues(MatchCollection mc)
        {
            var sb = new StringBuilder();
            foreach (Match m in mc)
            {
                sb.Append(m.Value);
            }
            return sb.ToString();
        }
    }

Main.Master

<!DOCTYPE html>

<html>
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <asp:PlaceHolder ID="PlaceHolder1" runat="server">
        <%= CssList %>
    </asp:PlaceHolder>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <%= JsList %>
    <asp:ContentPlaceHolder ID="content" runat="server">
    </asp:ContentPlaceHolder>
</body>
</html>

回复收藏 0

~没有更多了~