初级

2023-03-17 03:40| 来源: 网络整理| 查看: 265

如何开始Vue 开启 CDN前后端项目分离

如何开始

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

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

接入 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 加载地址，配置如下：

# 在项目的 malagu.yml 文件中配置frontend: malagu: webpack: htmlWebpackTagsPlugin: vue3: "您的 vue3 cdn 地址"

前后端项目分离

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

【本文地址】

初级

初级

今日新闻

推荐新闻