Способы создания Vue приложений

Прежде чем приступить к созданию проекта на Vue.js, важно понимать, что существует более одного способа, как этот проект мы с вами можем создать, развернуть.

Давайте попробуем систематизировать все многообразие способов, которые могут быть при создании Vue.js проекта и посмотрим, как мы с вами можем это сделать.

Способы создания Vue.js приложения

Существует 2 основных способа, как вы можете развернуть Vue приложение. 

1 способ. Использовать системы сборки.

Наиболее популярными системами сборки являются Webpack и Vite. Т.е. мы разворачиваем наш Vue проект на основе этой сборке модулей. 

Здесь есть у нас 2 варианта, с которыми мы можем иметь дело.

1) Команда npm create. У нас развернется проект на основе системы сборки Vite. 

2) Использовать стороннюю утилиту командной строки, которая называется Vue cli. Позже мы подробнее на ней остановимся. И эта утилита позволяет нам упрощенным образом собрать наш проект с помощью Webpack. 

Кроме того, вы можете вообще не использовать каких-то готовых средств и собрать проект на Vue с использованием систем сборки с нуля. Проблема только в том, что в этом случае требуется от вас довольно высокий уровень компетенции и понимания настроек проекта.

2 способ. Без систем сборки модулей.

В этом случае у нас есть 2 основных варианта:

1) Использовать глобальный объект Vue, который у нас появляется при подключении скрипта Vue.js.

2) Использование ES модулей. Многие современные браузеры поддерживают это по умолчанию и с помощью этих модулей мы можем легко собрать Vue проект. 

Но, нужно иметь ввиду, что если мы используем проект без системы сборки модулей, мы можем быть ограниченными в возможностях.

Когда использовать какой способ

Нам будет не так удобно использовать сторонние библиотеки, некоторые сторонние библиотеки мы вообще использовать не сможем, если они не адаптированы к такому варианту сборки. Будет сложно подключать модули и др. причины. 

По этим причинам этот способ подходит лишь для простых приложений, которые состоят из нескольких компонентов. Простая логика, без дополнительных библиотек. В этом случае вполне можно разворачивать проект без системы сборки.

Если у вас какое-то сложное приложение, например, SPA приложение. Одностраничное приложение, в котором множество страниц и компонентов, то в этом случае вам обязательно нужна система сборки, чтобы собрать и развернуть такой проект. 

Вот такое вводное вступление по поводу основных способов, как можно создать Vue проект и давайте в следующих уроках уже на практике посмотрим, как это все можно использовать.