1、前言

　　當前，前后端分離大行其道，我本人之前不少專案也是純前后端分離，但總有些場景，春前后端分離整起來比較痛苦，比如我手頭這個公眾號專案吧，它涉及到第三方鑒權，第三方憑證，以及微信憑證這些，都不適合放到前端去做，外加一些本身業務層面的認證授權，這些終歸是放服務端處理合適一些的，另一層面原因，是不想系統所有功能全懟到一個SPA中，還是希望不同功能模塊，去拆分到不同頁面中的，俗稱的多頁，

　　但作為公眾號系統，富客戶體驗，還是需要一些SPA體驗的，具體來講我的做法是每個功能模塊一個單頁，這便是為啥系列文章中有這個core整合SPA這一篇，

2、邊界背景關系

　　core端的不說了，MVC，地球人都清楚，這里重點說前端整合，具體來講，我希望把前端體驗中SPA、路由、組件等一系列優秀實踐整合到MVC中，這里以Vue、router、axios為例來說明，

3、實作方式

1) Layout的處理

　　Layout殼子頁，大家都知道，定義整個站點的布局，以及引入公共前端檔案，既然我們采用Vue系列，那就要把對應的檔案參考替換，大致如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0" />
    <title>Fuck Frontend</title>
    <environment include="Development">
        <link rel="stylesheet" href="~/lib/mint-ui/dist/style.min.css" />
        <link rel="stylesheet" href="~/css/main.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://cdn.staticfile.org/mint-ui/2.2.13/style.min.css"
              asp-fallback-href="~/lib/mint-ui/dist/style.min.css"
              asp-fallback-test-class="box-sizing"
              asp-fallback-test-property="background-color"
              asp-fallback-test-value="border-box"
              crossorigin="anonymous" />
        <link rel="stylesheet" href="~/css/main.min.css" />
    </environment>
    @RenderSection("CSS", required: false)
</head>
<body>
    <div id="app">
        @RenderBody()
    </div>
    <environment include="Development">
        <script src="~/lib/vue/dist/vue.min.js"></script>
        <script src="~/lib/mint-ui/dist/index.js"></script>
        <script src="~/lib/vue-router/dist/vue-router.min.js"></script>
        <script src="~/lib/axios/dist/axios.min.js"></script>
        <script src="~/js/main.js"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"
                asp-fallback-src="~/lib/vue/dist/vue.min.js"
                asp-fallback-test="window.Vue"
                crossorigin="anonymous">
        </script>
        <script src="https://cdn.staticfile.org/mint-ui/2.2.13/index.js"
                asp-fallback-src="~/lib/mint-ui/dist/index.js"
                asp-fallback-test="window.MINT"
                crossorigin="anonymous">
        </script>
        <script src="https://cdn.staticfile.org/vue-router/3.1.3/vue-router.min.js"
                asp-fallback-src="~/lib/vue-router/dist/vue-router.min.js"
                asp-fallback-test="window.VueRouter"
                crossorigin="anonymous">
        </script>
        <script src="https://cdn.staticfile.org/axios/0.19.0/axios.min.js"
                asp-fallback-src="~/lib/axios/dist/axios.min.js"
                asp-fallback-test="window.axios"
                crossorigin="anonymous">
        </script>
        <script src="~/js/main.min.js"></script>
    </environment>
    @RenderSection("Scripts", required: false)
</body>
</html>