Создание приложения Vue.js с помощью средств Node.js для Visual Studio

2025-01-26

Visual Studio поддерживает разработку приложений с помощью платформы Vue.js в JavaScript или TypeScript.

Следующие новые функции поддерживают разработку приложений Vue.js в Visual Studio:

Поддержка блоков скриптов, стилей и шаблонов в файлах .vue
Распознавание атрибута lang в файлах VUE
Vue.js шаблоны проектов и файлов

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

Необходимо установить Visual Studio 2017 версии 15.8 или более поздней и набор компонентов разработки Node.js.

Важный

В этой статье требуются функции, доступные только начиная с Visual Studio 2017 версии 15.8.

Если требуемая версия еще не установлена, установите Visual Studio 2019.

Если необходимо установить рабочую нагрузку, но у вас уже есть Visual Studio, перейдите в раздел Tools>Get Tools and Features..., который открывает установщик Visual Studio. Выберите рабочую нагрузку разработкиNode.js, а затем выберите Изменить.
Чтобы создать проект ASP.NET Core, необходимо установить ASP.NET и веб-разработку и кроссплатформенные рабочие нагрузки разработки .NET Core.
Необходимо установить среду выполнения Node.js.

Если он не установлен, установите версию LTS с веб-сайта Node.js. Как правило, Visual Studio автоматически обнаруживает установленную среду выполнения Node.js. Если среда выполнения не обнаруживает установленную, можно настроить проект так, чтобы он ссылался на неё на странице свойств. (После создания проекта щелкните правой кнопкой мыши элемент проекта и выберите Свойства).

Создание проекта Vue.js с помощью Node.js

Для создания нового проекта можно использовать новые шаблоны Vue.js. Использование шаблона — самый простой способ приступить к работе. Подробные инструкции см. в статье Используйте Visual Studio, чтобы создать своё первое Vue.js приложение.

Создание проекта Vue.js с помощью ASP.NET Core и Vue CLI

Vue.js предоставляет официальный интерфейс командной строки для быстрого создания структуры проектов. Если вы хотите использовать CLI для создания приложения, выполните действия, описанные в этой статье, чтобы настроить среду разработки.

Важный

В этих шагах предполагается, что у вас уже есть опыт работы с платформой Vue.js. Если нет, посетите Vue.js, чтобы узнать больше о платформе.

Создание нового проекта ASP.NET Core

