Как собрать модульно проект на 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).

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

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

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

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

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

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

Laravel

+2 ещё

Средний
Как разместить приложение nuxt 3 в режиме SPA на сервер без node.js?
- 1 подписчик
- 9 часов назад
- 29 просмотров
0

ответов
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- вчера
- 97 просмотров
2

ответа
Vue.js

Простой
Как прокинуть данные из одного дочернего компонента в другой?
- 1 подписчик
- 22 нояб.
- 100 просмотров
1

ответ
Vue.js

Простой
Как игнорировать клик на компоненте?
- 1 подписчик
- 22 нояб.
- 68 просмотров
1

ответ
Vue.js

+1 ещё

Средний
Как правильно типизировать vue generic components?
- 2 подписчика
- 21 нояб.
- 124 просмотра
1

ответ
Vue.js

Простой
В какую сторону развивается Vue и есть ли ему современные альтернативы?
- 6 подписчиков
- 21 нояб.
- 5321 просмотр
3

ответа
API

+1 ещё

Простой
Бэкенд или фронтенд должен объединять таблицы по FK?
- 1 подписчик
- 20 нояб.
- 84 просмотра
3

ответа
API

+1 ещё

Простой
В поле какого типа передавать на фронтенд расшифровку статуса: строка или enum?
- 1 подписчик
- 20 нояб.
- 59 просмотров
2

ответа
Vue.js

Средний
Как можно вытащить типы пропсов из определения компонента?
- 1 подписчик
- 15 нояб.
- 106 просмотров
1

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

+4 ещё

Средний
Сократите время выполнения кода JavaScript — privacy-cs.mail.ru/static/sync-loader.js — что это?
- 2 подписчика
- 14 нояб.
- 134 просмотра
1

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

Frontend Developer (Vue/Nuxt)

tactic.team

от 140 000 до 180 000 ₽

Frontend разработчик (Vue)

Creatium

от 150 000 ₽

😃 Frontend developer Vue 💻📱⌚️

Viletech • Москва

от 150 000 ₽

Аудит и поддержка проекта внедрению виртуальной архитектуры (АСУ ТП)

25 нояб. 2024, в 03:04

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

Сделать простой лендинг

25 нояб. 2024, в 02:45

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

Изображения на главную страницу в стиле Jetton и 1вин

25 нояб. 2024, в 00:22

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

почему не 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?

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

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

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