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

Статья
11/06/2023

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, выберите пункт Средства>Получить средства и компоненты..., после чего запустится Visual Studio Installer. Выберите рабочую нагрузку Разработка Node.js, а затем элемент Изменить.
Чтобы создать проект ASP.NET Core, вам нужны ASP.NET и рабочие нагрузки веб-разработки и кроссплатформенной разработки .NET Core.
У вас должна быть установлена среда выполнения Node.js.

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

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

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

Создание проекта Vue.js с ASP.NET Core и интерфейсом командной строки Vue

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

Важно!

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

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

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

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

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

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

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

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

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

Откройте файл ./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

Перейдите в командную строку и измените текущий каталог на корневую папку проекта.
Введите 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 в папке client-app.

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

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.

Поделиться через

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

Необходимые компоненты

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

Создание проекта Vue.js с ASP.NET Core и интерфейсом командной строки Vue

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

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

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

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

Создание нового клиентского приложения по шаблону с помощью интерфейса командной строки Vue

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

Указание проекта для сборки клиентского приложения при каждом запуске сборки

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

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

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

Сборка с vue-cli 3.0

Ограничения

Обратная связь

Обратная связь

Дополнительные ресурсы

Поделиться через

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

Необходимые компоненты

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

Создание проекта Vue.js с ASP.NET Core и интерфейсом командной строки Vue

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

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

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

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

Создание нового клиентского приложения по шаблону с помощью интерфейса командной строки Vue

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

Указание проекта для сборки клиентского приложения при каждом запуске сборки

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

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

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

Сборка с vue-cli 3.0

Ограничения

Связанный контент

Обратная связь

Обратная связь

Дополнительные ресурсы