В этом примере используется пустое приложение ASP.NET Core (C#). Однако вы можете выбрать различные проекты и языки программирования.

Создание пустого проекта

Откройте Visual Studio и создайте проект.

В Visual Studio 2019 выберите Создать проект в окне запуска. Если окно запуска не открыто, выберите Файл>Окно запуска. Введите в веб-приложении, выберите C# в качестве языка, затем выберите ASP.NET Core Empty, а затем нажмите Далее. На следующем экране назовите проект клиентского приложения, а затем нажмите кнопку Далее.

Выберите рекомендуемую целевую платформу или .NET 6, а затем выберите Создать.

Если шаблон проекта веб-приложения ASP.NET Core не отображается, сначала необходимо установить компонент ASP.NET и веб-разработки и компонент разработки.NET Core. Чтобы установить рабочие компоненты, щелкните ссылку Open Visual Studio Installer в левой области диалогового окна "Новый проект" (в меню выберите Файл>Создать>Проект). Установщик Visual Studio запускается. Выберите необходимые рабочие нагрузки.

Настройка файла запуска проекта

Откройте файл ./Startup.csи добавьте следующие строки в метод Configure:

app.UseDefaultFiles(); // Enables default file mapping on the web root.
app.UseStaticFiles(); // Marks files on the web root as servable.

Установка интерфейса командной строки Vue

Чтобы установить модуль npm vue-cli, откройте командную строку и введите npm install --g vue-cli или npm install -g @vue/cli для версии 3.0 (в настоящее время в бета-версии).

Создайте новое клиентское приложение с помощью Vue CLI

Перейдите в командную строку и измените текущий каталог в корневую папку проекта.
Введите vue init webpack client-app и выполните действия при появлении запроса на ответы на дополнительные вопросы.

Заметка

Для файлов .vue и необходимо использовать webpack или аналогичный фреймворк с загрузчиком для преобразования. TypeScript и Visual Studio не знают, как компилировать VUE-файлы. То же самое верно для объединения; TypeScript не знает, как преобразовать модули ES2015 (т. е. заявления import и export) в один окончательный файл .js для загрузки в браузере. Опять же, webpack является лучшим выбором здесь. Чтобы запустить этот процесс из Visual Studio с помощью MSBuild, необходимо начать с шаблона Visual Studio. В настоящее время нет шаблона ASP.NET для разработки Vue.js в коробке.

Измените конфигурацию webpack, чтобы вывести встроенные файлы в wwwroot

Откройте файл ./client-app/config/index.jsи измените build.index и build.assetsRoot на путь wwwroot:

// Template for index.html
index: path.resolve(__dirname, '../../wwwroot/index.html'),

// Paths
assetsRoot: path.resolve(__dirname, '../../wwwroot'),

Укажите проект для сборки клиентского приложения каждый раз, когда запускается сборка.

В Visual Studio перейдите в Проект>Свойства>События Сборки.
В командной строке события предварительной сборки введитеnpm --prefix ./client-app run build.

Настройка имен выходных модулей webpack

Откройте файл ./client-app/build/webpack.base.conf.jsи добавьте следующие свойства в выходное свойство:
```
devtoolModuleFilenameTemplate: '[absolute-resource-path]',
devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
```

Добавление поддержки TypeScript с помощью интерфейса командной строки Vue

Для этих действий требуется vue-cli 3.0, который в настоящее время находится в бета-версии.

Перейдите в командную строку и измените текущий каталог на корневую папку проекта.
Введите vue create client-app, а затем выберите вручную выбрать компоненты.
Выберите TypeScript, а затем выберите другие нужные параметры.
Выполните оставшиеся действия и ответьте на вопросы.

Настройка проекта Vue.js для TypeScript

Откройте файл ./client-app/tsconfig.json и добавьте noEmit:true в параметры компилятора.

Задав этот параметр, вы избегаете загромождения проекта при каждом сборке в Visual Studio.

Затем создайте файл vue.config.js в ./client-app/ и добавьте следующий код.

module.exports = {
    outputDir: '../wwwroot',

    configureWebpack: {
        output: {
            devtoolModuleFilenameTemplate: '[absolute-resource-path]',
            devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
        }
    }
};

Предыдущий код настраивает webpack и задает папку wwwroot.

Сборка с помощью vue-cli 3.0

Неизвестная проблема с vue-cli 3.0 может предотвратить автоматизацию процесса сборки. Каждый раз, когда вы пытаетесь обновить папку wwwroot, необходимо выполнить команду npm run build в папке клиентского приложения.

Кроме того, можно создать проект vue-cli 3.0 как событие предварительной сборки с помощью свойств проекта ASP.NET. Щелкните проект правой кнопкой мыши, выберите Свойства, и добавьте следующие команды на вкладку Сборка, в текстовом поле командной строки события предварительной сборки.

cd ./client-app
npm run build
cd ../

Ограничения

атрибут lang поддерживает только языки JavaScript и TypeScript. Допустимые значения: js, jsx, ts и tsx.
атрибут lang не работает с тегами шаблона или стиля.
Отладка блоков скриптов в .vue-файлах не поддерживается из-за их предварительной обработки.
TypeScript не распознает .vue файлы в качестве модулей. Вам нужен файл, содержащий код, например, представленный ниже, чтобы показать TypeScript, как организованы файлы .vue (шаблон vue-cli 3.0 уже включает этот файл).
```
// ./client-app/vue-shims.d.ts
declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}
```
Выполнение команды npm run build в качестве события предварительной сборки в свойствах проекта не работает при использовании vue-cli 3.0.