Как мы можем интегрировать Vue JS с ASP.NET MVC и пакетами nuget

Question

Как мы можем интегрировать Vue JS с проектом MVC, который существует и используется с пакетом Nuget.

Пробовал с нижним подходом.

<h3>VueJS 2 in ASP.NET MVC 5</h3>
<div id="aboutPage">
    { { message }}
</div>
<script>
    var aboutPage = new Vue({
        el: '#aboutPage',
        data: {
            message: 'Hello Vue! in About Page'
        }
    });
</script>

Вопрос:

1. Есть ли необходимость в каком-либо дополнительном пакете, например - webpack или gulp, у нас уже есть конфигурация пакета MVC?

2. Как мы можем создать отдельные файлы или дизайн для каждого вида, например:

1. Для разделения сервисного вызова (для вызова веб-API со стороны клиента)

2. выделите файл шаблона.

3. методы или логика для записи в JS.

любой пример для MVC с VueJS-подобным - контроллер, просмотр, сервис, vue JS-файл великолепен.

Большое спасибо!

Answer 1

Если вы хотите сохранить файлы .cshtml и использовать MVC в качестве многостраничного приложения, вы можете взглянуть на этот шаблон в качестве примера или отправной точки. https://github.com/danijelh/aspnetcore-vue-typescript-template

Вы можете создавать модули страниц, которые вы хотите улучшить с помощью Vue, и импортировать этот пакет.

Answer 2

Вы можете использовать vuejs buy, добавив его в свой макет.

 @Scripts.Render("~/node_modules/vue/dist/vue.min.js")

Вам необходимо установить Nodejs на свой компьютер, чтобы использовать функции NPM и ES6. Для интеграции Vue.js в .NET MVC вам необходим модуль bundler (webpack, gulp), вы можете выбрать один из следующих вариантов, популярным является webpack:

1: (Gulp, Browserify), который имеет некоторые ограничения, такие как поддержка, требует только ресурсы обработки синтаксиса. и установка довольно сложная.

2: (Webpack), в котором есть много интересных вещей, которые вы можете сделать, Hot Reload. проверить этот репо используя webpack, вы конфигурируете его для обработки только js-файлов, и он также будет обрабатывать js-файлы для сборки, при сборке каждая запись будет копироваться в Scripts / bundle, также вам понадобятся некоторые загрузчики, такие как ass (vue, scss, css и js) для веб-пакета. отметьте это

Webpack использует для разработки webpack-dev-server, который по сути является сервером на базе node.js, который обслуживает ресурсы (javascript, css и т. Д.), Которые могут интерпретировать наши браузеры. Обычно эти ресурсы включают в себя некоторые удобные для разработки функции, такие как Hot Reload. Эти активы не минифицированы и сильно отличаются от тех, которые создаются при создании для производства.

devServer: {
proxy: {
    '*': {
        target: 'http://localhost:5001',
        changeOrigin: true
    }
}

},

У webpack-dev-server есть функция, которая может прокси-запросы от одного URL к другому. В этом случае каждый запрос от «webpack dev server» будет передаваться на ваш «asp.mvc сервер». Итак, если мы запустим наше приложение MVC на http://localhost:5001 и запустим npm run dev, на порту 8086 вы увидите тот же вывод, что и в нашем приложении MVC.

Ответы: 1: да, вы должны настроить Webpack или Gulp. 2. с помощью веб-пакета вы можете все, что вам нужно для структурирования файлов проверить это дерево

-app
--libs
---- Utils
---- компоненты
--------- Обще
---------.......
----- страницы
---------.....

проверить эту статью
https://medium.com/corebuild-software/vue-js-and-net-mvc-b5cede228626
http://www.lambdatwist.com/dot-net-vuejs/