Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vaheaa/ducky-test
https://github.com/vaheaa/ducky-test
Last synced: 21 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/vaheaa/ducky-test
- Owner: VaheAA
- Created: 2024-12-15T12:03:24.000Z (26 days ago)
- Default Branch: main
- Last Pushed: 2024-12-15T12:35:52.000Z (26 days ago)
- Last Synced: 2024-12-15T13:18:33.874Z (26 days ago)
- Language: Vue
- Size: 520 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Проект на Vite/Vue 3 с TypeScript
## Описание
Этот проект разработан с использованием Vite и Vue 3 с TypeScript для обеспечения быстрого и современного рабочего процесса. В проекте используются:
- **Vite**: Быстрый инструмент сборки для современного JavaScript.
- **Vue 3**: Прогрессивный фреймворк для разработки пользовательских интерфейсов.
- **TypeScript**: Типизация для улучшения читаемости и надежности кода.
- **ESLint** и **Prettier**: Для поддержания единого стиля кода и качества.
- **CSS Modules**: Инкапсуляция стилей для отдельных компонентов.
- **Mobile First**: CSS написан в соответсвии с подходом Mobile First.
- **Vitest**: Используется для создания различных тестов.
- **Подход с лейаутами**: Удобная структура для построения многостраничных приложений.
## Установка и запуск
1. Клонируйте репозиторий:
```bash
git clone https://github.com/VaheAA/playducky-test.git
cd playducky-test
```
2. Установите зависимости:
```bash
yarn install
```
3. Запустите проект в режиме разработки:
```bash
yarn dev
```
4. Откройте [http://localhost:5173](http://localhost:5173) в браузере для просмотра приложения.
## Скрипты
- `yarn dev`: Запуск приложения в режиме разработки.
- `yarn build`: Сборка проекта для продакшена.
- `yarn lint`: Запуск ESLint для проверки кода.
- `yarn format`: Форматирование кода с использованием Prettier.
- `yarn test`: Запустк тестов Vitest.
## Структура проекта
```plaintext
src/
├── components/ # Компоненты приложения
├── layouts/ # Лейауты приложения
├── views/ # Страницы приложения
├── assets/ # Различные ассеты, изображения, шрифты, глобальные CSS файлы
├── shared/ # Различные переиспользуемые константы, функции, и тд.
├── router/ # Конфигурация Vue Router
├── test/ # Различные тесты
├── App.vue # Главный компонент
├── main.ts # Точка входа приложения
```
## Инструменты
- **ESLint**: Настроен для проверки качества кода с правилами для TypeScript и Vue 3.
- **Prettier**: Автоматическое форматирование кода.
- **CSS Modules**: Для изолирования стилей в компонентах. Использование:
```vue
Пример
.example {
color: red;
}
```