МИНОБРНАУКИ РОССИИ

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ

УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ

«НИЖЕГОРОДСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ

УНИВЕРСИТЕТ ИМ. Р.Е. АЛЕКСЕЕВА»

(НГТУ)

Практическое занятие №9

Разработка ИС по принципу SPA

Выполнил:

Студент гр. 23-ИСТ-1-1

Какушкина О.В

Проверил: Шутов А.А

Нижний Новгород

2025

Ход работы

Цель работы:

Разработка ИС по принципу SPA

Задание 1. Установите node.jsСоздано SPA-приложение с использованием Vue CLI

• Установлена последняя LTS-версия Node.js (18.x) с официального сайта

• Проверена корректность установки командой:

• node -v

• npm -v

• Установлен Vue CLI глобально:

• npm install -g @vue/cli

Задание 2 Установите фреймворк разработки web-приложения и создайте проект (vue приложение).

• Создан новый проект с помощью Vue CLI:

• vue create vue-app

• Выбрана конфигурация с Router и CSS препроцессорами

• Установлены дополнительные зависимости:

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome

Задание 3 Оформите структуру ИС согласно фреймворку.

Пример конфигурации роутера (router/index.js):

import { createRouter, createWebHistory } from 'vue-router'

import HomeView from '@/views/HomeView.vue'

import AboutView from '@/views/AboutView.vue'

import PortfolioView from '@/views/PortfolioView.vue'

const routes = [

  {

    path: '/',

    name: 'home',

    component: HomeView

  },

  {

    path: '/about',  // Исправлено: должно быть /about, а не путь к файлу

    name: 'about',

    component: AboutView

  },

  {

    path: '/portfolio',

    name: 'portfolio',

    component: PortfolioView,

    // Добавляем поддержку якорных ссылок

    props: (route) => ({ hash: route.hash })

  }

]

// Исправление для BASE_URL

const BASE_URL = process.env.BASE_URL || '/'

const router = createRouter({

  history: createWebHistory(BASE_URL),  // Используем переменную вместо import.meta.env

  routes,

  // Плавная прокрутка к якорям

  scrollBehavior(to) {

    if (to.hash) {

      return {

        el: to.hash,

        behavior: 'smooth'

      }

    }

    return { top: 0 }

  }

})

export default router

Задание 4 Оформите страницу ИС в форме компонента.

Создание страницы портфолио (PortfolioView.vue)

Рисунок 1 Страница портфолио

Рисунок 2 Страница портфолио

Рисунок 3 Страница портфолио

Рисунок 4 подвал траница портфолио

Импорт компонентов

import Gallery from '@/components/Gallery.vue'

import ContactForm from '@/components/ContactForm.vue'

export default {

name: 'PortfolioView',

components: {

Gallery,

ContactForm

}

}

Код страницы с компонентами

<template>

<div class="portfolio-container">

<h1 class="portfolio-title">ВЫПОЛНЕННЫЕ ПРОЕКТЫ</h1>

<Gallery />

<section class="work-process">

<h2 class="work-process-title">КАК СТРОИТСЯ РАБОТА</h2>

<div class="process-container">

<!-- Блок 1 -->

<div class="process-block">

<div class="block-number">1</div>

<div class="block-content">

Вы можете позвонить нам, или оставить заявку - флорист свяжется с вами, уточнит вид озеленения, проконсультирует

</div>

</div>

<!-- Блок 2 -->

<div class="process-block">

<div class="block-number">2</div>

<div class="block-content">

К вам приедет фитодизайнер для осмотра места озеленения и сделает замеры

</div>

</div>

<!-- Блок 3 -->

<div class="process-block">

<div class="block-number">3</div>

<div class="block-content">

Мы подготовим проектно-сметную документацию

</div>

</div>

<!-- Блок 4 -->

<div class="process-block">

<div class="block-number">4</div>

<div class="block-content">

Подготовка 3D визуализации места озеленения и согласование

</div>

</div>

<!-- Блок 5 -->

<div class="process-block">

<div class="block-number">5</div>

<div class="block-content">

Установка озеленения мастерами и инструктаж по уходу

</div>

</div>

<!-- Блок 6 -->

<div class="process-block">

<div class="block-number">6</div>

<div class="block-content">

Вы наслаждаетесь свежей зеленью и стильным оформлением

</div>

</div>

</div>

<div class="process-image"></div>

</section>

<ContactForm />

</div>

</template>

Выводы

В ходе выполнения работы я успешно освоила ключевые аспекты разработки современных веб-приложений с использованием фреймворка Vue.js 3. Мной были реализованы все поставленные задачи, включая создание компонентной архитектуры, настройку клиентской маршрутизации и реализацию интерактивных пользовательских интерфейсов.

Особое внимание я уделила:

• Организации структуры проекта по методологии Vue (SFC-компоненты)

• Созданию переиспользуемых компонентов (ContactForm, Gallery)

• Реализации сложной валидации форм с обработкой различных сценариев ввода

• Настройке плавных переходов между состояниями интерфейса

• Адаптивному дизайну с использованием современных CSS-технологий

В процессе работы я освоила:

• Основы работы с Composition API во Vue 3

• Методы создания реактивных форм с двусторонним связыванием данных

• Принципы работы с vue-router для организации SPA

• Техники адаптивной верстки (медиазапросы, относительные единицы измерения)

• Интеграцию сторонних библиотек (Font Awesome) в Vue-компоненты

• Оптимизацию производительности компонентов