Советы и рекомендации по обновлению до последней и лучшей версии Quasar!
На работе я только что завершил обновление / перенос 17k + строк кода проекта Quasar SPA с версии 17 до последней версии 1.2. Это заняло чуть больше недели (52 часа в журнале).
В этой статье я дам вам информацию, которая поможет вам перенести ваши собственные проекты. Надеюсь, они не такие большие, как у меня, поэтому ваше время до завершения будет быстрее.
Во-первых, Quasar v1.2 впечатляет. Код в версии 1.X был переписан с версии 17. Это быстрее и удобнее для разработки с большим количеством компонентов. И все же есть дополнительное преимущество использования Quasar CLI, где за вас выполняется большая часть сложной работы по настройке и созданию приложений для разных устройств.
Первые шаги
Прежде чем приступить к конверсии, вам следует ознакомиться с Руководством по обновлению Quasar. Он содержит ценную информацию и является хорошим справочником, если вы застрянете.
Первое, что нужно сделать, если вы еще этого не сделали, - это удалить старый глобальный интерфейс командной строки Quasar.
$ npm remove -g quasar-cli
Следующее, что нужно сделать, - это установить глобальный интерфейс командной строки Quasar (если вы еще этого не сделали).
$ npm install -g @quasar/cli
Команда Quasar рекомендует использовать npm для глобального управления пакетами и yarn для локального управления пакетами. Сообщалось о многих проблемах с npm и локальными пакетами. Мы заметили, что как только люди начинают использовать пряжу, эти проблемы исчезают.
Если вы прочитали Руководство по обновлению Quasar, оно рекомендует выполнить перенос на месте. По личному опыту не рекомендую этот маршрут. Вместо этого мы создадим новый проект Quasar и перенесем весь код из вашего старого проекта в новый.
Итак, для начала создайте свой новый проект:
$ quasar create <project-name>
Как только проект будет создан, откройте его в своем любимом редакторе и начните рецензировать. Взгляните на строительные леса. Мы скоро узнаем, как изменились строительные леса и как с ними справиться.
Теперь добавьте все ваши зависимые пакеты, которые были у вас в предыдущем проекте. Убедитесь, что вы используете пряжу, но если вы чувствуете, что вам нужно использовать npm, продолжайте. Если что-то пойдет не так, нельзя сказать, что я вас не предупреждал.
Строительные леса
Вы, возможно, заметили, что папка plugins отсутствует, а теперь появилась новая папка boot. В остальном структура папок осталась прежней. Причина переименования папки подключаемых модулей заключается в том, чтобы избежать путаницы с собственными внутренними подключаемыми модулями Vue Quasar, которые также называются подключаемыми модулями.
Загрузочные файлы - (из документации Quasar)
Загрузочные файлы выполняют одну специальную задачу: они запускают код до создания экземпляра корневого компонента Vue приложения, предоставляя вам доступ к определенным переменным, что требуется, если вам нужно инициализировать библиотеку, вмешиваться в Vue Router, внедрить прототип Vue или внедрить корневой экземпляр. приложения Vue.
Если у вас есть плагины из вашего предыдущего проекта, преобразуйте их сейчас в загрузочные файлы. Операция с загрузочным файлом такая же, как и со старыми файлами плагина, с той лишь разницей, что они также могут запускаться асинхронно.
Вы можете создать загрузочный файл с помощью Quasar CLI:
$ quasar new boot <name>
Создайте эквивалентные загрузочные файлы в новом проекте и перенесите код из старых плагинов. Это позволит вам увидеть, как изменилась анатомия загрузочного файла, если вам нужно этим воспользоваться.
quasar.conf.js
Этот файл практически не изменился, за исключением нескольких вещей. Важно отметить, что свойство «plugins: []» логически изменилось на «boot: [] », чтобы следить за изменением структуры папок. Здесь вы помещаете имена своих загрузочных файлов, чтобы Quasar мог их распознать и добавить в сборку.
Перенос
Перед портированием следует обратить внимание на несколько моментов:
1. Посмотрите на макет по умолчанию, созданный в папке макеты. Для этого файла вы можете или не хотите размещать поверх него свой старый файл макета. Если вы заметили слишком много изменений, вы можете перенести этот файл вручную.
2. Посмотрите на файлы в папке routes. Опять же, это одна из тех областей, которая может быть лучше, если вы выберете свой старый код и поместите его в новый код.
Все остальные файлы можно разместить в соответствующих местах. Мне нравится использовать приложение под названием Meld, но если вы работаете в Windows, смело используйте WinMerge. Они очень похожи.
eslint-плагин-квазар
Eslint-plugin-quasar (плагин eslint) был создан с некоторыми правилами, которые помогут вам при переносе. Давайте установим плагин и настроим эти правила.
$ yarn add -D eslint-plugin-quasar
В файл конфигурации .eslintrc.js необходимо внести следующие изменения.
Модификация в раздел plugins:
{
“plugins”: [
“quasar”
]
}
Модификация в раздел extends:
{
“extends”: [
“plugin:quasar/legacy”
]
}
Модификация в раздел rules:
{
“rules”: [
‘quasar/no-legacy-components’: ‘warn’,
‘quasar/no-legacy-css’: ‘warn’,
‘quasar/no-legacy-directives’: ‘warn’,
‘quasar/no-legacy-properties’: ‘warn’
]
}
Обязательно сохраните изменения. (Примечание: Medium изменяет кавычки, поэтому, если вы копируете и вставляете, не забудьте правильно изменить кавычки, чтобы избежать ошибок)
Quasar добавляет в файл package.json команду сценария, которая помогает вам с линтингом, так что вы можете запустить ее сейчас.
$ yarn lint
Основная работа
После запуска линтера вы увидите множество предупреждающих сообщений. Некоторые из них будут касаться компонентов, которые были переименованы, некоторые больше не существуют и т. Д. eslint-plugin-quasar предоставит рекомендации. Большинство из них можно выполнить, переименовав компонент вручную. Вы должны просмотреть каждое предупреждение и соответствующий компонент в документации Quasar и убедиться, что это именно то, что вы хотите сделать.
Вот пример:
/home/me/my-project/src/pages/About.vue 3:5 error ‘q-window-resize-observable’ has been removed 12:17 error ‘q-resize-observable’ has been replaced with ‘q-resize-observer’ 32:17 error ‘q-progress’ has been replaced with ‘q-linear-progress’ 261:19 error ‘q-popover’ has been replaced with ‘q-menu’
Я столкнулся с ситуацией, когда не совсем понимал, чем хочу заниматься. Итак, я заблокировал код комментарием и пометил его тегом TODO: port, чтобы я мог легко найти его и вернуться к нему позже.
Продолжайте запускать линтер и вносить соответствующие изменения, пока не исчезнут предупреждения или ошибки.
Квазар v1.2
После того, как вы преобразовали весь унаследованный код, пора включить некоторые правила eslint для Quasar v1 +.
Еще раз откройте файл .eslintrc.js.
Модификация раздела `rules`:
{
“rules”: [
‘quasar/check-valid-props’: ‘warn’,
‘quasar/no-invalid-qfield-usage’: ‘warn’
]
}
Опять запускаем линтер:
$ yarn lint
Ага, нужно иметь дело с новым набором предупреждений. Большинство из них будут собственности, которой больше не существует.
Однако второе правило, которое было недавно добавлено, предназначено для QInput и QSelect, заключенных в оболочку QField (и это правило рекурсивно). Причина этого в том, что QInput и QSelect используют QField в качестве подмешивания и поэтому больше не требуют QField в качестве родительского компонента. Необходимо внимательно изучить каждое из этих предупреждений. Большинство свойств, которые вы используете для QField, можно переместить в QInput и QSelect.
Время сборки
После того, как вы разобрались со всеми предупреждениями и ошибками, теперь вы можете создавать свой проект.
$ quasar build
Если есть какие-либо ошибки сборки, исправьте их сейчас. Затем попробуйте построить снова. Повторяйте, пока не завершите сборку. У меня не было никаких проблем в этой области, но ваш опыт может отличаться, поэтому я подумал, что должен включить его.
Другие проблемы
После запуска проекта у вас может остаться несколько проблем, с которыми линтер не сможет вам помочь.
Например, в QSelect вам может потребоваться добавить следующие свойства, чтобы получить ту же функциональность, что и раньше:
map-options emit-value
Другая проблема, с которой вы можете столкнуться, - это изменение использования значков для QInput. Теперь вы используете слоты prepend и append для добавления значков и функций. Это означает, что если вы использовали старый QInput с type="password", вы могли переключать значок глаза, чтобы сделать пароль видимым. Вы по-прежнему можете получить эту функциональность, следуя соответствующему примеру, который использует слот append для достижения той же цели.
Заключение
Приведенная выше информация ни в коем случае не является исчерпывающей. Если вам нужна помощь, вот несколько вещей, которые следует запомнить (согласно Руководству по обновлению Quasar):
1. Прочтите документацию, прежде чем задавать вопросы на нашем сервере Discord или форумах.
2. Подготовьте CodePen, чтобы сотрудники могли вам помочь.
3. Изучите исходный код Quasar (это поможет вам понять суть framework, а также научит вас лучшим практикам программирования с помощью Vue).
4. Не используйте компоненты фреймворка в качестве миксинов, кроме случаев крайней необходимости (оберните их, если вам нужно).
5. Не используйте внутренние компоненты с селекторами CSS без крайней необходимости.
6. Мы рекомендуем yarn, когда это возможно, из-за ее скорости и эффективности использования. Однако при использовании глобальных переменных мы по-прежнему рекомендуем использовать NPM, особенно если вы используете nvm (диспетчер версий узлов).
7. Используйте git для управления репозиторием и делайте регулярные коммиты. Это как делать заметки о процессе и позволяет вам вернуться к предыдущему состоянию, если вы застряли.
8. Используйте загрузочные файлы Quasar для любых подпрограмм перед монтированием приложений.
9. Будьте очень осторожны при использовании других библиотек - Quasar не может гарантировать, что они будут быть полностью совместимым
10. Наконец, станьте [спонсором / спонсором] (https://donate.quasar.dev/) и получите доступ к специальному чату поддержки Discord для приоритетной поддержки.
Я потратил несколько дней на преобразование приложения моей компании. Надеюсь, ваш проект не такой большой, как мой. Независимо от того, большой у вас проект или маленький, я надеюсь, что эти советы и рекомендации по обновлению помогут вам.
Если у вас есть дополнительные советы и рекомендации или опыт обновления до Quasar версии 1.X, сообщите нам об этом в комментариях ниже. Мы будем рады услышать о них.
Заинтересованы в Quasar? Вот еще несколько советов и информации:
Дополнительная информация: https://quasar.dev
GitHub: https://github.com/quasarframework/quasar
Начало работы: https://quasar.dev/start
Сервер чата: https://chat.quasar.dev/
Форум: https: // forum .quasar.dev /
Twitter: https://twitter.com/quasarframework
Пожертвовать: https://donate.quasar.dev
