Vue

Malagu 命令行工具提供了一些列的应用开发模板，我们不需要完全从零开始创建项目。基于模块快速创建项目，然后再根据情况增减相关组件。模板内提供示例代码，让我们快速学习上手。

$ malagu init -o vue-app # 基于 vue-app 模板初始化项目

接入 Vue 比较简单，我们没有在Vue上抽离出任何的概念，只需要使用 App 装饰器把 Vue app 实例放进容器中即可。 具体代码如下：

import { createApp } from "vue";
import { App } from "@malagu/vue";
import Root from "./Root.vue"; // 这里是你项目的 vue 根组件
import plugin from "./plugin";

const app = createApp(Root);
app.use(plugin); // 这里你可以像普通 vue3 项目注册插件和调用任何 app 实例上的方法

@App(app)
export default class {} // 框架会默认把 vue 挂载到 document.body 下的一个 id 为 malagu-root 的 div 容器下

如果您想更改默认挂载点，只需要在 malagu.yml 中指定新的 hostDomId 值, 这样 Vue 会挂载到一个 id 为 malagu.hostDomId 值的 div 容器下。

malagu:
    hostDomId: "root"

Vue 开启 CDN

Vue 开启 CDN 其实跟 React 的类似， 可以参照 React 开启 CDN。 如果您想替换默认的 CDN 加载地址，配置如下：

frontend:
  malagu:
    webpack:
      htmlWebpackTagsPlugin:
        vue3: "您的 vue3 cdn 地址"

前后端项目分离

如果您不喜欢上述的开发方式，或者需要迁移旧项目，或者喜欢用 vite 等不基于 webpack 的工具开发前端，malagu 也是支持的。我们可以使用 malagu 托管前端 build 后的产物，从而使用任意前端框架。推荐使用 Monorepo 风格管理前后端项目。具体可以参照 前后端项目分离。