Веб-разработка | ASP.NET Core | Vue.js
Использование компонентов Vue в ASP.NET Core без сборщика
Простой способ использования компонентов Vue.js в веб-приложении ASP.NET Core без сборщика JavaScript
На других языках: DE
Часть 1. Использование ASP.NET Core Razor Partials
Некоторое время назад я искал простой способ начать использовать возможности компонентов Vue.js в моем проекте ASP.NET Core и не смог найти никакого простого решения для начала.
Все решения, которые я нашел, требовали использования сборщика JavaScript, такого как Webpack, и работы с ним, а также множества других пакетов npm в моей кодовой базе. Мне эта идея не понравилась. Для начала мне нужно было что-то простое и быстрое. И тогда я пришел к мысли, как это сделать самому.
Вот мой простой способ использования однофайловых компонентов Vue.js в проекте ASP.NET Core с помощью Razor Pages и без какого-либо сборщика JavaScript.
Я покажу вам пошаговую инструкцию, как создать простой компонент Vue.js с картой Bootstrap 4.
1. Создайте новое веб-приложение ASP.NET Core на основе шаблона с помощью Razor Pages.
2. Добавьте Vue.js в проект
Новая версия 3 Vue.js вышла недавно, и теперь мы можем выбирать между версиями 2.x и 3.x.
Мое решение было разработано до выхода третьей версии Vue.js (v3.x) и использует вторую версию (v2.6.x). Эта версия отлично вписывается в решение и очень легко интегрируется в проект. Позже я напишу о реализации своего решения с использованием версии Vue.js. v3.x.
Большим преимуществом версии 2.x является широкая поддержка браузеров. Используя Vue.js v.2.6, мы поддерживаем все браузеры, совместимые с ECMAScript 5 без каких-либо прокладок или полифиллов.
ECMAScript 5 (ES5) полностью поддерживается не только большинством современных устройств и систем, но и более старыми, такими как, например, Internet Explorer 10 (IE10).
Поскольку мы будем использовать Vue с шаблонами, нам нужно установить полную версию (Runtime + Compiler). Вы можете прочитать в Объяснении различных сборок Vue.js
Чтобы установить Vue.js в свой проект, откройте файл _Layout.cshtml в папке Pages \ Shared и добавьте тег скрипта со ссылкой на библиотеку Vue.js.
Я просто буду использовать текущую разрабатываемую версию Vue из CDN.
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
Поместите его между библиотекой сценариев `site.js` и разделом страниц Razor« Скрипты ».
3. Создайте новое представление Razor с именем _Card.cshtml в той же папке Pages \ Shared.
Этот Razor View будет нашим однофайловым компонентом Vue.js
Удалите весь синтаксис Razor Pages и добавьте следующий код:
Здесь мы имеем ту же структуру, что и любой файл компонента «.vue». Есть блок со стилем CSS для компонента, глобальная регистрация компонента «vue-card» и раздел шаблона с HTML-кодом Bootstrap 4 Card.
Компонент «vue-card» имеет следующие параметры (реквизиты):
- id
- имя
- img
Теперь мы можем использовать наш новый компонент в любом месте проекта, включая его как частичную страницу Razor.
4. Откройте файл «Index.cshtml» и добавьте следующий код с компонентом vue-card:
Теперь мы добавили на стартовую страницу новое приложение Vue и наш компонент vue-card.
Если вы все сделали правильно, после перезапуска новый компонент карты должен появиться на стартовой странице вашего веб-приложения.
Объединение компонентов Vue с синтаксисом Razor предоставляет нам очень гибкое и мощное решение для быстрого и простого создания сложных веб-приложений.
Например, вот быстрое создание колоды Bootstrap Card из 4 карт:
Конечно, отказ от использования бандлера в проекте имеет некоторые ограничения и недостатки, но давайте начнем с преимуществ этого метода. :-)
Плюсы:
- достойная совместимость с браузером (начиная с IE10)
- простой в использовании
- быстро начать с
- отлично подходит для создания пользовательских компонентов Vue
Минусы:
- без объединения и минимизации
- Файлы .vue не поддерживаются.
- не совместим с другими библиотеками компонентов Vue
Самый большой недостаток моего решения заключается в том, что вы не можете использовать Однофайловые компоненты Vue (SFC), размещенные в файлах . vue. Это означает, что для использования какой-либо другой библиотеки компонентов Vue вам необходимо преобразовать все файлы .vue из собственных компонентов Vue в Razor Partials. Это можно было бы сделать, если бы вам это было нужно, но я бы не стал этого делать сам.
Если вам нужно использовать файлы .vue в вашем проекте, подумайте о том, чтобы начать использовать какой-нибудь сборщик javascript или проверьте решение « Использование однофайлового компонента Vue.js без модулей сборки ». от Джеймса Ви
Репозиторий GitHub с примером проекта:
В настоящее время я работаю над переходом на Vue v.3.x и добавлю обновленное решение позже.
