Как мне настроить ASP.NET Core + Vue.js?

Ответ 1

Я был полностью потерян, когда я задал вышеуказанный вопрос. Я провел несколько дней, и у меня все еще нет полной картины. Я уверен, что 2016 год трудный для изучения JavaScript.

Я хотел использовать Vue.js, потому что он проще, чем альтернативы. Меньше церемоний, меньше шаблонов, меньше кода. Это заклеймено как Прогрессивная структура... Верно! Но только в точку. Vue.js не решает проблему фрагментации экосистемы JavaScript в системах сборки.

Итак, вам придется выбрать сторону: нужны ли вам модули JavaScript и система сборки?

Вариант 1. Сохраняйте простоту: избегайте модулей JS и систем сборки.

Причины идти по этому пути:

• Вы не имеете много дней, чтобы узнать МНОГО вещей. (Конфигурирование bundler, npm + hell зависимостей пакетов, ES6.)
• Вы не хотите создавать передовое одностраничное приложение. Встраивание Vue.js в несколько HTML-страниц кажется достаточным.
• HTTP/2 становится мейнстримом, поэтому такие упаковщики, как Webpack или Browserify, будут давать меньше преимуществ, по крайней мере, по производительности.
• В конечном итоге модули ES6 будут поддерживаться непосредственно в браузере, поэтому нам не нужно встраивать любой последний JavaScript в совместимый с браузером JavaScript.

Вы сэкономите много дней, не тратя время на изучение материала, который, вероятно, устареет через несколько лет.

Если вы идете по этому пути, несколько рекомендаций:

