在早期版本BeetleX.WebFamily只提供了vuejs+element的整合，由於element只適合PC管理應用開發相對於移動應用適配則沒這麼方便。在新版本元件集成了bootstrap5可以更好地適配移動Web應用；同時也集成了Fontawesome和bootstrapIcons,這樣在開發過程中使用字型圖示就更方便了。在開發時以上元件並不會打包到一起，而是根據實際需要選擇element或bootstrap作為當前應用的樣式主題，而基礎開發框架還是基於vuejs，ajax資料互動則使用axios。

使用

    在使用之前還是選瞭解一下BeetleX.WebFamily是如何開發SPA應用，並有那些基礎功能BeetleX.WebFamily針對Web SPA應用的改進。第一步使用vs或vscode建立控臺專案，引用BeetleX.WebFamily後在main方法中新增以下程式碼:

class Program
{
    static void Main(string[] args)
    {
        WebHost host = new WebHost();
        host.RegisterController<Program>()
        .Setting(o =>
        {
            o.SetDebug();
            o.Port = 80;
            o.LogLevel = EventArgs.LogType.Info;
            o.LogToConsole = true;
        })
        .UseFontawesome()//加入Fontawesome
        .UseBootstrap(PageStyle.Bootstrap)//設定使用bootstrap
        .Initialize((http, vue, resoure) =>
        {
            vue.Debug();
        }).Run();
    }
}

啟動專案後，可以從瀏覽器訪問得到以下結果：

以上是基於bootstrap的SPA應用預設主頁，當然這並不是你所需要的。

定義功能

    接下來在Main方法修改SPA應用的內容，通過修改這些配置可以讓你馬上把主頁更換成實際應用的功能。

class Program
{
    static void Main(string[] args)
    {
            //更改應用標題
            WebHost.Title = "beetlex & bootstrap!";
            //更新應用Logo
            WebHost.LogoImg = "/images/icons-hero.png";
            //設定頭部元件
            WebHost.HeaderModel = "custom-header";
            //設定需要登陸
            WebHost.MustLogin = true;
            //定義頁面的功能選單
            WebHost.GetMenus = (usr, role, http) =>
            {
                List<Menu> result = new List<Menu>();
                var item = new Menu();
                item.ID = "home";
                item.Img = "fas fa-home";
                item.Name = "主頁";
                item.Model = "webfamily-home";
                result.Add(item);
                //....
                return Task.FromResult(result);
            };
            WebHost host = new WebHost();
        host.RegisterController<Program>()
        .Setting(o =>
        {
            o.SetDebug();
            o.Port = 80;
            o.LogLevel = EventArgs.LogType.Info;
            o.LogToConsole = true;
        })
        .UseJWT()//開啟jwt驗證
        .UseFontawesome()//開啟Fontawesome
        .UseBootstrap(PageStyle.Bootstrap)//開啟bootstrap
        .Initialize((http, vue, resoure) =>
        {
            resoure.AddCss("website.css");//加入本專案的CSS
            resoure.AddScript("echarts.js");//加入本專案的js
            vue.Debug();
        }).Run();
    }
}

由於開啟了登陸和驗證，所以這一次訪問頁面會預設是一個登陸窗體

登陸後就可以進行主頁面了，這裡並沒有定義登陸過程，任意使用者密碼都能登陸成功能。

自動適配手機端下的效果。

元件針對bootstrap提供兩種選單佈局方式，上面設定的是頂部選單，可以通過配置來實現右邊選單顯示；只需要調整以下程式碼即可:

.UseBootstrap(PageStyle.BootstrapDashboard)

以上BeetleX.WebFamily使用bootstrap5開發SPA應用的效果，元件現有已經提升為開源專案,瞭解專案和示例可訪問:

https://github.com/beetlex-io/WebFa