Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dmitrystoyan/rapira-blog
✔ Тестовое задание: "Blog"
https://github.com/dmitrystoyan/rapira-blog
sass tailwind typescript vue3
Last synced: 11 days ago
JSON representation
✔ Тестовое задание: "Blog"
- Host: GitHub
- URL: https://github.com/dmitrystoyan/rapira-blog
- Owner: DmitryStoyan
- Created: 2024-08-21T17:23:42.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-08-27T14:46:25.000Z (3 months ago)
- Last Synced: 2024-10-17T15:30:48.235Z (28 days ago)
- Topics: sass, tailwind, typescript, vue3
- Language: Vue
- Homepage: https://rapira-blog.vercel.app
- Size: 998 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Документация
## Архитектура приложения и используемые технологии
### Архитектура приложения
Основные компоненты приложения включают:
1. **App.vue**: Главный компонент, который управляет общим состоянием поиска и фильтрации, а также передает эти данные дочерним компонентам.
2. **BlogHeader.vue**: Компонент заголовка блога, который содержит элементы поиска и фильтрации.
3. **Blog.vue**: Основной компонент блога, который отображает список постов на основе поискового запроса и активных тегов.
4. **Modal.vue**: Модальное окно, отображающее подробности поста и комментарии.
5. **FilterComponent.vue**: Компонент, отвечающий за отображение и управление фильтрами.
6. **FilterSection.vue**: Секцию фильтров, которая отображается при активации фильтров.
### Используемые технологии
- **Vue 3**: Основная библиотека для построения пользовательского интерфейса, использующая Composition API.
- **TypeScript**: Язык программирования, расширяющий JavaScript типизацией.
- **Vite**: Современный сборщик и сборка модулей для разработки на Vue.
- **Tailwind CSS**: Утилитарный CSS-фреймворк для стилизации компонентов.
## Инструкция по установке и запуску проекта
### Установка
1. **Клонируйте репозиторий:**
```bash
git clone
```
2. **Установите зависимости:**
```bash
npm install
```
3. **Запуск в режиме разработки:**
```bash
npm run dev
```
4. **Сборка для продакшн:**
```bash
npm run build
```
5. **Запуск сборки:**
```bash
npm run serve
```