How to introduce Vue and ES6 into projects that are not separated from front end and back end
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
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>
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
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.
Use HTTPS :// github . com / JeffreyWay ... Although it is a package with PHP, it can be migrated to other languages by writing a mix function