• Просто добавьте библиотеки JS, используя <script>.
• Используйте только готовые для браузера библиотеки JavaScript. Код, который использует require() или префикс UMD (function (root, factory) { требует установки модулей (поэтому он не готов к работе в браузере, если вы не настроили CommonJS). Файлы JS с операторами import/export записываются в ES6, поэтому избегайте их тоже.
• Используйте Bower для загрузки готовых для браузера библиотек. Избегайте NPM (что подразумевает наличие системы модулей на месте).

Предостережение: вы не сможете использовать расширенные функции Vue.js, такие как однофайловые компоненты или Vue Router, но это нормально. Вам придется сделать несколько вещей вручную.

Вариант 2. Изучение модулей JavaScript + сборка систем.

Подготовьте несколько дней, чтобы узнать, а не код. Я только кратко объясню, как Webpack работал для меня. Browserify также работает, но я не пробовал.

Я рекомендую вам потратить некоторое время на изучение модулей JavaScript. Затем научитесь их собирать и упаковывать: я использовал Webpack. Его документация не так велико, что работало для меня было следить за его учебник шаг за шагом.

В этот момент вы, возможно, слышали, что Webpack ТАКЖЕ имеет встроенный веб-сервер с "горячей перезагрузкой модуля". Это веб-сервер для статических файлов, которые будут использоваться только для разработки. Его преимущество заключается в том, что всякий раз, когда вы редактируете модуль JS, браузер автоматически применяет изменения без обновления. Это очень хорошая, но необязательная функция. Проблема: этот встроенный веб-сервер конкурирует с нашим веб-сервером (Kestrel). Так что, если вы хотите попробовать эту функцию во время разработки, используйте промежуточное программное обеспечение Webpack ASP.NET Core, предоставляемое в репозитории MicrosoftSoftware JavaScript. Там вы найдете шаблон WebApplicationBasic, который я сейчас использую. Я анализировал его, удалял большинство его частей и, пытаясь использовать его, медленно понимал, для чего изначально была каждая часть.

При использовании Webpack вы в основном будете использовать 3 рабочих процесса:

• Встроенный режим разработки: создает огромные файлы, которые легко отлаживать. Используйте его вместе с 'watch-mode', чтобы при каждом изменении файла запускалась новая сборка Webpack.
• Встроенный режим производства: создает небольшие уменьшенные файлы. Полезно для публикации в сети.
• Использование веб-сервера Webpack и перезагрузка горячего модуля с промежуточным программным обеспечением Webpack ASP.NET Core означает, что ваше приложение будет запускать Webpack в фоновом режиме, собирать и отслеживать исходные файлы на предмет изменений. Вывод компиляции не записывается на диск, а только хранится в памяти и подается через HTTP. Промежуточное программное обеспечение JavaScriptServices перенаправляет запросы от Kestrel на веб-сервер Webpack, чтобы выполнить эту работу.

Какой бы конфигурацией Webpack вы ни пользовались, вы должны включить 'vue-loader в свою конфигурацию Webpack. Вас может вдохновить простой шаблон веб-пакета Vues.

Я не охватил все, что хотел, но эта тема слишком обширна, и мне нужно вернуться к кодированию. Пожалуйста, оставьте отзыв.

Ответ 2

Я опаздываю на вечеринку, но теперь для .NET Core доступен шаблон, который вы можете создать с помощью одной команды. В окне Windows с установленным .NET Core просто создайте пустую папку и в этой папке выполните эту команду, чтобы отобразить список доступных шаблонов:

dotnet new

Если у вас нет всех шаблонов, вам просто нужно запустить это, чтобы установить шаблоны SPA:

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

И это, чтобы создать новое приложение Vue:

dotnet new vue

За миллисекунды создается полностью новое одностраничное веб-приложение Vue.js с работающим внутренним компонентом .NET Core с контроллерами, представлениями и т.д. Это великолепно. Просто откройте проект в VS или VS Code, и вы в отъезде.

Есть также шаблоны для Aurelia, Angular, Knockout и React! Вы можете собрать их все и сравнить, как каждый решает одну и ту же проблему. Angular даже делает предварительный рендеринг на стороне сервера из коробки!

Я знаю, что у .NET Core есть путь, но он становится все более и более крутым с каждым днем!

Ответ 3

Во-первых, отказ от ответственности: я не смог найти ничего, что действительно соответствовало бы тому, что мне было нужно, поэтому я составил решение с нуля. Смотрите конец.

Вы спрашиваете о включении Vue через <script> (в этом случае сборка CDN). Тем не менее, вы также упомянули об использовании Babel и функции модулей ES6. В этом случае я бы рекомендовал использовать Webpack для клиентского приложения, которое скомпилирует ES6 с Babel, позволит вам использовать модули и компоненты и работать с шаблоном! Вы также получаете горячую перезагрузку модуля (отредактируйте исходный код и посмотрите изменения в клиентском приложении в режиме реального времени!), И Webpack объединит ваш SPA в статическое приложение HTML5.

Официальные документы Vue.js указывают на их собственный шаблон Webpack.

Таким образом, вы можете запустить сервер разработки Webpack и ваше приложение ASP.NET Core независимо, если это соответствует вашим потребностям, но есть лучшее решение, которое делает разработку еще более упорядоченной:

Microsoft с открытым исходным кодом JavaScriptServices позволяет вам запускать Node.js из ASP.NET Core, и у них есть некоторое промежуточное программное обеспечение Webpack, которое интегрирует сервер разработки Webpack в ваше приложение во время отладочных сборок.

Они предоставляют официальные шаблоны для Angular 2 и даже шаблон с меткой Vue.js, но шаблон Vue - это просто официальный шаблон Webpack без какой-либо интеграции с .NET; это так же, как автономный сервер.

Я не смог найти никаких шаблонов, которые делали это для Vue.js, поэтому я собрал пример приложения ASP.NET Core, которое загружает промежуточное ПО разработчика Webpack с приложением Vue.js Webpack. Когда сервер .NET Core работает в режиме разработки, вы можете редактировать исходный код Vue, и изменения будут отражены в быстрых инкрементальных исправлениях без необходимости перестраивать все приложение. В режиме выпуска .NET Core будет использовать готовый вывод Webpack. Вы можете найти его на GitHub:

https://github.com/0xFireball/YetAnotherShrinker

Приведенный выше репозиторий содержит полную демонстрационную версию приложения, в которой используются NancyFx, axios, Vue.js и Vue Material, и является простым укороченным URL-адресом. Если вам нужны шаги для более минимальной настройки, которую можно легко добавить в существующее приложение, ознакомьтесь с этой статьей в моем блоге.

Обязательное раскрытие: я написал этот пост в блоге.

Ответ 4

Может быть, кто-то найдет эту информацию полезной.

Вот несколько стартовых шаблонов, которые вы можете использовать для быстрой настройки проекта.

Первый дает вам мультипроектное решение с некоторой предопределенной архитектурой. Этот шаблон более точно соответствует реальным проектам, чем решение JavaScriptServices, которое уже упоминалось здесь. Он обеспечивает уровень домена, уровень хранилища и т.д. Обратите внимание, что это генератор Yeoman, и он использует TypeScript. https://github.com/vue-typed/generator-vue-net-core

Второй - это просто проект на GitHub, и вы должны клонировать его, если хотите его использовать. Это не Йоменский генератор, и я думаю, что это прискорбно, но я нашел структуру в этом шаблоне лучше, чем в первом. Кроме того, в нем есть много приятных мелочей, таких как фильтры исключений, которые вы, скорее всего, все равно будете делать в любом случае. И если вы начинающий, этот шаблон будет просто находкой. Этот шаблон рекомендуется на странице awesome-vue. Вот ссылка: https://github.com/mrellipse/toucan

Ответ 5

Вы можете попробовать шаги ниже, из этого простого руководства.

1. Настройте файл конфигурации npm (package.json)

Ниже приведен пакет npm, который я буду использовать:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "laravel-elixir": "^6.0.0-14",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3",
    "vuex": "^2.1.1"
  }
}

