Фото Билла Джелен на Unsplash

Введение

Vuejs - это прогрессивный Javascript-фреймворк для создания реактивных и легко масштабируемых веб-сайтов.

Netlify - это быстрая статическая платформа веб-хостинга, которая автоматически повторно развертывает ваш сайт, когда вы отправляете его в репозиторий git.

Предпосылки

Убедитесь, что у вас есть следующее:

Давайте развернемся!

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

vue create vuejs-netlify
cd vuejs-netlify

Создайте удаленное репо с помощью GitHub CLI

gh repo create — public vuejs-netlify

Кроме того, вы можете создать его на сайте GitHub, перейдя по ссылке https://github.com/new.

Git push на удаленное репо

git push -u origin master

Войдите в свою учетную запись Netlify

Нажмите Новый сайт из Git.

Подключитесь к Git Provider. В этом случае GitHub

Выберите репозиторий vuejs-netlify

Ветвь master - это ветвь по умолчанию для развертывания. Однако вы можете развернуть из любой другой ветки

Добавьте yarn build или npm run build в качестве команды сборки. Выполнение любой из команд приведет к созданию папки dist, в которой скомпилирован весь код.

Поэтому добавьте dist в качестве каталога публикации.

Разверните веб-сайт, нажав Развернуть сайт.

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

Откройте автоматически сгенерированный URL-адрес веб-сайта

Вы сделали это! Вы развернули свое приложение Vuejs! 🎊🎊🎊

Нашли опечатку? Хотите внести свой вклад? Вот исходный код

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