# Быстрый старт с Vue.js
В этом видео мы начнем разбираться с Vue.js. Vue - это javascript фреймворк для создания одностраничных приложений. То есть, можно сказать, что это аналог Angular либо React конечно же со своими плюсами и минусами. Я бы даже сказал, что шаблоны похожи очень сильно на первый ангуляр, а javascript логика на реакт или ембер. Также, core часть библиотеки в сжатом виде занимает 17kb. Конечно, это без роутера, хранилища состояния и других нужных частей, но даже с ними фреймворк достаточно легковесный.
Как мы можем начать использовать vue?
- Самый простой вариант, это подключить скрипт с vue с cdn к html странице
- Также можно установить с помощью npm пакета и потом собрать чем угодно, например с помощью webpack
- Также vue можно установить с помощью bower.
- Ну и самый нормальный вариант для небольших проектов, это Vue-cli.
Поэтому мы с вами и будем использовать Vue-cli. Он дает возможность в консоли развернуть новый проект с готовыми базовыми настройками. Если сравнивать с React, то это что-то, похожее на create-react-app.
Итак, для начала нам нужно глобально установить vue-cli. Для установки достаточно написать
npm install -g vue-cli
Если вы используете npm.
Для генерации нового проекта использующего webpack теперь достаточно написать
vue init webpack vue-test
При этом установщик спросит базовые вопросы насчет названий, хотите ли вы eslint и тесты. На все можно просто жать enter и no.
Ответив на все вопросы получаем сообщение, что проект был сгенерирован.
Теперь нужно установить все пакеты командой
npm install
После установки пакетов для запуска проект в девелопмент моде пишем
npm run dev
Для продакшена
npm run build
После запуска проекта получаем сообщение, что проект запущен на localhost:8080.
Наш базовый проект развернут, и готов к работе.
Итак давайте посмотрим на структуру нашего проекта.
В корне у нас лежит index.html. В нем находится div id="app", в который вставляется vue приложение. Все собраные файлы будут также вставлятся сюда автоматически.
В папке src у нас есть файл main.js, в котором инициализируется Vue приложение. Здесь мы импортируем vue из node_modules и App, который является основным компонентом приложения. Дальше мы создаем экземпляр класса Vue с нужными опциями. el - это DOM элемент, куда будет рендериться Vue. В template мы выводим наш компонент App и для того, чтобы он был доступен в шаблоне передаем его в components.
Теперь давайте посмотрим на App.vue. Все компоненты в vue имеют расширение .vue и состоят из трех частей: шаблона, скрипта и стилей.
Давайте сначала разберемся с скриптом. Внутри тега script мы импортируем HelloWorld компонент. Дальше мы экспортируем обьект, где указываем имя нашего компонента и в components передаем компонент Hello, так как мы используем его в шаблоне.
В стилях мы просто пишем стили, относящиеся к нашему компоненту.
Если мы посмотрим на компоненту HelloWorld, которая находится в components, то там такая же структура. Единственное отличие в том, что в обьекте, который мы возвращаем есть метод data, который возвращает обьект.
Data - это грубо говоря модель или состояние компонента. Например, в данном случае у нас в data есть поле message и оно нам сразу же доступно в шаблоне и мы его выводим.
Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.