2. Установите пакет npm

Откройте командную строку и перейдите в корневую папку вашего приложения и установите набор пакетов npm из файла package.json с помощью команды 'npm install без кавычек.

3. Настроить Gulp

После установки пакета npm вы можете настроить файл Gulp. Вам нужно будет добавить файл конфигурации Gulp (gulpfile.js). Позже мы создадим Vue JS, который мы назовем vueApp.js с кодом ниже. Первый аргумент - это публичный выходной каталог, а другой - исходный каталог. Для получения более подробной информации о Webpack нажмите здесь.

var elixir = require('laravel-elixir');



require('laravel-elixir-vue-2');

elixir(function (mix) {
    mix.webpack('vueApp.js', 'wwwroot/js/dist', 'wwwroot/js');
});

4. Создайте файл Vue JS

В вашем обозревателе решений для проекта веб-приложения ASP.NET Core перейдите на wwwroot и добавьте папку 'js', а если она не существует, снова добавьте новую папку с именем 'dist. Теперь, когда настройка папки завершена, добавьте новый файл JavaScript в папку js с именем vueApp.js.

5. Начните кодировать в своем файле Vue JS

Теперь вы можете начать кодирование. В приведенном ниже примере мы будем отображать предупреждение о том, что Vue.js запущен.

import Vue from 'vue'

new Vue(
    {
        el: '#app',
        data() {
            message:'hello world using Vue.js on ASP.NET Core MVC.'
        },
        mounted() {
            console.log(this.message);
        }
    });

6. Примените Vue JS к вашему представлению Razor или HTML

Откройте страницу макета и оберните содержимое тега body с помощью div и id приложения. Мы будем использовать приложение, так как это тег id, который мы использовали в нашем примере кода с шага 5. Название приложения не требуется, и вы можете изменить его на желаемое имя. Наконец добавьте ссылку на файл Vue JS. Убедитесь, что вы вышли за пределы 'app div, ссылки на сценарии для предотвращения ошибок.

<body>

<div id="app">

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Project.Payrole</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
                </ul>
                @await Html.PartialAsync("_LoginPartial")
            </div>
        </div>
    </nav>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; 2017 - Project.Payrole</p>
        </footer>
    </div>

</div>

<environment names="Development">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
</environment>

<environment names="Staging,Production">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
            asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
            asp-fallback-test="window.jQuery"
            crossorigin="anonymous"
            integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
    </script>
    <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
            asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
            crossorigin="anonymous"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
    </script>
    <script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>

<script src="~/js/dist/vueApp.js" asp-append-version="true"></script>



    @RenderSection("Scripts", required: false)
</body>

7. Run Gulp

Теперь, когда мы настроили конфигурацию Vue.js и применили ее к нашему представлению Razor, нам нужно запустить Gulp, чтобы выполнить то, что мы установили в нашем gulpfile. Как и в шаге 2, перейдите в корневую папку и откройте командную строку, затем выполните команду 'npm run dev, снова без кавычек.

