1. Создайте простой SPA с приложением Vue.
В последнее время появилось много отличных интерфейсных фреймворков, таких как React, Angular и Vuejs, у каждого фреймворка есть плюсы и минусы, но для простой демонстрации приложения я хотел бы выбрать Vuejs, потому что его легко изучить. Спасибо за cli3, теперь создать и развернуть простое приложение Vue стало проще, всего несколько небольших шагов.
- установить кли 3
На этом шаге я предполагаю, что вы установили npm или yarn.
npm install -g @vue/cli
# OR
yarn global add @vue/cli- создать простое приложение vuejs
vue create hello-world- собрать и запустить приложение на локальном
npm install npm run serve
Для получения дополнительных возможностей cli3 вы можете проверить эта ссылка
- создайте репозиторий на github и нажмите код для мастера
2. Разверните приложение на Netlify.
Netlify — отличный хостинг для личного блога, стартовый продукт, потому что он не требует никакой информации о кредитной карте, даже если вы можете настроить домен как свое имя. Раньше мне нравился Heroku, потому что это также просто, но в Heroku ваше приложение не работает, если нет запросов, а первый запрос всегда занимает много времени, чтобы запустить приложение. И больше всего мне нравится Netlify, потому что его очень легко развернуть в несколько шагов. Хорошо, теперь мы приступаем к развертыванию приложения.
- Создайте учетную запись на Netlify, вы можете очень просто использовать учетную запись github для Netlify.
- Подключиться к учетной записи Github
Новый сайт с гита
- Выбрав приложение Github, которое вы хотите создать, введите команды
Режим истории
Чтобы настроить режим истории, когда вы обновляете приложение по ссылке Enter, вы получите сообщение о том, что страница не найдена.
Для исправления нам нужно настроить пользовательское правило перезаписи. Создайте файл с именем _redirectsпод public/ и добавьте эту строку в файл.
/* /index.html 200
Это будет эффективно обслуживать index.html для любого маршрута на вашем сайте. Для сервера nginx вам нужно настроить файл, он аналогичен, но в этом случае вам не нужно заботиться.
Теперь нажмите это, чтобы освоить, и все готово!
3. Просмотрите приложение
Во время сборки приложения Netlify вы можете проверить журнал и ход выполнения, щелкнуть для развертывания в рабочей среде, чтобы просмотреть журналы.
Теперь каждый раз, когда вы отправляете код на GitHub с основной веткой. Netlify автоматически развернет ваше приложение.
Подождав несколько секунд, вы увидите ссылку на приложение. это так просто, вы почти закончили развертывание приложения на Netlify, теперь вы можете настроить домен. Нажмите на Domain Settings и измените свое имя на желаемое.
4. Попробуйте практический случай
после завершения разверните простое приложение на Netlify. я пробую другое приложение, разработанное командой vuetify, вы можете проверить исходный код на Github. Теперь я разверну это приложение на Netlify.
В моем случае я немного модифицировал код, но он по-прежнему прост, для улучшения и настройки вы можете начать обучение с vuejs.
Далее: Настройте простое приложение vue с помощью Vue route, vuetify.
