Заметка
Доступ к этой странице требует авторизации. Вы можете попробовать войти в систему или изменить каталог.
Доступ к этой странице требует авторизации. Вы можете попробовать сменить директорию.
В этой 5–10 минуте в интегрированной среде разработки Visual Studio вы создадите и запустите простое веб-приложение Vue.js.
Предпосылки
Необходимо установить Visual Studio и рабочую нагрузку разработки Node.js.
Если вы еще не установили Visual Studio 2019, перейдите на страницу скачивания Visual Studio , чтобы бесплатно установить ее.
Если вам нужно установить рабочую нагрузку, но у вас уже есть Visual Studio, перейдите в раздел "Сервис>получения инструментов и компонентов...", который открывает установщик Visual Studio. Выберите рабочую нагрузку 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, а затем выберите Basic 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 , а затем нажмите кнопку "Добавить>новый элемент".
Если вы не видите все шаблоны элементов, выберите показать все шаблоны, а затем выберите шаблон элемента.
Выберите либо JavaScript Vue компонент одного файла, либо TypeScript Vue компонент одного файла, а затем нажмите «Добавить».
Visual Studio добавляет новый файл в проект.
Сборка проекта
Затем выберите "Сборка>", чтобы создать проект.
Проверьте окно вывода , чтобы просмотреть результаты сборки и выберите "Сборка " в списке "Показать выходные данные ".
Шаблон проекта JavaScript Vue.js (и более старые версии шаблона TypeScript) использует скрипт build npm, настраивая событие после сборки. Если вы хотите изменить этот параметр, откройте файл проекта (<projectname.njsproj>) из проводника Windows и найдите следующую строку кода:
<PostBuildEvent>npm run build</PostBuildEvent>
Запуск приложения
Нажмите клавиши Ctrl+F5 (или Отладка > Запуск без отладки), чтобы запустить приложение.
В консоли появится сообщение о запуске сервера разработки.
Затем приложение откроется в браузере.
Если вы не видите работающее приложение, обновите страницу.
Закройте веб-браузер.
Поздравляем с завершением этого краткого руководства! Мы надеемся, что вы узнали немного об использовании интегрированной среды разработки Visual Studio с Vue.js. Если вы хотите углубиться в его возможности, перейдите к руководству в разделе "Учебники " оглавлений.