使用 BANanoVuetifyAD3 进行 Vuetify 网站/Web 应用开发 - 入门

引言

大约一年前，我开始学习 Vuetify。Vuetify 是一个构建在 Vue.js 之上的完整 UI 框架。Vuetify 采用移动优先的设计方法，这意味着您的应用程序开箱即用，无论是在手机、平板电脑还是台式电脑上都能正常运行。

当前版本的 Vuetify 支持 VueJS 2，而下一个支持 VueJS 3 的版本将在 2022 年第一季度推出。

我的开发之旅始于 VB6，多年后我很高兴发现了 B4X 等工具，它们使我能够创建 Android、iOS 和桌面应用程序。

幸运的是，我曾在这里写过一篇关于 B4J 的文章，它是一个用于开发桌面应用程序的 RAD 工具。因此，开发 Vuetify 网站/Web 应用的旅程将从那篇文章开始。

我为什么要采取这种方法而不是使用单文件组件和 CLI？嗯，我喜欢探索和发明新事物。这就是我们今天要介绍 BANanoVuetifyAD3 的原因。

我们将创建什么？

完成本教程后，您将在接下来的一小时或更短时间内创建出类似这样的 Web 应用。

背景

BANanoVuetifyAD3 是一个用于创建 Web 应用和网站的框架。它由 B4X + Vuetify + BANano 提供支持。B4X 是一个快速应用程序开发工具集，用于创建 Android、iOS 和桌面应用程序，而 Vuetify 是世界上最流行的 Vue.js 框架，用于构建功能丰富、闪电般快速的应用程序。BANano 是连接 B4X 和 Vuetify 的粘合剂，因此能够通过 Vuetify CDN 方法创建 Web 应用/网站。BANano 将您的 B4X 代码（类似 VB 的语法）转换为纯 HTML/JavaScript/CSS。

实际上，您无需了解任何 JavaScript 即可开始开发 BANanoVuetifyAD3 Web 应用/网站。

要使用 BANanoVuetifyAD3 创建您的网站/Web 应用，您需要 B4X 和 BANano 库。我们将使用一个抽象设计器通过拖放来创建我们的 Web 应用。为此，BANanoVuetifyAD3 库预置了自定义元素，如 VTextField、VCalendar、VSnackBar 等，涵盖了大多数 Vuetify 组件。

您可以按照 这篇文章的说明将 B4X B4J IDE 安装到您的 PC，或者继续向下阅读。

附注：您也可以从这个 视频 中简要了解安装过程。

设置您的 B4X 开发 IDE - 一次性操作

1. 在您的 Windows PC 上，在 C 盘创建一个名为 B4J 的文件夹。
2. 在此 B4J 文件夹内创建三个子文件夹，分别命名为 libraries、shared 和 workspace。
3. 下载并安装 B4J（按照页面上的安装说明进行，直到第 3 步）。
4. 下载并解压缩 BANano。
5. 将 BANano Library 文件夹的内容复制到您的 C:\b4j\libraries 文件夹。
6. 将 BANanoServer Library 文件夹的内容复制到您的 C:\b4j\libraries 文件夹。
7. 下载并将这些文件夹 repo 的内容复制到 C:\b4j\workspace 文件夹。解压缩 BANanoVuetifyAD3.zip 文件。
8. 下载并将这些文件夹 repo 的内容复制到 C:\b4j\libraries 文件夹。
9. （可选）下载并解压缩 Kitchen Sink Demo WebApp 到您的 C:\b4j\workspace 文件夹。
10. （可选）下载并解压缩 BANanoServer Kitchen Sink Demo WebApp 到您的 C:\b4j\workspace 文件夹。
11. 打开 B4J 应用，然后在 B4J IDE 中，点击 **工具**。
12. 点击 **配置路径**，浏览到 javac.exe 的位置，并确保其已设置，通常是 C:\Program Files\Java\jdk1.8.0_281\bin\javac.exe。
13. 点击并浏览到您的附加库的位置，这应该是 C:\b4j\libraries。
14. 点击并浏览到您的共享模块的位置，这应该是 C:\bj4\shared。
15. 点击**确定**。

完成这些操作后，您就可以开发第一个 BANanoVuetifyAD3 Web 应用了，但是您需要为您的 PC 安装一个 Web 服务器。有多种选择。

您可以使用 IIS、laragon、USB WebServer、XAMP 或 WAMP 等。提供的模板基于发布到 laragon。如果您使用其他开发 Web 服务器，请记住更改 **发布** 路径以指向您 PC 上的现有文件夹。

编译 BANanoVuetifyAD3 依赖项 - 一次性操作

在某些情况下，BANanoVuetifyAD3 库可能无法在其他计算机上首次正常工作。为了确保用户能够顺利使用该库，我们提供了库的完整源代码，用户只需运行源代码即可生成名为 b4xlib（库）的文件。

• 在 workspace 文件夹中，双击打开 BANAnoVuetifyAD3.b4j 项目。这将打开 b4j IDE。
• 按 **F5** 运行项目以创建用于创建我们应用的 b4xlib（库）。