8. Бежать

Теперь для последнего шага запустите приложение ASP.NET Core MVC и проверьте консоль вашего веб-браузера. Теперь вы должны увидеть сообщение, которое мы установили на шаге 5.

(Я написал руководство в блоге для справки всякий раз, когда мне это нужно: D)

Ответ 6

Я создал этот шаблон, который сочетает .NET MVC с Vue.js. Вы можете использовать всю экосистему Vue, но если вы не хотите использовать ее на любой странице, вы можете просто отказаться от нее.

GitHub: https://github.com/danijelh/aspnetcore-vue-typescript-template

Средний: https://medium.com/@danijelhdev/multi-page-net-core-with-vue-js-typescript-vuex-vue-router-bulma-sass-and-webpack-4-efc7de83fea4

Вы можете использовать его в качестве примера или отправной точки.

Ответ 7

Я тоже опаздываю на эту вечеринку, но я верю, что многое изменилось за последний год или меньше. Учитывая, что спецификация модуля ES6 (а также динамических модулей) теперь имеет относительно широкую поддержку браузера (см. CanIUse), варианты интеграции Vue.js в представления ASP.NET MVC Razor теперь намного, намного лучше. Одна вещь, которую я узнал о Vue.js, это то, что лучше отбросить предвзятые мнения о "плагинах" в смысле jQuery. Если вы похожи на меня и пришли из мира jQuery (без опыта Angular или React), вы должны сесть и изучить компонентную модель Vue (даже SFC; хотя в этом случае они вам не нужны, они помогают определить общую картину)). Это требует приличного понимания ES6 (ECMAScript 2015).

Итеративный и инкрементальный подход заключается в том, что если вы хотите начать изучение и использование одного из величайших преимуществ Vue (простота разработки на основе CDD-компонентов), то просто добавьте "полную" сборку (см. Руководство) в тег сценария. Используя синтаксис модуля ES6 (импорт/экспорт), вы можете создать свою собственную библиотеку компонентов, которая подключается там, где вам нужно; Нет Webpack или транспортировки требуется. Это действительно потрясающая разработка, потому что вы можете заниматься Vue.js, используя лучшие практики для компонентной компоновки, не принимая начальную (обременительную) кривую обучения по добавлению Webpack и Babel в ваш .NET-проект. И, в качестве дополнительного бонуса, позже, когда вам потребуется усовершенствовать свою игру современными инструментами и рабочими процессами (NPM, Webpack, тестирование, HMR, VS Code и т.д.), Вы протестировали многие из ваших компонентов и готовы к работе.

По сути, вы создаете и присоединяете корневые экземпляры Vue (или компоненты Vue) к элементам в DOM. Как только вы поймете, что все является компонентом, вы обретете уверенность в том, что копаетесь в пакетах с открытым исходным кодом, таких как vue-moment и vue-datetime-picker, и импортируете их через синтаксис модуля или изучаете их для включения в ваши собственные пользовательские компоненты.

Ответ 8

Я потратил много времени, изучая, как использовать Browserify и Babel, чтобы я мог настроить свою собственную среду ES6. Тем не менее, когда дело доходит до использования Vue, я очень рад использовать шаблоны по умолчанию, к которым лучше всего обращаться при установке Vue-CLI. Вы можете выбрать между Browserify и Webpack, либо простыми настройками, либо полным набором с linting, модульными тестами и однофайловыми компонентами, используя версию только для времени выполнения.

Это просто работает.

Ответ 9

Этот вопрос немного стар, но..

У меня есть небольшой пример проекта на GitHub, который использует ASP.NET и Vue.js. Он использует Yarn (или npm) в качестве менеджера пакетов и Webpack.

Это не .NET Core, но способ его использования будет таким же. Это может помочь вам начать.

Странная файловая структура заключается в том, что она работает в нашей системе Sitecore CMS.

Надеюсь, поможет.

Ответ 10

Лучший пошаговый учебник по интеграции Vue.js с ASP.NET Core приведен здесь:

https://ourtechroom.com/tech/integrating-vuejs-in-aspnetcore-application/

Я разместил здесь пример проекта GitHub:

https://github.com/Diwas777/integrating-vue-with-asp.net-core-project