-
Установите систему контроля версий
git
; -
Проверьте успешность установки с помощью команды
git --version
-
Склонируйте репозиторий: В необходимой директории выполните в консоли команду
git clone https://github.com/profcomff/webapp-ui
Появится папка webapp-ui
с исходным кодом проекта.
-
Установите среду выполнения языка JavaScript
Node.js
; -
Проверьте успешность установки с помощью команды
node --version
-
Вместе с
Node.js
у вас установится пакетный менеджер по умолчанию —npm
. Рекомендуем использовать более совеременный вариант —pnpm
. Для его установки выполнитеnpm install --global pnpm
-
Для установки зависимостей проекта выполните команду
pnpm install
-
Для запуска проекта локально выполните команду
pnpm run dev
-
Введите в адресной строке браузера
http://localhost:9000
. Откроется главная страница приложения "Твой ФФ!".
* при возникновении проблем пишите в наш телеграм-чат или @physphile.
-
Среда разработки. В последние годы самым популярным редактором кода стал
Visual Studio Code
(не путать сVisual Studio
!). Необходимо установить именно его и несколько полезных плагинов, таких как -
Самое главное для веб-разработки у вас, безусловно, было установлено всегда и вы этим активно пользуетесь. Конечно, я говорю о браузере. В целом можно использовать любой браузер последней версии, но я советую
Google Chrome
. Нововведения первыми появляются в нем, удобная панель разработчика. Опыт в других браузерах на движкеchromium
, например, вЯндекс Браузере
, будет аналогичным. Непременно стоит установить расширение Vue.js devtools для просмотра дерева компонентов, отслеживания их состояния и общего состояния приложения.
В первую очередь необходимо знание "трёх китов" веб-разработки, а именно HTML
, CSS
и JavaScript
. Обучающие материалы о них лезут из каждого угла, но нет ничего лучше, чем:
- HTML для Начинающих - Практический Курс,
- CSS для Начинающих - Практический Курс,
- JavaScript Основы для Начинающих - Полный Курс за 6 часов.
Если понять HTML
и CSS
можно за пару вечеров, то вот изучение JavaScript может затянуться. Поэтому, если вам удобнее текстовый формат, используйте Современный учебник JavaScript, который охватывает все вожмости языка, а информация в нем структурирована и хорошо переведена на русский язык не одним годом работы разработчиков.
Проект построен на JavaScript-фреймворке Vue.js
версии 3 с синтаксисом Composition API
с использованием TypeScript
. Если какие-то термины для вас оказались непонятными, не отчаивайтесь! В Сети полно замечательного обучающего контента, на котором, в т. ч. учился автор:
- Vue 3 Основы для Начинающих - Полный Курс,
- TypeScript - Быстрый Курс за 70 минут,
- TypeScript для продвинутых за 2 часа,
- Продвинутые дженерики в TypeScript.
Напоминаем:
Чтобы научиться программировать, нужно программировать.
Поэтому, пожалуйста, смотрите код, задавайте много вопросов и пытайтесь его редактировать!