По стандартному шаблону Asp.Net Core MVC в Visual Studio 2017 создаем новый проект, переводим его на четвертый Bootsrtrap, встраиваем туда модульное приложение Vue.js на TypeScript. Получаем простую, обозримую и легкую заготовку для создания своих веб-приложений на VS2017 с использованием Vue.js и TypeScript. Привычная среда разработки, в которой можно выполнять большую часть кодинга и отладки, а также быстрая пересборка приложения, делают работу вполне комфортной. В генерации JavaScript-кода приложения принимает участие только штатный компилятор TypeScript и VS2017, что сильно сужает круг подозреваемых при возникновении глюков. А это, в свою очередь, — тоже большая экономия времени и нервов. Материал рассчитан на способных управиться с VS2017 и знакомых с прогрессивным JavaScript фреймворком Vue.js. Содержание Введение
Проект TryVueMvc
 — Создание стартовой болванки
 — Установка NPM пакетов
 — Настройка бандлинга и минификации
 — Настройка компилятора TypeScript
 — Создание и сборка AppHello
 — Корректировка _Layout.cshtml
 — Корректировка Index.cshtml
 — Сборка и бандлинг из командной строки
Заключение Ожидаемый результат выполнения данного tutorial — компонента Vue.js, внедренная на одну из страниц приложения Asp.Net Core MVC, в котором Bootstrap4 будет обеспечивать адаптивный интерфейс приложения (адаптацию под устройства с разными размерами экрана). Сборка основного js-бандла приложения будет производится компилятором TypeScript. Сборка остальных бандлов, в том числе для библиотек внешних поставщиков, будет производится Bundler&Minifier. Попутно Bundler&Minifier минифицирует всё необходимое. Генерация html-страницы будет производится на сервере приложением Asp.NetCore MVC с использованием Razor-рендерера представлений. Загрузка и запуск js-скрипта приложения будет производится при помощи SystemJS (легко заменить на RequireJS). Попутно настроим сборку и бандлинг приложения из командной строки через dotnet bulild, dotnet bundle. Как видите, в чистом виде "сообразить на троих" не получается — каждый участник процесса норовит притащить свою компанию. Самое удачное, что получилось, хотя бы на время, избавится от Webpack, который тащил за собой много чего. В этом tutorial сделаем порядком надоевшее приложение AppHello. В дальнейшем его можно будет заменить на своё. Для этого будет достаточно заменить ts-файлы, html-шаблоны и css-файлы.  Для данной статьи на github размещено решение VS2017 с проектом TryVueMvc. В это решение планируется добавление других проектов — просьба не обращать на них внимания. Для начала создаем стартовую заготовку для приложения. В качестве отправной точки используем проект «Веб-приложение ASP.NET Core» по шаблону MVC (модель-представление-контроллер).  Содержимое wwwroot/ надо очистить, оставить только favicon.ico. На момент написания этой статьи стандартный шаблон приложения Asp.Net Core MVC шел вместе с Bootstrap3, поэтому в каталоге wwwroot/ будут файлы используемых библиотек. Они нам не потребуются, т.к. Bootstrap мы будем устанавливать в node_modules, затем перенесем необходимое в wwwroot/. Определяем конфигурацию NPM (менеджера пакетов Node.js). Для этого добавляем в проект файл конфигурации NPM под именем package.json.
Нам нужны пакеты Vue, SystemJS и Bootstrap4. Последний, в свою очередь, требует jQuery и Popper.js. Обычно новые NPM-пакеты после изменения в package.json устанавливаются автоматически. В противном случае — вызвать команду восстановления пакетов принудительно. В создаваемом приложении отказываемся от использования CDN (Content Delivery Network или Content Distribution Network), используемые библиотеки внешних поставщиков собираем в бандлы, минифицируем и помещаем в wwwroot/dist/. Внешние библиотеки разбиваем на 2 части: vendor1 и vendor2 (он же vue). Сборку app-bandle.js делает TypeScript, поэтому здесь его только минифицируем.  Создаем пустую папку ClientApp, т.к. она указывается в bundleconfig.json (иначе будет ругань). Файл bundleconfig.json уже должен быть в проекте, остается его только правильно настроить. После сохранения изменений bundleconfig.json, в каталоге wwwroot/dist должны появиться бандлы от vendor1 и vendor2. Бандлы нашего приложения появятся после создания необходимых исходных файлов. В свойствах проекта VS2017 есть закладка "Сборка TypeScript", в которой через удобный интерфейс можно задавать большую часть необходимых свойств компилятора. Но часть свойств компилятора, всё равно, придется определять и править в файле TryVueMvc.csproj руками. Желающие могут использовать этот способ настройки компилятора TypeScript. Если параллельно планируется использовать Webpack или другие системы сборки, то лучше использовать tsconfig.json. Добавляем этот файл и настраиваем по приведенному образцу. В нашем примере используется вариант организации проекта, когда CSS-файлы не являются собственностью отдельных компонент, а определяются для всего приложения централизованно. Создаем папку ClientApp/css для общих css-файлов. Создаем папку ClientApp/components для ts-файлов и html-шаблонов компонент. В каталоге ClientApp создаем файл index.ts, используемый как точка входа в приложение. Добавляем остальные файлы клиентского приложения AppHello. После сборки проекта и UpdateBundle в каталоге wwwroot/dist должны появиться готовые к использованию файлы: app-bandle.js, app-templates.html, main.css. Чтобы использовать Boostrap 4 вместо 3, надо маленько подправить содержимое файла Views/Shared/_Layout.cshtml. В качестве образца используем шаблон Bootstrap StarterTemplate  с офицального сайта продукта. Результат скрещивания _Layout.cshtml с этим шаблоном приведен под спойлером. Приложение Asp.Net Core MVC использует движок Razor для генерации html представлений. Обратите внимание, что попутно реализовали возможность переключения на минифицированные бандлы через конфигурацию окружения (свойство ASPNETCORE_ENVIRONMENT). Пример условной генерации ссылок на требуемые бандлы приведен ниже: В нашем примере используется вариант веб-приложения, которое на старте может обойтись без Vue.js. Обратите внимание, что в _Layout.cshtml нет загрузки основного бандла приложения и библиотек Vue.js. Компоненты Vue.js используются только на странице Index.cshtml. Если переместить компоненты Vue.js со стартовой страницы, можно сильно уменьшить время старта приложения. Текст Views/Home/Index.cshtml должен быть понятен для работающих с Asp.Net Core. На всякий случай объясню поподробнее. При помощи механизма DI (Dependency Injection) добираемся до свойств окружения и определяем, какие бандлы будем использовать. Определяем место вставки бандла с vue-шаблонами, а также точку внедрения приложения Vue.js: Загружаем бандл с vue-шаблонами и вставляем в секцию #app-templates. Затем загружаем System.js, который, в свою очередь, грузит все необходимое и стартует js-скрипт приложения. Приложение полностью готово, можно запустить стандартным для VS2017 способом. При отсутствии потребности в пересборке приложения через командную строку, можно пропустить этот пункт. Возможно, даже стоит его пропустить — бывают глюки с пересборкой в среде VS2017, если не учитывать некоторые особенности VS2017. Для созданного "с нуля" проекта, команда dotnet build соберет только DLL, а компилятор TypeScript вызван не будет. Естественно, команда dotnet совсем ничего не знает про расширение Bundler&Minifier. Поэтому надо установить пару NuGet пекетов: "Microsoft.TypeScript.MSBuild", "BundlerMinifier.Core". Затем в файл TryVueMvc.csproj внести изменения, которые требует официальная документация на эти продукты. Теперь сборка и запуск приложения может производится не только в среде VS2017, но и через командную строку в каталоге проекта TryVueMvc: Vue.js позиционируется как очень простой для освоения фреймворк. Утверждается, что кривая обучения у конкурентов значительно круче. С моей точки зрения, это действительно так. Разве что, приходится туго тем, кто использует Asp.Net Core и VS2017 для создания приложений Vue.js на TypeScript. Реально полезных примеров и статей в интернете не много для этого сочетания используемых продуктов и технологий. Надеюсь, что данный tutorial поможет снизить стартовый барьер при создании приложений Vue.js + Asp.Net Core MVC + TypeScript. Анонс продолжения Планирую опубликовать ещё один tutorial, в котором AppHello заменим на AppGrid, созданное на основе примера Grid Component Example с официального сайта Vue.js. Попутно увидим, что надо выкидывать, при замене на своё приложение.  По возможности, постараюсь описать применяемый мной вариант решения проблемы строгой типизации при использовании TypeScript (без декораторов и vue-class-component). Благодарности Ссылки Update 05.06.2019: На данный момент исходный код примеров на на github немного отличается от приведенного в статье. Изменения вызваны обновлением версий используемых компонент (переход на Asp.NETCore 2.2 и т.д.). Разработчик: C#, SQL