Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/serpentarius13/vue-testovoe

Last synced: 7 days ago
JSON representation

Host: GitHub
URL: https://github.com/serpentarius13/vue-testovoe
Owner: Serpentarius13
Created: 2022-12-22T16:22:49.000Z (about 2 years ago)
Default Branch: master
Last Pushed: 2022-12-22T20:59:20.000Z (about 2 years ago)
Last Synced: 2024-11-15T01:30:15.519Z (2 months ago)
Language: Vue
Size: 627 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Тестовое задание на позицию Front-end разработчика

## Для запуска выполните команды:

- git clone https://github.com/Serpentarius13/vue-testovoe
- yarn
- yarn serve

### Проект представляет из себя простое двухстраничное SPA приложение с навигацией

#### Основной функционал:

- Боковое меню с полностью переиспользуемыми кнопками. За них отвечает компонент **BaseSidebarButton**. В props компонента необходимо указать текст и ссылку на картинку в public папке.
- Просмотр постов с фейкового API. Текст поста скрыт изначально и появляется при нажатии на название поста. Посты можно удалять, кнопка оснащена подтверждением, после чего отправляется DELETE запрос на сервер.
- Форма для создания собственного поста. Форма сделана через полу-переиспользуемые компоненты, также есть небольшая самодельная валидация без вывода сообщения об ошибке на экран (вместо него пока alert)

##### Что было использовано при создании:

- Vue CLI и Vue-router c lazy-loading'ом страницы с постами
- Vue Composition API в Single File Components (SFC)
- SCSS для стилей c частичной BEM имплементацией (экстерминировать эту гадость в scoped стилях позже)

###### Чему можно научиться из проекта:

- Основы работы с Vue
- Как создавать переиспользуемые компоненты
- Как использовать Vue-router
- Как работать с реактивными props и defineEmits
- Как стилизовать чекбоксы
- Как работать с BEM в SCSS

#### Спасибо за внимание 💜

![floppa](./public/floppa.jpg)