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. Я намерен и дальше улучшать его, добавлять функции и идти в ногу с изменениями пакетов.