02 — Начинаем в VS Code: пробный проект Razor

Создаём сайт из шаблона, запускаем его и тренируемся создавать снова

Создадим сайт Razor Pages в терминале macOS, откроем его в VS Code и запустим. Создание можно повторить с новым именем.

02 — Назад: среда разработки: запускаем и изменяем сайт

1. Подготавливаем инструменты

  1. Установите VS Code и .NET 10 SDK. На Mac выберите Arm64 для Apple Silicon или x64 для Intel. Нужен SDK, а не только Runtime.
  2. В VS Code откройте Extensions, найдите C# Dev Kit от Microsoft и нажмите Install. Расширение помогает редактировать C#; проект создадим в терминале.
  3. Откройте Terminal → New Terminal. На Mac можно также открыть Terminal через Spotlight. Введите команду и нажмите Enter:
dotnet --list-sdks

Проверьте, что версия начинается с 10.0. Если команда не распознаётся, закройте и откройте VS Code после установки SDK. Если она по-прежнему не работает, обратитесь к учителю.

2. Выбираем родительскую папку и имя пробного проекта

Следующие команды предназначены для Terminal в macOS. Копируйте каждую строку отдельно и нажимайте Enter:

mkdir -p ~/WebProjects
cd ~/WebProjects
pwd

mkdir -p создаёт родительскую папку, если её нет. cd переводит терминал в неё, а pwd показывает текущее расположение. Проверьте, что путь заканчивается на WebProjects, а не на папку другого проекта.

Выберите любое имя на английском без пробелов, например RazorPractice. Во всех следующих командах заменяйте его одним и тем же выбранным именем. Если папка с таким именем уже существует, выберите новое, например RazorPractice2; не перезаписывайте её.

3. Создаём проект из шаблона Razor Pages

dotnet new webapp --name RazorPractice --output RazorPractice --framework net10.0 --auth None
cd RazorPractice

webapp — шаблон Razor Pages. --name задаёт имя проекта; --output создаёт новую папку с этим именем. net10.0 выбирает версию курса, а None создаёт сайт без учётных записей пользователей. Дождитесь сообщения об успехе и завершения восстановления пакетов. Не добавляйте --force, если сообщается, что папка уже содержит файлы.

В VS Code выберите File → Open Folder, перейдите в WebProjects в домашней папке и откройте RazorPractice. Если VS Code спросит, доверяете ли вы созданным файлам, можно подтвердить. В Explorer проверьте наличие RazorPractice.csproj, папок Pages и wwwroot.

Если открылось новое окно, снова выберите в нём Terminal → New Terminal. Убедитесь, что терминал находится в папке с файлом .csproj.

4. Запускаем сайт до внесения изменений

dotnet watch --launch-profile http

Дождитесь строки Now listening on: http://localhost:…. Откройте в браузере точный адрес, показанный у вас; номер порта выбран шаблоном и может отличаться в разных проектах. Если браузер не открылся автоматически, скопируйте адрес в его адресную строку. Во время просмотра сайта оставляйте терминал работающим.

Страница показывает Welcome и меню Home и Privacy. Это работающий шаблон Razor Pages, уже включающий Bootstrap и файл собственных стилей wwwroot/css/site.css.

5. Меняем, останавливаем и открываем снова

  1. Откройте Pages/Index.cshtml и замените слово Welcome на החיות שלי («Мои животные»). Сохраните с помощью Cmd+S и обновите браузер, если изменение не появилось автоматически.
  2. Вернитесь в терминал и нажмите Ctrl+C, чтобы остановить сервер. Одно лишь закрытие вкладки браузера его не останавливает.
  3. В следующий раз откройте ту же папку и снова запустите dotnet watch --launch-profile http.
  4. Для повторной тренировки создания остановите сервер, вернитесь в родительскую папку командой cd ~/WebProjects и повторите этап 3 с новым именем. Не создавайте проект внутри существующего проекта.

Оставьте Program.cs, настройки запуска и файлы Bootstrap такими, какими они созданы. На этом этапе Git и GitHub не нужны.

Справка: шаблоны dotnet new

Дальше

Возвращаемся к общему уроку