Использование независимого проекта Vue в другом как пакет узла - PullRequest
Новая
       5

Использование независимого проекта Vue в другом как пакет узла

0 голосов
/ 09 мая 2018

Я застрял в некоторых архитектурных изменениях в моих проектах, и мне нужно руководство, чтобы начать работу. Вот моя проблема.

Контекст Я начал с одного приложения Vue, которое включало ряд компонентов, таких как запросы, визуализации, CRUD и т. Д. Сам запрос представляет собой комбинацию нескольких независимых компонентов (в основном, форм). Позже я запустил другое приложение с совершенно другим сценарием использования, но оно также требует функциональности запросов. Итак, я просто включил в него запросы компонентов.

Сценарий Теперь все работает нормально, но управлять обновлениями / изменениями запросов к компонентам в обоих этих отдельных проектах довольно сложно. Сейчас я подумываю сделать компонент запросов как отдельный независимый инструмент / пакет и включить его в оба проекта. Это облегчит мне управление кодами компонентов Querying, так как тогда мне останется только внести изменения в одну базу кода.

Постановка задачи Основная проблема заключается в том, что компонент запросов, который я собираюсь разделить, в значительной степени опирается на централизованное управление состояниями Vuex с использованием его мутаций, действий и методов получения. Я видел несколько учебных пособий и блогов о том, как сделать один компонент Vue в виде пакета npm. Но мой вариант использования немного отличается. В моем случае, как я уже говорил ранее, у меня есть несколько компонентов (в зависимости от мутаций и действий Vuex) в Querying. Теперь я озадачен тем, как отделить Querying от собственного хранилища Vuex, а затем включить его в приложение с соответствующим хранилищем Vuex этого приложения.

Я никогда раньше не создавал пакет узлов, может быть, это что-то тривиальное и базовое, чего я не получаю, поэтому прошу прощения за мои меньшие знания в области.

Любая помощь / предложение будет высоко ценится

1 Ответ

0 голосов
/ 10 мая 2018

Давайте попробуем дать вам правильный ответ. Представьте, что у вас есть пакет npm с компонентом запросов и store . Затем ваш пакет npm должен экспортировать что-то вроде (проверьте ниже), чтобы иметь возможность создать новый экземпляр Vue с хранилищем и компонентом: 

import Querying from '[path]/components/Querying'
import store from '[path]/store';

export default {
    QueryingComponent: Querying, store: store
}

Код выше должен быть в точке входа вашего webpack.conf . Если точкой входа является файл с именем index.js, то он должен находиться внутри этого файла. 

module.exports = {
entry: resolve('/src/index.js'),
...

С другой стороны, после установки пакета у вас будут доступны компонент и хранилище. Так что вы можете создать экземпляр Vue и отобразить его в другой части страницы, просто создав новый div с другим идентификатором на странице index.html . 

import components from '[your package]';
const yourStore = components.store;
const yourQueryingComponent = components.QueryingComponent;

new Vue({
  yourStore,
  render: (h) => h(yourQueryingComponent),
}).$mount('#another-app');

Надеюсь, это поможет!

...