Перейти к содержимому

Создайте свой первый проект Astro

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

  • Запустить мастер настройки create astro, чтобы создать новый проект Astro
  • Запустить сервер Astro в режиме разработки (dev)
  • Увидеть предварительный просмотр вашего сайта в браузере

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

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

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

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

    Окно терминала
    # создать новый проект с npm
    npm create astro@latest

  2. Подтвердите выполнение команды клавишей y, чтобы установить create-astro

  3. При запросе «Where would you like to create your new project?» (Где вы хотите создать новый проект?) введите имя папки, чтобы создать новый каталог для проекта, например ./tutorial

  4. Когда появится вопрос «Would you like to install dependencies?» (Хотите ли вы установить зависимости?), введите y.

  5. Когда появится запрос «Would you like to initialize a new git repository?» (Хотите ли вы инициализировать новый git-репозиторий?), введите y.

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

Откройте ваш проект в VS Code

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

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

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

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

    Окно терминала
    user@machine:~/tutorial$

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

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

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

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

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

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

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

    Окно терминала
    npm run dev

    Теперь в терминале должно появиться подтверждение того, что Astro работает в режиме dev. 🚀

Просмотрите предварительный вариант вашего сайта

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

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

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

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

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

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

Контрольный список

Заголовок раздела Контрольный список

Ресурсы

Заголовок раздела Ресурсы
Внести свой вклад Сообщество Sponsor
京ICP备15031610号-99