javascript - 将 Vue 应用挂载到主 Vue 应用的容器中

Question

我想创建一个基本的 Vue 应用程序，提供基本功能，如登录、通过侧边栏导航等。但导航栏项目必须可以互换。我想创建单独的 Vue 应用来代表这些导航栏项目。

---

基本思想: 应该提供一个 REST API 和一个基本容器(Vue 应用程序)，它能够在特定的 div 元素中呈现其他 Vue 应用程序。这将允许其他人添加他们自己的前端应用程序并在需要时使用该 API。所以我只会提供一些基本的应用程序。主要思想是为非常模块化的管理系统创建一个即插即用系统。我将为该自定义应用程序提供注册流程，以便 API 知道该应用程序及其基本 URL，而我的基本应用程序可以获取所有这些应用程序。

---

基本应用设置

所以我的基础应用程序为这些自定义应用程序提供了路径

{
  path: '/app/*',
  component: CustomAppContainer,
},

并将渲染这个 View

<template>
  <div id="customAppContainer">Render custom apps here</div>
</template>

我的导航栏可以提供链接 /app/one 来导航和呈现那个 customAppContainer 中名为“one”的应用。

---

自定义应用设置

在定义我的路线时，我必须设置 base url

export default new Router({
  base: '/one/',
  routes: [
    {
      path: '/',
      component: Home,
    },
  ],
});

但对于 ma​​in.js 我不确定如何设置它。我想我必须将其更新为类似

new Vue({
  router,
  render: h => h(CustomAppContainer),
}).$mount('#customAppContainer');

但显然这个应用不知道 CustomAppContainer 和 #customAppContainer。

---

此外，当我只有一些 index.html 文件并想将一个文件集成到另一个文件时，我正在考虑分发。那么我如何部署一个基本应用程序，当用户想要通过 /app/myCustomApp 访问自定义应用程序时，我将自定义应用程序安装到 customAppContainer 中？

一个类似的例子是 Nextcloud

在开发新的 Vue 应用程序时，我可以将其作为独立应用程序运行。但是对于生产，我想从 dist 文件夹中获取文件并将它们放入 apps 目录中，当运行我的基本容器应用程序时，它会在启动时知道所有这些子应用程序。

如果您需要更多信息，请告诉我!

Answer 1

1

Vue does not know CustomAppContainer

尝试添加import CustomAppContainer from "path/to/CustomAppContainer.vue"
它必须在 .vue 文件中。

---

2

Vue does not know #customAppContainer

是的，该选择器必须在 index.html 中.你的在 CustomAppContainer . 尝试添加到 index.html (通常在/public 文件夹中)类似于 <div id="#app"></div>并替换 .$mount('#customAppContainer');与 .$mount('#app');

---

3

Vue 路由器需要 <router-view>标签。所以，试试这个标记:

<!-- In template is all page -->
<template>
  <!-- Some stuff as navigation... -->
  <nav>
    <!-- Router links - renders as "a" element -->
    <router-link to="/one">To /one</router-link>
    <!-- Or use standard tags - they're also good -->
    <a href="/two">To /two</a>
  </nav>
  <!-- In this component would be component chosen in router (Home.vue) -->
  <router-view/>
</template>

---

4

Router.js 需要导入:

import Home from "path/to/the/Home.vue"
export default new Router({
  base: '/one/',
  routes: [
    {
      path: '/',
      component: Home,
    },
  ],
});

---

一切都好吗？