A Quasar Framework app
npm install
quasar dev
npm run lint
quasar build
See Configuring quasar.conf.js.
- В папке /components содержаться переиспользуемые компоненты, к-ые как минимум 2 раза используются в приложении
- В папке /pages создается папка для каждого экрана приложения. Папки компонентов внутри экрана (не универсальные) располагаются в папке этого экрана с соответствующим неймингом для читаемой вложенности, например структура внутри папки Profile:
Profile
--ProfileOrder
--ProdileOrderItem
--ProfileData
---ProfileDataItem
- Файлы с расширением
.vue
именуются в CamelCase с большой буквы - Файлы с расширением
.ts
именуются в lowerCamelCase с маленькой буквы - Файлы контроллеров называются controller.ts и возвращают функцию
useController
- При верстке блоков используется БЭМ
- Не используются инлайновые стили
- Используются переменные из файла
app.variables.scss
для повторяющихся значений - Названия классов пишутся в kebab-case, например
.main-screen
- Модификатор для класса обозначается добавлением двойного тире:
--
-
Геттер в getters хранилища имеет имя в формате getNameOfVariable, где nameOfVariable - название переменной из state.
-
Мутация в mutations хранилища имеет имя в формате mutateNameOfVariable, где nameOfVariable - название переменной из state.
-
Сеттер в actions хранилища имеет имя в формате setNameOfVariable, где nameOfVariable - название переменной из state.
-
В том случае, если при ajax запросе с бэкенда принимаются переменные не в camelcase - на уровне мутации производить ассоциацию с корректно названными переменными.
-
Названия функций должны начинаться с глагола действия и быть информативными. Не знаешь, как назвать функцию? Ответь на вопрос, что она будет делать.
-
Называть события, которые вызываются через document.dispatchEvent в стиле "название_блока.название_функции". Пример вызова события:
document.dispatchEvent(new CustomEvent('order.checkStatus', { detail: { url } }));
- Обязательная обработка ошибок с запросов и ошибок внутри методов
- Если функция работает с данными с бэка, то максимально подгатавливаться к тому, что что-то может не прийти
- Проверить, что все константы используемые в коде вынесены в переменные
- Принцип Single Responsibility - метод должен выполнять только одну задачу
- Используется модульный подход: у каждого компонента стили вынесены в style.scss, а логика в controller.ts
- Параметр
name
в компоненте соответсвует названию файла - В методе setup делать объявления переменных рядом с местами их использования
- Переиспользуемые функции делать универсальными и выносить в src/features
- Функции, выполняющие роль фильтров выносить в src/filters
- Если в шаблоне используются таймеры, интервалы или "слушатели" событий очищать их методе beforeUnmounted
- Использовать src/services для формирования функций обращения к API