Съвети и трикове за надграждане до най-новата и най-добрата версия на Quasar!

На работа току-що завърших надграждането/пренасянето на 17k+ реда код Quasar SPA проект от v.17 до най-новата v1.2. Това отне малко повече от седмица (52 регистрирани часа).

В тази статия ще ви дам информация, която да ви помогне да пренесете вашите собствени проекти. Надяваме се, че не са толкова големи, колкото моите, така че времето ви за завършване ще бъде по-бързо.

Първо, Quasar v1.2 е впечатляващ. Кодът във версия 1.X е пренаписан от v.17. Той е по-бърз и по-подходящ за разработка с много повече компоненти. И все още има допълнителна полза от използването на Quasar CLI, където голяма част от трудната работа по настройване и изграждане на приложения за различни устройства се извършва вместо вас.

Първи стъпки

Преди да започнете по пътя си към преобразуване, трябва да се запознаете с Ръководството за надстройка на Quasar. Това съдържа ценна информация и е добра справка, ако се затрудните.

Първото нещо, което трябва да направите, ако още не сте го направили, е да премахнете стария глобален Quasar CLI.

$ npm remove -g quasar-cli

Следващото нещо, което трябва да направите, е да инсталирате глобалния Quasar CLI (ако все още не сте го направили).

$ npm install -g @quasar/cli

Екипът на Quasar препоръчва използването на npm за вашето глобално управление на пакети и yarn за вашето локално управление на пакети. Има много докладвани проблеми с npm и локални пакети. Забелязахме, че щом хората започнат да използват прежда, тези проблеми изчезват.

Ако сте прочели Ръководството за надстройка на Quasar, то препоръчва да направите своя порт на място. От личен опит не препоръчвам този маршрут. Вместо това ще създадем нов проект Quasar и ще пренесем целия код от стария ви проект към новия ви проект.

И така, като начало създайте своя нов проект:

$ quasar create <project-name>

След като проектът е създаден, продължете и го отворете с любимия си редактор и започнете да го преглеждате. Разгледайте бързо скелето. Ще разберем как се е променило скелето и как да се справим с тези промени само за момент.

Сега добавете всички ваши зависими пакети, които сте имали в предишния си проект. Уверете се, че използвате прежда, но ако смятате, че трябва да използвате npm, продължете. Ако нещо се обърка, не можете да кажете, че не съм ви предупредил.

Скеле

Едно нещо, което може би сте забелязали е, че папката plugins липсва и сега има нова папка boot. Освен това структурата на папките е останала същата. Причината за преименуването на папката plugins е да се избегне объркване със собствените вътрешни Vue добавки на Quasar, които също се наричат ​​plugins.

Файлове за стартиране — (от документите на Quasar)

Файловете за стартиране изпълняват една специална цел: те изпълняват код, преди Vue root компонентът на приложението да бъде инстанциран, като същевременно ви дават достъп до определени променливи, което е необходимо, ако трябва да инициализирате библиотека, да се намесите във Vue Router, да инжектирате Vue прототип или да инжектирате root екземпляра на приложението Vue.

Ако имате някакви добавки от предишния си проект, конвертирайте ги сега във файлове за зареждане. Работата с зареждащ файл е същата като старите плъгини файлове, с единствената разлика, че те могат да се изпълняват и асинхронно.

Можете да създадете файл за зареждане с помощта на Quasar CLI:

$ quasar new boot <name>

Създайте еквивалентните файлове за зареждане в новия проект и пренесете кода от старите си добавки. Това ще ви позволи да видите как се е променила анатомията на файла за зареждане, в случай че трябва да се възползвате от това.

quasar.conf.js

Този файл е относително останал непроменен, с изключение на няколко неща. Важното, което трябва да се отбележи, е, че свойството „plugins: []” е логично променено на „boot: []”, за да следвате промяната на структурата на папките. Това е мястото, където поставяте имената на вашите файлове за зареждане, така че Quasar да може да ги разпознае и да ги добави към компилацията.

Пренасяне

Преди да пренесете, ето няколко неща, за които трябва да внимавате:

