Краткое руководство: создание проекта на Vue.js

В этом кратком руководстве вы создадите и запустите базовое клиентское веб-приложение на Vue.js. В этой статье представлено краткое 5–10-минутное введение в интегрированную среду разработки (IDE) Visual Studio.

Необходимые условия

Подготовьте конфигурацию с помощью следующих предварительных требований:

• Visual Studio 2022 или более поздняя версия (бесплатную версию можно получить на странице Visual Studio downloads)

• npm (включен в Node.js, ) https://www.npmjs.com/

• Vue.js ( Установка| Vue.js (vuejs.org))

Создание приложения Vue

Создайте веб-приложение Vue.js, выполнив следующие действия.

1. В окне Visual Studio Start (выберите File>Start Window), выберите Create новый проект.

   

2. В диалоговом окне "Создание проекта " введите Vue в поле поиска. Выберите шаблон приложения Vue для JavaScript или TypeScript и нажмите кнопку "Далее".

   

   В Visual Studio 2022 версии 11 и более поздних версий имя шаблона Standalone JavaScript Vue Project изменено на Vue App.

3. Введите имя проекта и решения и нажмите кнопку "Создать".

Дождитесь создания нового проекта Visual Studio.

Просмотр свойств проекта

Параметры проекта по умолчанию позволяют создавать и отлаживать проект.

Если вы хотите изменить параметры, выполните следующие действия.

1. Щелкните проект правой кнопкой мыши в Обозреватель решений и выберите Properties.

2. В области свойств проекта выберите Отладка, Проверка кода, Сборка или Развертывание, чтобы просмотреть соответствующие параметры.

Для настройки отладчика используйте файл launch.json .

Заметка

Файл launch.json конфигурации отладчика сохраняет параметры запуска, связанные с действием "Пуск " на панели инструментов отладки. Файл launch.json должен находиться в папке .vscode проекта.

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

Чтобы создать новый проект, выберите "Сборка>".

Запуск проекта

Выберите F5 или используйте действие "Пуск " в верхней части окна.

Проект открывает командную строку со следующим текстом (или аналогичным):

VITE v4.4.9 ready in 780 ms

Заметка

Проверьте вывод консоли на наличие сообщений, например, инструкций по обновлению Node.js.

После успешного выполнения процесса откроется базовое Vue.js приложение.

Следующий шаг

Создание приложения ASP.NET Core с помощью Vue