Простое руководство по запуску сайта, созданного с помощью Vue.js.
Запустить и запустить ваш следующий сайт с помощью Vue.js с Fathym проще, чем когда-либо. Здесь мы быстро рассмотрим настройку основ: общий сайт Vue.js и настройку Fathym для поддержки DevOps и развертывания, чтобы вы могли сосредоточиться на настройке и развитии своего пользовательского интерфейса.
Если вы хотите пропустить вперед и сразу перейти к развертыванию, попробуйте форк этого примера Vue.js и приступайте к написанию кода за считанные минуты.
Но сначала давайте посмотрим на историю Vue.js.
История Vue.js
Vue.js был представлен в 2014 году и разработан Эваном Ю. Это фреймворк JavaScript, который начинает набирать популярность.
Vue.js считается одним из самых простых в изучении популярных фреймворков JavaScript, таких как Angular и React. У него отличная документация, но сообщество намного меньше, чем у двух других. Еще один недостаток — меньше ресурсов по сравнению с Angular и React.
Однако документация лаконична, и вы даже можете интегрировать ее в другие фреймворки.
Настройка кода
Первым шагом в этом руководстве будет настройка нашего исходного кода и начального проекта Vue.js.
Управления источником
Давайте приступим к настройке нашего репозитория GitHub. Выберите организацию (или вашу индивидуальную учетную запись) в GitHub, выберите вкладку репозитории, а затем новый репозиторий. Дайте репозиторию уникальное имя и описание, выберите общедоступный, и нам нравится заполнять репозиторий файлом лицензии (обычно это лицензия MIT для чего-то подобного). Теперь, когда у нас есть настроенный репозиторий, давайте клонируем его в нашу локальную систему и открываем папку с VS Code.
Проект Vue.js
Полное и глубокое погружение в Vue.js не является целью этой статьи. Как правило, вы захотите следовать последним документам Vue.js при создании нового проекта. Иногда там что-то меняется, но в целом вам нужно запустить следующие команды из вашего нового проекта, чтобы настроить его (замените vue-typescript-app на имя по вашему выбору).
npm install -g @vue/cli vue create vue-typescript-app
Вам будет предложено несколько вариантов, выберите то, что имеет смысл для вас. Мы выберем вариант Manually select features и выберем то, что нам нравится, в частности включив Typescript. Используйте пробел для включения и отключения функций, когда будете готовы, нажмите Enter, чтобы завершить последние шаги CLI, и мы рекомендуем сохранить ваши настройки для использования в будущем. Затем нам нравится перемещать содержимое каталога vue-typescript-app (или как бы вы ни называли свой проект) в корень проекта. Это оставит начальную точку, которая выглядит примерно так:
Пакеты npm уже установлены, поэтому теперь вы можете запустить следующую команду, чтобы запустить свой сайт:
Когда сайт запущен и работает на localhost:8080, продолжайте и зафиксируйте изменения обратно в свой репозиторий, чтобы наш работающий (хотя и базовый) сайт Vue.js был запущен и готов к развертыванию.
Развертывание кода
Когда код готов к работе, мы можем настроить наш проект Fathym для сборки, развертывания и хостинга. Для начала вам понадобится бесплатная учетная запись Fathym. Откройте мастер создания проекта в потоке пользовательский проект.
Настройка проекта
В пользовательском потоке проекта мастера вы можете начать с подключения к GitHub, если вы еще этого не сделали, а затем ввести имя проекта и нажать «Далее». Теперь пришло время настроить систему управления версиями, выбрав ранее организацию, репозиторий и ветку с помощью кода примера Vue.js. Нажмите «Далее», и вы окажетесь на последнем экране сборки. Вы можете оставить команды сборки и установки по умолчанию ( npm run build и npm ci соответственно). Убедитесь, что для выходного каталога установлено значение ./dist (здесь находится содержимое скомпилированного приложения и index.html или другой файл по умолчанию).
Теперь вы можете развернуть свой проект и после завершения зайти в панель управления. Будет запущена новая сборка, и как только это будет сделано, вы сможете запустить свой собственный проект Vue.js и увидеть, как он работает на вашем временном домене.
Пользовательские домены
В качестве бонуса на последнем шаге вы можете с самого начала следовать нашему Руководству по пользовательскому домену, чтобы настроить и запустить свой сайт на собственном домене.
Теперь у вас есть готовый рабочий процесс разработки и развертывания для вашего проекта Vue.js. Внесите изменения и зафиксируйте их в своем репозитории, затем следуйте нашему руководству по обновлению представлений, чтобы узнать больше об обновлении ваших сборок, и используйте наши примеры использования для тестирования, чтобы узнать, как вы можете тестировать новые сборки, прежде чем выпускать их для своих пользователей. Удачного кодирования!
Fathym — это универсальная микро-платформа для запуска веб-проектов. Это означает, что вы можете использовать Fathym для развертывания большинства, если не всех, ваших веб-проектов. Fathym прост в использовании и настройке, и он отлично работает, когда у вас есть базовый веб-сайт, который вы хотите быстро открыть и открыть для всего мира — например, этот сайт Docusaurus. Зарегистрируйтесь на www.fathym.com.
Первоначально опубликовано на https://www.fathym.com.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.
