TL; DR Написание SPA - это прекрасно! Написание многостраничных приложений - это прекрасно! Иногда вам нужно многостраничное приложение со вкусом SPA (несколько мини-спа), и это тоже прекрасно, и о чем эта статья.

Почему

Если вы посмотрите на крупные компании по всему миру, то заметите, что очень немногие из них на самом деле используют одностраничные приложения. Я активно использую Vue CLI в своих личных и деловых проектах, но заметил, что многим людям вокруг меня все еще нравится этот подход, независимо от того, используют ли они React, Vue, jQuery или что-то еще. Все сводится к типу продукта, который вы создаете.

Какие

Если вы создаете сервисно-ориентированный продукт, вам лучше отделить API от пользовательского интерфейса и использовать Vue CLI для части пользовательского интерфейса. Это не так, это стандартное многостраничное приложение с возможностью использовать всю экосистему Vue на нескольких страницах, не более того. Если бы не Vue, на его месте был бы jQuery или даже Vue, импортированный напрямую с тегом скрипта. Из этого руководства вы узнаете, как использовать Vue как многостраничное (несколько мини-SPA) приложение для улучшения свой пользовательский интерфейс или просто используйте простые .cshtml и razor, если вам не нужен Vue на определенной странице.

Быстрый старт

Если вы не хотите проходить через это, вы можете просто взглянуть на код на Github или создать новый проект с помощью пакета NuGet.

Установите пакет NuGet с помощью следующей команды.

dotnet new -i AspNetCore.Vue.TypeScript.Template

Создайте новый проект, вызвав команду dotnet new vuetypescript.

dotnet new vuetypescript --name TestProject.Web

После этого вы можете просто запустить проект из Visual Studio или выполнив команду dotnet run.

Возможности шаблона Vue, Vuex, Vue router, TypeScript, Bulma, Sass, Webpack 4 и Jest в качестве тестового движка.

Структурирование проекта

На данный момент вы знаете, что нам каким-то образом понадобится использовать Контроллеры, Представления и Vue, работающие вместе. Что касается .NET-части, ничего не меняется, вы можете создавать и делать, как всегда. Таким образом, мы добавляем Vue в проект, создавая так называемые модули (мини-спа) и ссылаясь на их пакеты в файлах .cshtml. Внутри решения .NET Core вы можете создать папку, я называю ее VueApp, но вы можете называть ее ClientApp или как угодно. Это будет выглядеть примерно так.

Вы можете заметить, что у нас есть TemplateController, Представление шаблона и папка Шаблон внутри VueApp. Итак, контроллер шаблона просто обслуживает Index.cshtml, внутри которого мы включаем пакет Vue, который будет управлять приложением mini spa.

Итак, как выглядит модуль Vue (мини спа), в данном случае шаблон?

Вы можете сделать его настолько сложным или простым, насколько вам нужно. Например, если вам не нужен Vuex или даже Vue router, просто не добавляйте его и не используйте. Дело в том, что при желании вы можете адаптировать этот мини-спа к потребностям конкретной функции или страницы. Кроме того, если вам не нужен Vue на определенной странице, просто используйте Razor и .NET. В этом шаблоне есть 2 модуля или мини-спа с названиями template и iceandfire. Эти два модуля сопровождаются папками common и __test__, куда вы можете поместить свои общие повторно используемые компоненты и написать тесты.

Ссылка на файлы пакета Vue

Для объединения и в качестве инструмента сборки я использую Webpack, но, конечно, это можно сделать, например, с помощью Parcel. Цель веб-пакета в этой истории - взять файл точки входа Vue и вывести его файлы javascript и CSS в виде пакета. После объединения вы получите следующую структуру.

Осталось указать эти файлы в Index.cshtml в папке Шаблон.

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

Как выглядит код

TypeScript может быть ошеломляющим и медленным для небольших проектов, но для больших проектов работа в команде может иметь огромные преимущества. Вам решать, нужно вам это или нет. Вы можете использовать его, если хотите, но не обязаны. Я написал этот шаблон, чтобы использовать полный набор технологий и продемонстрировать, как, например, функция хранилища Vuex работает с TypeScript.

Как выглядит приложение

Приложение состоит из 2 мини-спа, один демонстрирует магазин Vuex с TypeScript и использует сторонние библиотеки (шаблон), а другой просто извлекает некоторые данные из Game of Thrones API (iceandfire ).

Vue CLI 3

Vue CLI - отличный инструмент, и я использую его в каждом проекте. Если есть интерес к тому, как создать и подключить приложение Vue CLI с .NET Core MVC, я также могу опубликовать образец проекта / шаблона о том, как их настроить. Однако в этом случае вам следует настоятельно рассмотреть возможность разделения проектов API и пользовательского интерфейса. Если ваш продукт ориентирован на обслуживание, вы будете более гибкими, если разделите эти два проекта. При необходимости вы можете масштабировать только свой API, если он вызывает проблемы с производительностью, а пользовательский интерфейс остается нетронутым. Вы также можете заменить часть пользовательского интерфейса чем-то другим, не касаясь API.

Исходный код

Полный исходный код с веб-пакетом, машинописным текстом и другими файлами конфигурации доступен на GitHub.

Вклад и улучшение

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