• [MAUI]深入了解.NET MAUI Blazor与Vue的混合开发

    文章目录


    .NET MAUI结合Vue的混合开发可以使用更加熟悉的Vue的语法代替Blazor语法，你现有项目不必重写。之前写过一篇 [MAUI] 在.NET MAUI中结合Vue实现混合开发 ，其中介绍了如何创建一个vue应用并将其打包至MAUI项目，这种方式依赖vue-cli创建和打包静态站点，好处是可以使用Node.js 的构建但MAUI仅仅作为容器。开发应用需要一个独立的host项目

    这次用集成的方式。将vue作为MAUI的一部分，这样就可以在MAUI项目中直接使用vue了。

    在这里插入图片描述

    Vue在混合开发中的特点

    首先要说的是，Vue框架是渐进性的，所谓渐进性，就是Vue不会强求你使用所有的框架特性，你可以根据需要逐步使用。

    同样地，element-ui也可以通过引入样式和组件库，配合Vue使用

    因此我们不需要Vue Router、Vuex、Vue CLI、单文件组件这些高级特性，仅仅引入Vue.js即可使用Vue模板语法。我们将利用Blazor引擎的如下功能：

    • 组件化开发
    • 静态资源管理
    • js代码的注入
    • js调用C#代码
    • C#调用js代码

    由.NET MAUI提供的功能：

    • 路由管理
    • 状态管理

    由Vue提供模板语法，事件处理，计算属性/侦听器等，以及Element-UI提供交互组件。

    创建MAUI项目

    创建一个MAUI项目，这里使用的是Visual Studio 2022 17.7.3，创建一个Blazor MAUI App项目命名MAUI-Vue-Hybriddev-Integrated，选择Android和iOS作为目标平台，选择.NET 7.0作为目标框架。

    在这里插入图片描述

    从Vue官网下载最新的Vue.js

    在这里插入图片描述

    将其放置在wwwroot目录下，然后在index.html中引入
    在这里插入图片描述

        <script src="lib/vuejs/vue.js">script>

    • 1

    创建Vue应用

    在Views目录下创建 HomePage.xaml作为Vue应用的容器，在页面中创建视图元素，并设置HostPage为wwwroot/index.html，这样就可以在MAUI中使用Vue了。

    <BlazorWebView x:Name="blazorWebView"
               HostPage="wwwroot/index.html">
    <BlazorWebView.RootComponents>
        <RootComponent Selector="#app"
                       x:Name="rootComponent"
                       ComponentType="{x:Type views:HomePageWeb}" />
    BlazorWebView.RootComponents>
BlazorWebView>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    每个BlazorWebView控件包含根组件（RootComponent）定义，ComponentType是在应用程序启动时加载页面时的类型，该类型需要继承自Microsoft.AspNetCore.Components.IComponent，由于我们的导航是由MAUI处理的，因此我们不需要使用Blazor路由，直接使用Razor组件

    在Views目录下创建HomePageWeb.razor，这是Vue应用页面相当于Vue的单文件组件，这里可以使用Vue的模板语法，而不是Blazor的Razor语法。
    在这里插入图片描述

    我们在HomePageWeb.razor中写下Vue官方文档中Hello Vue示例代码

    
<div id="vue-app">
    {{ message }}
div>


<script type="text/javascript">
    var app = new Vue({
        el: '#vue-app',
        data: {
            message: 'Hello Vue!',
        }
    })

script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    注意：Vue的根元素名称不要跟Blazor的根元素名称相同，否则会报错。

    在这里插入图片描述

    此时更改JavaScript里的内容，你会发现Blazor页面不会热加载。

    请勿将