Using the Code

在下一步中，我们将使用一个已为我们构建的模板来创建一个基本的 Vuetify Web 应用，其中包含抽屉、导航栏和几个页面。我们只需激活它并开始使用。

在 B4J IDE 中，点击 **文件** > **新建** > **BVAD3**

在提示屏幕中，输入您的项目名称，然后点击 **确定**。

这将创建一个文件夹和项目文件。IDE 将更新选项卡，显示使用我们的模板创建的代码。

在 Main 模块中，我们有一些代码用于初始化应用程序，然后创建我们应用程序的各种页面。在本例中，我们将使用 router-view。

#IgnoreWarnings:12, 15
Sub Process_Globals
    Public BANano As BANano 'ignore
    'this is the folder on your development server.
    Public AppName As String = "mybvad2webapp"
    Public AppTitle As String = "My BVAD3 Web App"
    Private Publish As String = "C:\laragon\www"
    Public Version As String = "1.00"
    Public ServerIP As String
End Sub

在上面的代码中，我们定义了应用程序的 AppName、AppTitle、Publish 文件夹和 Version。当我们执行代码（按 **F5**）时，生成的 CSS、HTML 和 JavaScript 将发布到

c:\laragon\www\mybvad2webapp

AppTitle 将显示在应用程序的导航栏中。我们将从 Web 服务器运行它。

要发布我们生成的应用程序，只需将 mybvad2webapp 的内容上传到您的公开 Web 服务器即可。

按下 F5 时会发生什么？

首先，执行 **Main** > **AppStart** 中的代码。这将初始化 BANano Transpiler，它会将 B4X 语法（即类似 VB 的语法）转换为 CSS、JavaScript 和 HTML。

BANano.Initialize("BANano", AppName, DateTime.now)
BANano.HTML_NAME = "index.html"
BANano.Header.Title = AppTitle

BANano.Header.AddFavicon("./assets/favicon.ico", "16x16")
BANano.Header.AddAppleTouchIcon("apple-touch-icon.png", "180x180")
BANano.Header.Author ="Anele Mbanga (Mashy)"

BANano.Header 的赋值与应用于头部的 index.html 脚本相关。

我们还指示 transpiler 合并 CSS 和 JS 文件。

#if release
        BANano.TranspilerOptions.MergeAllCSSFiles = True
        BANano.TranspilerOptions.MergeAllJavascriptFiles = True
        BANano.TranspilerOptions.EnableLiveCodeSwapping = False
    #end if

但是，如果您浏览代码，您将看不到任何 CSS 和 JS 文件。这是因为这些文件已合并到您之前创建的名为 BANanoVuetifyAD3 的库中。您可能在源代码中看到了类似这样的代码

BANano.Header.AddJavascriptFile("alasql.min.js")
    BANano.Header.AddCSSFile("materialdesignicons.min.css")
    BANano.Header.AddCSSFile("roboto.min.css")
    BANano.Header.AddCSSFile("info-box.min.css")
    BANano.Header.AddCSSFile("flowy-vue.css")
    BANano.Header.AddCSSFile("helpers.min.css")
    BANano.Header.AddCSSFile("vue-form-wizard.min.css")
    BANano.Header.AddCSSFile("vjsf.css")

上面的代码表明 BANano 应查找指示的 CSS 和 JS 文件，然后将它们添加到 index.html 页面上的 <script> 标签中。通过在 BANanoVuetifyAD3.b4xlib 中使用此功能，我们可以抽象化这些功能的大部分，这样您就不必担心它们了。

在 **Main** > **AppStart** 执行完毕后，它会调用 BANano_Ready。BANano_Ready 就像 JavaScript 中普通的 document_ready。

Sub BANano_Ready
    pgIndex.Init
End Sub

然后会调用 pgIndex.Init。这是魔法发生的地方。pgIndex 是一个 **代码模块**。在 b4x 中，您可以同时拥有代码模块和类模块。类模块必须 **初始化**，而代码模块可以任意调用。

Sub Init                    'ignoreDeadCode
    'initialize the app
    vuetify.Initialize(Me, Main.AppName)
    'set the app title
    vuetify.SetData("apptitle", Main.AppTitle)
    'load the base layout
    BANano.LoadLayout(vuetify.Here, "baselayout")
    
    'set the list options
    drwlist.SetOptions(drwoptions)
    '
    'tell instance about the router view
    vuetify.BindRouterView(approuterview)
    'tell instace about the progress loader
    vuetify.BindProgressLoaderOn(appbar)
    
    'add other route component pages
    AddPages
        
    'add items to the drawer at runtime
    vuetify.OnCreated("oncreated", Null)
    'render the ux
    vuetify.Serve
End Sub

在上面的 Init 调用中，我们初始化一个 Vuetify 实例，执行一些操作，然后调用 .Serve 来运行我们的应用程序。这个子例程执行的一个有趣的调用是 BANano.LoadLayout。

您可能会回想起上一篇关于 B4J 的帖子中的 LoadLayout 语句。在这种情况下，我们使用了我们自己创建的组件。这些组件是 BANanoVuetifyAD3 库内部的。您可以从 **设计器** 菜单项访问布局。

您可以选择布局中的任何组件，然后查看其属性。

要添加组件，我们在设计器中点击 **打开内部设计器**，在一个新布局中点击 **添加视图** > **自定义视图**，然后选择我们需要的组件，并将其添加到布局中。然后我们将组件相互放置并创建了这个基本布局。

与上一篇文章一样，我们也为组件 **生成了成员**，这确保了它们像 Process_Globals 所做的那样在应用程序中全局定义。

'Static code module
Sub Process_Globals
    Public vuetify As VuetifyApp                'ignore
    Public BANano As BANano                     'ignore
    
    'PAGES
    Dim pgViewHome As ViewHome
    Dim pgViewOne As ViewOne
    Dim pgViewTwo As ViewTwo
    Dim pgViewLeadlet As ViewLeaflet
    '
    Private appbar As VAppBar                   'ignore
    Private appbartitle As VToolBarTitle        'ignore    
    Private appdrawer As VNavigationDrawer      'ignore
    Private apphamburger As VAppBarNavIcon      'ignore
    Private applogo As VImg                     'ignore
    Private appmain As VMain                    'ignore
    Private approuterview As VRouterView        'ignore
    Private appsnack As VSnackBar               'ignore
    Private appspacer As VSpacer                'ignore
    Private apptransition As VTransition        'ignore
    Private btnLogOff As VFAB                   'ignore
    Private drwlist As VList                    'ignore
    Private drwoptions As VListOptions          'ignore
    Private inspire As VApp                     'ignore
End Sub

我们的页面有一个汉堡包按钮，用于切换导航抽屉。这可以通过为汉堡包注册的 click:stop 事件来实现。

Private Sub apphamburger_ClickStop (e As BANanoEvent)            'ignoreDeadCode
    appdrawer.ToggleOnApp(vuetify)
End Sub

创建其他页面

为了创建其他页面，我们通过点击 **项目** > **添加新模块** > **类模块** > **BVAD3** Page 来使用类模块。然后我们在上面添加我们的代码。每个页面都基于 vue 组件路由。

我们首先需要定义它，例如，在 ViewHome 类模块中。

Public home As VueComponent

然后，我们用以下方式初始化它：

'initialize the component
    home.Initialize(Me, name)

然后，我们将其添加到 vuetify 实例中：

vuetify.AddRoute(home)

初始化页面后，我们需要创建 <template>，通过使用抽象设计器创建我们的“视图”（上面的 baselayout 示例）。在内部，这也会创建事件绑定并为各种回调注册“方法”。在内部，每个 VueComponent 都会生成此类代码。

'return the component
Sub Component As Map
    Dim sTemplate As String = Template.ToString
    sTemplate = $"<span>${sTemplate}</span>"$
    sTemplate = sTemplate.Replace("v-template", "template")
    sTemplate = sTemplate.Replace("v-td", "td")
    Dim cb As BANanoObject = BANano.CallBack(Me, "returndata", Null)
    opt.Put("data", cb.Result)
    opt.Put("methods", methods)
    opt.Put("computed", computed)
    opt.Put("watch", watches)
    opt.Put("props", mprops)
    opt.Put("filters", filters)
    opt.Put("template", sTemplate)
    opt.Put("components", components)
    opt.Put("name", mName)
    Return opt
End Sub

其中模板 HTML 来自我们创建的布局，然后其余部分由 BANanoVuetiftAD3 库为我们完成。不幸的是，解释 BANanoVuetifyAD3 库的全部功能超出了本简介的范围。

运行 Vuetify Web 应用

由于所有内容都是使用提供的模板构建的，因此按 **F5** 将运行 b4x 项目。这将启动 transpiler，它将为您的应用程序生成 CSS、HTML 和 JavaScript 源代码，并将其发布到您选择的指定发布文件夹。默认情况下，您的默认浏览器也会自动打开。

成功后，您将看到图 0 中所示的内容。

关注点

BANano 库从未像 Vuetify 这样的实验而构建，因此为了确保一切顺利运行，进行了大量的试错。正如其名称所示 BANAnoVuetifyAD3，它代表第三个迭代，最终成功了。首先，我学习了 VueJs，然后学习了 Vuetify，我必须说并非所有内容都已完全实现。

好处是，我们已经能够探索使用 MySQL、SQLite、MSSQL 和 CouchDB 以及 IndexedDB 的 CRUD 功能。使用 jetty 服务器也让我大开眼界，同时也充满挑战，但我们成功了。

我发现 Vuetify 非常棒且易于使用，并且能够使用 VB 等现有技能集创建 Web 应用，这非常酷，这要归功于 BANano。我希望人们能发现这个库很有用，因为我将在未来的帖子中进一步讨论它。

这里还有一个 视频，可以更详细地介绍这个 b4x 库的工作原理。

尽情享用！

历史

• 2021 年 12 月 5 日：初始版本