Фреймворк Vue.js – крутая библиотека на базе языка Javascript, что позволяет выполнять контроль за HTML документом. За курс вы изучите работу с Vue JS, научитесь прописывать компоненты и создавать красивые веб сайты на ее основе.
Что делает Vue JS?
Фреймворк Vue JS – простая в использования среда JavaScript. За счёт Vue можно создавать внешний вид приложений, при этом делать его отзывчивым в плане действий пользователя. Vue обеспечивает нас быстрым в использовании функционалом для взаимодействия с пользователем.
При использовании Vue вы получаете удобный и быстрый формат управления общей DOM структурой веб сайта. Вы с легкостью сможете создать пользовательские функции, что будут выполняться в браузере без перезагрузки страниц.
Vue.js — как тренажёр для будущих гонщиков: простой в освоении, но способный разогнаться до серьёзных скоростей. Он идеально подходит новичкам, которые хотят быстро перейти от теории к практике:
- Минимум «магии»: в отличие от React, здесь не нужно разбираться в тонкостях JSX или сложной настройке стейта. Достаточно базового HTML, CSS и JavaScript.
- Гибкая структура: можно начать с подключения скрипта через <script>-тег, а позже перейти к Vue CLI и полноценным SPA.
- Документация-образец: гайды написаны так понятно, что даже школьник соберёт своё первое приложение за вечер (например, список дел или погодный виджет).
Vue не уступает React в ключевых моментах:
- Компонентный подход (можно переиспользовать блоки кода).
- Реактивность данных (автообновление интерфейса при изменении переменных).
- Экосистема (Vuex для управления состоянием, Vue Router для навигации).
Зачем мне он, если есть jQuery?
Даже по краткому описанию Vue можно понять что он невероятно схож с jQuery в плане их предназначения. Соответственно, возникает вполне резонный вопрос: а зачем нам Vue, когда есть куда более простой для понимания jQuery?
Суть ответа кроется в масштабируемости проектов. Поддержка огромного проекта, что написан лишь на jQuery – очень сложная задача. jQuery отличная библиотека, что вмещает в себе множество крутых функций для быстрого взаимодействия с пользователем. В то же время, читать большой объем jQuery кода очень сложно. Дело в том, что в jQuery нет четкой логики разбития проекта на отдельные составляющие – компоненты. Из-за этого код обычно прописывается в одном единственном файле. Читать и дополнять такой код становиться в какой-то момент невозможно.
По этой причине крупные проекты используют Vue JS или React JS для разработки пользовательского функционала на сайте. Сперва Vue покажется вам гораздо сложнее, нежели jQuery, но не стоит его пугаться, ведь Vue очень приятный фреймворк, который вы вскоре полюбите и будете всегда использовать для ваших проектов.
Как создать проект на Vue.js?
Поскольку мы будем работать с JavaScript фреймворком, то нам потребуется Node.js и его пакетный менеджер npm. Для установки Node.js необходимо перейти на официальный сайт и установить последнюю рекомендованную версию.
Далее нам необходимо установить любую программу для написания кода, далее в статье будет использоваться Visual Studio Code, по желанию тоже можете установить эту программу, она полностью бесплатная.
Далее необходимо открыть терминал либо отдельно, либо, в ранее установленном, VS Code. В терминале нужно ввести команду для перехода в папку, в котором вы хотите, чтобы был ваш проект в моем случае это cd "C:\Users\slize\Desktop\lesson".
Следующим шагом будет инициализация проекта с помощью пакетного менеджера npm, следует ввести команду: npm init vue@lates, после чего вам будет задано несколько вопросов, а именно:
- Наименование проекта (я назвал Lesson)
- Добавить ли поддержку TypeScript?
- Добавить поддержку JSX?
- Добавить Vue Route?
- Добавить Pinia?
- Добавить End-to-End Testing Solution?
- Добавить ESLint?
Затем будет предложено ввести 3 команды, а именно:
- cd Lesson, для перехода в папку проекта;
- npm install, для установки необходимых зависимостей;
- npm run dev, для запуска локального сервера.
Вводим их поочередно в терминал.
Структура проекта
Папка .vscode - необходима исключительно для работы VS Code, с ней вам не предстоит работать, и если вы использовали другой редактор кода, скорее всего подобной папки у вас не будет.
Папка node_modules - содержит все модули и библиотеки, необходимые для корректной работы нашего проекта.
Папка public - в этой папке будет находится весь наш полностью с компилированный проект.
Папка src - в этой папке находятся все рабочие файлы, т.е. все файлы, с которыми мы будем взаимодействовать.
Папка assets - в этой папке будут храниться все те файлы, которые являются дополнительными к нашему проекту, например файлы стилей css.
Папка components - в данной папке находятся файлы компоненты нашего проекта, например у вас есть сайт на котором есть footer и header и вы можете подключать их к каждому новому файлу без повторения кода, для это необходимо вынести код footer и header в отдельные компоненты и поместить в этой папке.
App.vue - основной компонент нашего проекта, куда буду подключаться остальные компоненты.
main.js - основной файл, в котором мы говорим, что подключаем Vue, импортируем стили и подключаем основной html файл.
.gitignore - файл необходимый для работы с Git репозиторием.
index.html - основной файл всей нашей страницы.
package.json и package-lock.json - файлы полностью описывающие наш проект (название, версия и т.д.).
README.md - файл с детальным описанием нашего проекта, необходим для выгрузки файлы на Git репозиторий.
vite.config.js - в этом файле описываются настройки для нашего локального сервера.
jsconfig.js - файл, в котором описывается компиляция нашего проекта.
Заключение
Vue.js — это идеальный мост между первым «Hello, World!» и профессиональной разработкой. Он не заставляет новичков продираться через дебри сложных концепций, но при этом даёт все инструменты для создания серьёзных проектов: от интернет-магазинов до корпоративных порталов. С его интуитивным синтаксисом, живым сообществом и чёткой документацией вы не просто учите фреймворк — вы погружаетесь в экосистему, где каждый шаг ощущается как прогресс.