Как собрать модульно проект на vuejs?

Question

Вадим @ShVad

Как собрать модульно проект на vuejs?

Добрый день

В планах переписать админку на vue js, но возникают следующие вопросы:

Возможно ли собрать интерфейс админки (vuejs + набор компонентов) так, чтобы его можно было расширять однофайловыми компонентами?

<script src="/core.js"></script> - это билд vuejs + базовые компоненты.
<script src="/module-users.js"></script> - дополнительные компоненты расширяющие интерфейс админки.

Необходимо это для того чтобы сторонние разработчики могли писать дополнительные модули для нашей системы.

Открыли например в админке страницу пользователей, backend отдает html разметку с вставленными компонентами, нужно чтобы vue все это обработало.

<header>
	<ComponentMenu/>
	<ComponentAction/>
</header>
<content>
	<ComponenUserList/> - подключить отдельным файлом module-users.js
</content>
<footer>
	<ComponentMenu/>
</footer>

Спасибо

Вопрос задан более года назад
89 просмотров

7 комментариев

Подписаться 1 Средний 7 комментариев

Владимир Коротенко @firedragon

почему не Npm ?
веб пак все упакует, все равно нужно вносить правки

Написано более года назад
Вадим @ShVad Автор вопроса

Владимир Коротенко, через веб пак я упакую vuejs + базовые компоненты.

Например Вы разработчик, захотите написать дополнительный модуль для нашей системы в котором понадобятся новые компоненты для vue.
Нужно чтобы Ваш js можно было подключить просто через script src= и он расширил сборку.

Написано более года назад
Владимир Коротенко @firedragon

Вадим, посмотрите в эту сторону https://xon5.medium.com/splitting-a-vue-pwa-into-m...

Написано более года назад
Вадим @ShVad Автор вопроса

Владимир Коротенко, в моем случае роуты будут не известны, модули могут меняться и пользователи могут свои писать.
Получается каждая страница модуля админки будет отдавать html разметку в которой уже будут вставлены необходимые компоненты, нужно их как то обработать.

Написано более года назад

Вадим @ShVad Автор вопроса

Владимир Коротенко,

<body>
    <div id="app">
        <DateTime/>
    </div>
  </body>

main.js

import { createApp } from 'vue'
//import App from './App.vue'
import DateTime from './components/DateTime.vue'

createApp({
    components: {
        DateTime
    },
    data() {
        return {
            count: 0
        }
    }
}).mount('#app')

Можно как то обработать компонент DateTime ?

Написано более года назад

Владимир Коротенко @firedragon

Вадим, вот этом коде все вообще бесшовно встанет, я просто не понимаю ваших опасений, опишите что может пойти не так

Написано более года назад
Вадим @ShVad Автор вопроса

Владимир Коротенко, в админке у каждого модуля (/admin/users, /admin/orders) будет свой контроллер.
При переходе на страницу (например /admin/users) контроллер браузеру отдает html каркас в котором уже прописаны необходимые компоненты и через script src указаны скрипты (на некоторых страницах может быть просто обычная html верстка).
Мне нужно чтобы vuejs обработал эти компоненты.
На всех страницах будет подключен стандартный билд который содержит vue + базовые компоненты, но так же нужна возможность чтобы каждый модуль (контроллер) мог подключить через script src дополнительные компоненты.

Можно вот так это реализовать:

Но я хочу сборщиком собрать vuejs + набор компонентов (писать их в формате .vue) и к этой сборке через script src подключать при необходимости дополнительные компоненты (желательно их тоже писать в формате .vue).

Спасибо за советы

Написано более года назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

React

+2 ещё

Средний
Как загружать данные перед серверным рендерингом в React?
- 2 подписчика
- 12 часов назад
- 87 просмотров
1

ответ
Node.js

+3 ещё

Средний
Как решить ошибку Nuxt 3: does not provide an export named execa?
- 1 подписчик
- вчера
- 35 просмотров
0

ответов
Vue.js

