Описание проекта

Этот проект разработан с использованием Vue.js, HTML и SCSS. Он предоставляет примеры компонентов пользовательского интерфейса и стилей типографики, которые могут быть использованы в других веб-приложениях.

Особенности проекта

1. Компоненты пользовательского интерфейса (UI):

   • Прогресс-бары и прогресс-круги для отображения статуса выполнения задач.
   • Радиокнопки для выбора одного из нескольких вариантов.
   • Таблица для представления структурированных данных.
   • Вкладки для организации контента по разделам.

2. Типографика:

   • В проекте реализованы различные стили заголовков для демонстрации их внешнего вида.

Описание файлов проекта

1. Компоненты UI:

   • ProgressBar.vue: Компонент прогресс-бара.
   • ProgressCircle.vue: Компонент прогресс-круга.
   • Radiobutton.vue: Компонент радиокнопки.
   • BaseTable.vue: Базовый компонент таблицы.
   • TableRow.vue: Компонент строки таблицы.
   • TableColumn.vue: Компонент столбца таблицы.
   • Tabs.vue: Компонент вкладок.

2. Представления (Views):

   • Index.vue: Главная страница приложения.
   • ButtonView.vue: Демонстрация кнопок.
   • TypographyView.vue: Демонстрация типографики.
   • CheckboxView.vue: Демонстрация флажков.
   • RadiobuttonView.vue: Демонстрация радиокнопок.
   • ProgressView.vue: Демонстрация прогресс-баров и прогресс-кругов.
   • InputView.vue: Демонстрация текстовых полей ввода.
   • TabsView.vue: Демонстрация вкладок с контентом.
   • TableView.vue: Демонстрация таблицы с данными.

3. Глобальные файлы:

   • App.vue: Основной компонент приложения.
   • main.js: Входная точка приложения.
   • global.scss: Глобальные стили для всего приложения.

Структура проекта

• src/
  • views/
    • Index.vue
    • ButtonView.vue
    • TypographyView.vue
    • CheckboxView.vue
    • RadiobuttonView.vue
    • ProgressView.vue
    • InputView.vue
    • TabsView.vue
    • TableView.vue
  • components/
    • ui/
      • Button.vue
      • Checkbox/
        • Checkbox.vue
      • Progress/
        • ProgressBar.vue
        • ProgressCircle.vue
      • Radiobutton.vue
      • table/
        • BaseTable.vue
        • TableColumn.vue
        • TableRow.vue
      • Tabs.vue
      • layout/
        • Layout.vue
    • router/
      • index.js
  • styles/
    • global.scss

Использование

Чтобы запустить проект локально, выполните следующие шаги:

1. Убедитесь, что у вас установлен Node.js.
2. Клонируйте репозиторий на свой компьютер.
3. Установите зависимости, выполнив команду npm install.
4. Запустите приложение, используя команду npm run serve.