В рамках этого краткого (на 5–10 минут) знакомства с возможностями интегрированной среды разработки (IDE) Visual Studio вы создадите и запустите простое веб-приложение Vue.js.
У вас должна быть установлена среда Visual Studio и должна иметься рабочая нагрузка "Разработка Node.js".
Установите Visual Studio 2019 бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.
Если вам нужно установить рабочую нагрузку, но вы уже используете Visual Studio, выберите пункт Средства>Получить средства и компоненты..., после чего запустится Visual Studio Installer. Выберите рабочую нагрузку Разработка Node.js, а затем элемент Изменить.
У вас должна быть установлена среда выполнения Node.js.
Если он не установлен, мы рекомендуем установить версию LTS с веб-сайта Node.js для обеспечения лучшей совместимости с внешними платформами и библиотеками. Node.js построен для 32-разрядных и 64-разрядных архитектур. Средства Node.js в Visual Studio, включенные в рабочую нагрузку Node.js, поддерживают обе версии. Однако требуется только одна, поскольку программа установки Node.js поддерживает только одну установку за раз.
Как правило, Visual Studio автоматически обнаруживает установленную среду выполнения Node.js. Если установленная среда выполнения не обнаружена, вы можете настроить проект так, чтобы он ссылался на установленную среду выполнения, на странице свойств (после создания проекта щелкните его узел правой кнопкой мыши, выберите пункт Свойства и укажите путь Node.exe). Можно использовать глобальную установку Node.js или указать путь к локальному интерпретатору в каждом из проектов Node.js.
Сначала вы создадите проект веб-приложения Vue.js.
Если у вас не установлена среда выполнения Node.js, установите версию LTS с веб-сайта Node.js.
Дополнительные сведения см. в разделе Необходимые условия.
Откройте Visual Studio.
Создание проекта
Нажмите клавишу ESC, чтобы закрыть окно запуска. Нажмите CTRL + Q, чтобы открыть поле поиска, введите Basic Vue.js и выберите Простое веб-приложение Vue.js (JavaScript или TypeScript). В появившемся диалоговом окне введите имя basic-vuejs, а затем выберите команду Создать.
Если шаблон проекта Простое веб-приложение Vue.js отсутствует, нужно добавить рабочую нагрузку Разработка Node.js. Подробные инструкции см. в разделе с предварительными требованиями.
Visual Studio создаст новый проект. Новый проект откроется в обозревателе решений (в правой области).
Отслеживайте установку пакетов npm, необходимых для приложения, в окне вывода (нижняя панель).
В обозревателе решений откройте узел npm и проверьте установку всех необходимых пакетов npm.
Если каких-либо пакетов не хватает (имеется значок с восклицательным знаком), можно щелкнуть правой кнопкой мыши узел npm и выбрать пункт Установить недостающие пакеты npm.
Изучение интегрированной среды разработки
Посмотрите на обозреватель решений в правой области.
Полужирным шрифтом выделен ваш проект, имя которого вы указали в окне Новый проект. На диске этот проект представлен файлом NJSPROJ в папке проекта.
Сверху представлено решение, имя которого по умолчанию совпадает с именем проекта. Решение, представленное на диске файлом SLN, является контейнером для одного или нескольких связанных проектов.
В узле npm представлены все установленные пакеты npm. Вы можете щелкнуть узел npm правой кнопкой мыши, чтобы найти и установить пакеты npm с помощью диалогового окна.
Чтобы установить пакеты npm или выполнить команды Node.js из командной строки, щелкните узел проекта правой кнопкой мыши и выберите пункт Открыть командную строку здесь.
Добавление VUE-файла в проект
В обозревателе решений щелкните правой кнопкой мыши любую папку, например src/components, а затем выберите Добавить>Новый элемент.
Если вы не видите все шаблоны элементов, выберите "Показать все шаблоны" и выберите шаблон элемента.
Выберите Отдельный VUE-файл JavaScript или Отдельный VUE-файл TypeScript и нажмите кнопку Добавить.
Среда Visual Studio добавит новый файл в проект.
Затем выберите Сборка>Собрать решение для сборки проекта.
Просмотрите результаты сборки в окне вывода и выберите Сборка в списке Показать выходные данные из.
В шаблоне проекта JavaScript Vue.js (и более ранних версиях шаблона TypeScript) используйте скрипт build npm, настроив событие после сборки. Если вы хотите изменить этот параметр, откройте файл проекта (<имя_проекта>.njsproj) в проводнике Windows и найдите следующую строку кода:
<PostBuildEvent>npm run build</PostBuildEvent>
Чтобы запустить приложение, нажмите клавиши CTRL+F5 (или выберите Отладка > Запуск без отладки).
В консоли появится сообщение Запуск Development Server.
Затем приложение откроется в браузере.
Если сведения о работающем приложении не отображаются, обновите страницу.
Закройте веб-браузер.
Поздравляем с завершением этого краткого руководства! Надеемся, что вы узнали нечто новое об использовании интегрированной среды разработки Visual Studio с Vue.js. Если вы хотите ознакомиться с возможностями этого продукта более подробно, продолжите работу с руководством из раздела Руководства в содержании.