undefinedfix
Sign in

How to introduce Vue and ES6 into projects that are not separated from front end and back end

realmau5 edited in Sun, 26 Jun 2022

The one responsible for maintaining the new company is the ancient legacy project with many functions and disordered logic. It's not realistic to refactor, but if you want to introduce Vue and do some component-based splitting, the logic can be clearer and the maintainability of the code can be improved. The basic framework is composed of C # + jQuery + easyUI. Vue can be directly introduced, but Vue for EasyUI can only be installed with NPM, ES6 also needs Babel transcoding, but it can't be used directly. Do you have a better solution for old drivers

4 Replies
naimjeem
commented on Sun, 26 Jun 2022

The front-end uses vue-cli3 as usual, and the back-end CS reads and packages index.html CSS and JS output to the page

The front end can use the globally registered asynchronous component

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>
Testy
commented on Sun, 26 Jun 2022

Split the front-end project, use Vue to maintain the split project, and the back-end is responsible for forwarding the packaged JS of the split project to the old project

Mahdi
commented on Mon, 27 Jun 2022

ES6 transcoding requires Babel. But Babel is also JS. You can convert the code and write it into script.

In fact, new functions can be put in a separate directory, that is, one more jump. It's not a big problem.

MadEcto
commented on Mon, 27 Jun 2022

Use HTTPS :// github . com / JeffreyWay ... Although it is a package with PHP, it can be migrated to other languages by writing a mix function

lock This question has been locked and the reply function has been disabled.