Пропустить до содержимого

Создание вашего первого проекта Astro

Приготовьтесь к…

  • Запустите мастер настройки Astro для создания нового проекта Astro
  • Запустите Astro-сервер в среде разработки (dev)
  • Просмотрите предварительный просмотр вашего веб-сайта в браузере

Запуск мастера настройки Astro

Заголовок раздела Запуск мастера настройки Astro

Рекомендуемый способ создания нового сайта Astro — через наш мастер настройки create astro.

  1. В командной строке своего терминала запустите следующую команду, используя ваш менеджер пакетов:

    Terminal window
    # создать новый проект с npm
    npm create astro@latest

  2. Подтвердите y, чтобы установить create-astro

  3. При запросе «Куда вы хотели бы создать свой новый проект?» введите имя папки для создания новой папки для вашего проекта, например ./tutorial

  1. Вы увидите краткий список стартовых шаблонов для выбора. Используйте клавиши со стрелками (вверх и вниз) для перехода к шаблону «Empty», а затем нажмите клавишу Enter, чтобы отправить свой выбор.

  2. Когда на запрос ответите утвердительно и введите букву y, «Хотели бы вы установить зависимости?».

  3. Когда на запрос ответите отрицательно и введите букву n, «Предполагаете ли вы использовать TypeScript?».

  4. Когда на запрос ответите утвердительно и введите букву y, «Хотели бы вы инициализировать новый репозиторий git?».

Когда мастер установки завершен, вам больше не понадобится этот терминал. Теперь вы можете открыть VS Code, чтобы продолжить.

Открытие проекта в VS Code

Заголовок раздела Открытие проекта в VS Code

  1. Откройте VS Code. Вам будет предложено открыть папку. Выберите папку, которую вы создали в процессе мастера настройки.

  2. Если это ваш первый запуск проекта Astro, вы увидите уведомление с запросом о установке рекомендуемых расширений. Нажмите, чтобы увидеть рекомендуемые расширения, и выберите расширение Astro language support extension. Это обеспечит подсветку синтаксиса и автозаполнение для вашего кода Astro.

  3. Убедитесь, что терминал виден и что вы можете увидеть командную строку, например:

    Terminal window
    user@machine:~/tutorial$

Теперь вы можете использовать терминал, встроенный прямо в это окно, вместо приложения Terminal на вашем компьютере в этом учебнике.

Запуск Astro в режиме разработки

Заголовок раздела Запуск Astro в режиме разработки

Чтобы просмотреть файлы проекта как веб-сайт во время работы, вам нужно запустить Astro в режиме разработки (dev).

Запуск сервера разработки

Заголовок раздела Запуск сервера разработки

  1. Запустите команду для запуска Astro в режиме разработки, набрав в терминале VS Code:

    Terminal window
    npm run dev

    Теперь вы должны увидеть подтверждение в терминале, что Astro запущен в режиме dev mode. 🚀

Посмотреть привью вашего сайта

Заголовок раздела Посмотреть привью вашего сайта

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

  1. Щелкните ссылку http://localhost в окне терминала, чтобы увидеть живой предварительный просмотр вашего нового веб-сайта Astro!

    (Astro по умолчанию использует http://localhost:4322, если порт 4321 доступен.)

    Вот как должен выглядеть стартовый сайт Astro «Empty Project» в браузерном предварительном просмотре:

Пустая белая страница со словом Astro в верхней части.

Чек-лист

Заголовок раздела Чек-лист

Resources

Заголовок раздела Resources