1. Погледнете оформлението по подразбиране, създадено в папката layouts. За този файл можете или може да не искате да пуснете стария си файл с оформление върху него. Ако забележите твърде много промени, може да искате да пренесете този файл на ръка.

2. Погледнете файловете в папката маршрути. Отново, това е една от онези области, които може да са по-добри, ако изберете стария си код и го поставите в новия код.

За всички други файлове е добре да ги пуснете в съответните им местоположения. Обичам да използвам приложение, наречено Meld, но ако сте на Windows, не се колебайте да използвате WinMerge. Много си приличат.

eslint-plugin-quasar

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, която ви помага с linting, така че можете да я стартирате сега.

$ yarn lint

The Grunt Work

След като стартирате линтера, ще видите много предупредителни съобщения. Някои ще бъдат за компоненти, които са били преименувани, други, които вече не съществуват и т.н. eslint-plugin-quasar ще направи препоръки. Повечето от тях можете да извършите, като преименувате компонента на ръка. Трябва да разгледате всяко предупреждение и съответния компонент в Quasar docs и да се уверите, че това е, което искате да направите.

Ето един пример:

/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: порт, за да мога лесно да го търся и да го прегледам по-късно.

Продължете да изпълнявате linter и да правите съответните модификации, докато няма повече предупреждения или грешки.

Quasar v1.2

След като преобразувате целия наследен код, е време да включите някои правила на eslint за Quasar v1+.

Още веднъж отворете файла .eslintrc.js.

Промяна в секцията `правила`:

{
 “rules”: [
 ‘quasar/check-valid-props’: ‘warn’,
 ‘quasar/no-invalid-qfield-usage’: ‘warn’
 ]
}

Отново стартирайте линтера:

$ yarn lint

Да, цял нов набор от предупреждения, с които трябва да се справите. Повечето от тях ще бъдат имоти, които вече не съществуват.

Обаче второто правило, което беше добавено наскоро, е за QInput и QSelect, които се обвиват от QField (и това правило е рекурсивно). Причината за това е, че QInput и QSelect използват QField като mix-in и следователно вече не изискват QField като родителски компонент. Всяко от тези предупреждения ще трябва да се разгледа внимателно. Повечето от свойствата, които използвате за QField, могат да бъдат преместени в QInput и QSelect.

Време за изграждане

След като се справите с всички предупреждения и грешки, вече можете да изградите своя проект.

$ quasar build

Ако има някакви грешки при изграждането, отстранете ги сега. След това опитайте да изградите отново. Повторете, докато изграждането завърши. Нямах никакви проблеми в тази област, но вашият пробег може да варира, така че реших, че трябва да го включа.

Други проблеми

След като стартирате проекта си, все още може да има няколко проблема, с които линтерът не може да ви помогне.

Например в QSelect може да се наложи да добавите следните свойства, за да получите същата функционалност, която сте имали преди:

map-options emit-value

Друг проблем, който може да имате, е, че използването на иконата за QInput се е променило. Вече използвате слотовете prepend и append за добавяне на икони и функционалност. Това означава, че ако сте използвали стария QInput с type="password", сте можели да превключвате иконата на око, за да направите паролата видима. Все още можете да получите тази функционалност, като следвате подходящия пример, който използва слота за добавяне, за да постигне същото.

Заключение

Информацията по-горе в никакъв случай не е изчерпателна. Ако имате нужда от помощ, ето някои неща, които трябва да запомните (съгласно Ръководството за надстройка на Quasar):

1. Прочетете документацията, преди да задавате въпроси на нашия Discord сървър или форуми.
2. Подгответе CodePen, за да може персоналът да ви помогне.
3. Разровете изходния код на Quasar (това ще ви помогне да разберете рамка, както и да ви научи на най-добри практики за програмиране с Vue).
4. Не използвайте компоненти на рамката като миксини, освен ако не е абсолютно необходимо (увийте ги, ако имате нужда).
5. Не се насочвайте към вътрешни компонентни неща с CSS селектори, освен ако не е абсолютно необходимо.
6. Препоръчваме yarn, когато е възможно, поради неговата скорост и ефективна употреба. Въпреки това, когато използвате глобални, все още препоръчваме да използвате NPM, особено ако използвате nvm (Node Version Manager).
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