Простой
Как выделять данные в столбце таблицы различными цветами?
- 1 подписчик
- вчера
- 163 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как сформировать маску, используя регулярное выражение?
- 1 подписчик
- вчера
- 76 просмотров
2

ответа
JavaScript

+1 ещё

Средний
Как сделать программную навигацию без изменения url в vue-router + vue3?
- 1 подписчик
- вчера
- 49 просмотров
0

ответов
Vue.js

Простой
Из-за чего может добавлять слеш в url?
- 1 подписчик
- 23 апр.
- 51 просмотр
0

ответов
JavaScript

+1 ещё

Простой
Почему при добавление переменно в style, она перестаёт обновляться?
- 1 подписчик
- 22 апр.
- 71 просмотр
1

ответ
Vue.js

Средний
Какие существуют способы отреагировать на удаление элемента из массива, который передается как пропс в другие компоненты?
- 1 подписчик
- 22 апр.
- 41 просмотр
1

ответ
Фронтенд

+2 ещё

Простой
Как правильно разделить frontend и backend на проекте с переездом на другой стек?
- 2 подписчика
- 22 апр.
- 145 просмотров
1

ответ
CSS

+1 ещё

Средний
Не работают переносы слов (CSS hyphens) в OPERA. В чём может быть проблема?
- 1 подписчик
- 20 апр.
- 55 просмотров
1

ответ
Показать ещё Загружается…

Frontend Vue & Capacitor Developer Middle++

Parasol Software

от 2 000 до 2 500 $

Frontend developer (middle/senior)

//stablecode

от 210 000 ₽

Fullstack разработчик (Laravel+Vue)

Данафлекс • Казань

от 120 000 ₽

Требуется Pure PhP + Symfony (Обязательно) разработчик для CRM/ERP

26 апр. 2024, в 14:07

3000 руб./в час

Спарсить каталог сайта

26 апр. 2024, в 14:06

15000 руб./за проект

Доработка бота на языке C++ (D) (достойная оплата труда)

26 апр. 2024, в 14:06

55555 руб./за проект

почему не Npm ?
веб пак все упакует, все равно нужно вносить правки
Владимир Коротенко, через веб пак я упакую vuejs + базовые компоненты.

Например Вы разработчик, захотите написать дополнительный модуль для нашей системы в котором понадобятся новые компоненты для vue.
Нужно чтобы Ваш js можно было подключить просто через script src= и он расширил сборку.
Вадим, посмотрите в эту сторону https://xon5.medium.com/splitting-a-vue-pwa-into-m...
Владимир Коротенко, в моем случае роуты будут не известны, модули могут меняться и пользователи могут свои писать.
Получается каждая страница модуля админки будет отдавать html разметку в которой уже будут вставлены необходимые компоненты, нужно их как то обработать.
Владимир Коротенко,

<body> <div id="app"> <DateTime/> </div> </body>

main.js

import { createApp } from 'vue' //import App from './App.vue' import DateTime from './components/DateTime.vue' createApp({ components: { DateTime }, data() { return { count: 0 } } }).mount('#app')

Можно как то обработать компонент DateTime ?
Вадим, вот этом коде все вообще бесшовно встанет, я просто не понимаю ваших опасений, опишите что может пойти не так
Владимир Коротенко, в админке у каждого модуля (/admin/users, /admin/orders) будет свой контроллер.
При переходе на страницу (например /admin/users) контроллер браузеру отдает html каркас в котором уже прописаны необходимые компоненты и через script src указаны скрипты (на некоторых страницах может быть просто обычная html верстка).
Мне нужно чтобы vuejs обработал эти компоненты.
На всех страницах будет подключен стандартный билд который содержит vue + базовые компоненты, но так же нужна возможность чтобы каждый модуль (контроллер) мог подключить через script src дополнительные компоненты.

Можно вот так это реализовать:

Но я хочу сборщиком собрать vuejs + набор компонентов (писать их в формате .vue) и к этой сборке через script src подключать при необходимости дополнительные компоненты (желательно их тоже писать в формате .vue).

Спасибо за советы

Как собрать модульно проект на vuejs?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт