Я хотел бы создать базовое приложение Vue, обеспечивающее основные функции, такие как вход в систему, навигация по боковой панели и т. Д. Но элементы навигационной панели должны быть взаимозаменяемыми.Я хочу создать отдельные приложения Vue, представляющие эти элементы панели навигации.
Основная идея: API REST и базовый контейнер (приложение Vue), который может отображать другие приложения Vueв конкретном элементе div
, должен быть предоставлен.Это позволило бы другим добавлять свои собственные веб-приложения и работать с этим API, если они захотят.Поэтому я просто предоставлю несколько основных приложений.Основная идея заключается в создании Plug & Play системы для очень модульной системы администрирования.Я предоставлю процесс регистрации для этого пользовательского приложения, чтобы API знал это приложение и его базовый URL, а мое базовое приложение могло получить все эти приложения.
Настройка базового приложения
Таким образом, мое базовое приложение предоставляет маршрут для этих пользовательских приложений
{
path: '/app/*',
component: CustomAppContainer,
},
и будет отображать это представление
<template>
<div id="customAppContainer">Render custom apps here</div>
</template>
, и моя навигационная панель может предоставить ссылку /app/one
для навигациии визуализировать приложение с именем 'one' в этом customAppContainer
.
Настройка пользовательского приложения
При определении моих маршрутов мне нужно установить base
url
export default new Router({
base: '/one/',
routes: [
{
path: '/',
component: Home,
},
],
});
, но для main.js Я не уверен, как его настроить.Я думаю, что мне нужно обновить это что-то вроде
new Vue({
router,
render: h => h(CustomAppContainer),
}).$mount('#customAppContainer');
, но, очевидно, это приложение не знает CustomAppContainer
и #customAppContainer
.
Далее я думаю одистрибутив, когда у меня есть только несколько index.html
файлов и я хочу интегрировать один в другой.Итак, как я могу развернуть базовое приложение, и когда пользователь хочет получить доступ к пользовательскому приложению через /app/myCustomApp
, я монтирую пользовательское приложение в customAppContainer
?
Пожалуйста, дайте мне знать, если вам нужна дополнительная информация!