Разработка подмодуля крупномасштабного проекта веб-интерфейса на основе Vue

внешний интерфейс JavaScript Vue.js Vuex vue-router

Как мы все знаем, после появления веб-пакетов и одностраничных приложений фронтенд-инженеры стали универсальным решением от разработки до упаковки.Из прежних утомительных многих файлов js, css и html теперь они упакованы в один или несколько файлов, что можно назвать улучшением. Но по мере того, как проект становится все больше и больше, в команде становится все больше и больше людей, и необходимо разрабатывать все больше и больше модулей. Такие традиционные одностраничные приложения уже не могут соответствовать требованиям проекта.

Предыстория требований:

1. Проект относительно большой и имеет много модулей, поэтому для разработки разных модулей по отдельности требуется несколько фронтенд-инженеров.
2. Время выхода каждого модуля в онлайн в производственной среде разное, что приводит к необходимости скрывать соответствующие незавершенные функции разных функциональных модулей при их выходе в онлайн.
3. Некоторые модули необходимо разрабатывать отдельной строкой, и их нельзя размещать в одной версии с другими модулями.

Решения:

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

Подробная реализация

Vue многостраничный фреймворк проекта

Каталог проекта:


В основном это настройка нескольких записей в соответствии с записью веб-пакета, а затем упаковка его в несколько модулей в соответствии с записью при упаковке.
Поскольку я изменил его непосредственно в исходном одностраничном фреймворке, main.js и App.vue по-прежнему находятся на самом внешнем уровне.Если это новый фреймворк, их все можно разместить на страницах.
Конкретную конфигурацию мультивхода см. по адресу: https://segmentfault.com/a/1190000011265006.

Модификация онлайн-скрипта проекта

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

идеальное состояние

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

Возникшие проблемы и решения

  1. Режим vue-router можно использовать только по умолчанию, а не историю Я все еще ищу решение в этом месте.
  2. Проблема с ленивой загрузкой компонента маршрутизации.
    Метод упаковки чанков по умолчанию для webpack в vue scaffolding, все имена чанков являются идентификаторами, поэтому, если файлы чанков, упакованные несколькими страницами, неразличимы, иногда пакеты чанков, созданные несколькими разработчиками, могут перезаписывать друг друга. Решение здесь состоит в том, чтобы использовать vue-router, чтобы дать решение: сгруппировать компоненты в куски.
    Конкретный код реализации:
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')>
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

Вы можете изменить webpackChunkName на имя, связанное с именем файла модуля.Например, модуль приложения будет использовать "имя приложения" единообразно в будущем.
PS: Тут есть одна деталь, то есть если в конфигурационном файле babel'а babelrc "comments": false, то его надо поменять на true. Мой проект не прошел групповую блокировку, потому что это ложь. 3. обмен данными vuex.
Поскольку переход между несколькими страницами является обычным переходом в браузере, данные, сохраненные в vuex, могут быть потеряны. Решение этой проблемы состоит в том, чтобы временно сохранить данные vuex в sessionStorage перед переходом на страницу и инициализировать данные sessionStorage в vuex после завершения перехода. Конкретный код:
При выходе со страницы:

created () {
    let that = this;
    window.onunload = function () {
        sessionStorage.vuexState = JSON.stringify(that.$store.state)
    }
}

При входе на страницу:

created () {
    if(sessionStorage.vuexState){
        for(let i in JSON.parse(sessionStorage.vuexState)){
            this.$store.state[i] = JSON.parse(sessionStorage.vuexState)[i]
        }
    }
}

Конечно, в этом месте я использую метод, который vuex официально не пропагандирует для удобства. Есть лучший способ, которым мы также можем общаться.

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

Категории