Vue.js — это JavaScript-фреймворк используемый для создания пользовательского интерфейса. Одним из основных преимуществ данного фреймворка заключается в его легковесности, относительной простоте использования и высокой производительности. Как и другие популярные JavaScript-фреймворки, такие как Angular и React, Vue.js придерживается концепции разделения содержимого страницы на отдельные компоненты, содержащие в себе весь необходимый для себя HTML, CSS и JS код.

Создание и настройка проекта Visual Studio

Для начала создадим стандартный MVC .NET Core проект.

После этого выбираете приложение ASP.NET MVC Core 2.0 и нажимаем кнопку ОК.

Теперь переходим к донастройке проекта. Заходим в файл Startup.cs и добавляем следующие строки:

затем

и наконец

Эти команды позволяют автоматически обновлять файлы после редактирования исходного кода, а также переадресовывать на страницу по умолчанию, если введен некорретный адрес.

Теперь создадите файл webpack.config.js в корне проекта со следующим содержимым. Этот файл отвечает за настройку того, как webpack скомпилирует javascript, vue, scss, css и другие файлы проектов.

Теперь создайте файл .babelrc в корне проекта, чтобы настроить конфигурацию сборщика пакетов babel.

Создаем файл package.json также в корне проекта, чтобы настроить какие пакеты нужно получать с помощью npm.

Теперь открываем терминал менеджера пакетов и выполняем команды для получения всех необходимых пакетов. Если у вас данное окно не открыто, то его можно отобразить если зайти в меню Вид -> Другие окна -> Консоль диспетчера пакетов.

Для начала выполняем команду

После этого

Теперь переходим к редактированию представлений. Для начала изменим файл макета страницы Views/Shared/_Layout.cshtml.

И наконец изменим файл главной страницы Views/Home/Index.cshtml следующим удалив все лишнее. Лишние файлы About и Contact можно удалить.

Создадим папку App в корне проекта. И добавим туда два файла.

index.js

App.vue

После этого запускаем приложение, и проверяем результат. Не забудьте перевести режим запуска на приложение, вместо IIS.

 

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

В некоторых случаях может возникать следующая ошибка.

Чтобы ее исправить зайдите в папку проекта из командной строки с правами администратора и выполните команду. Это должно исправить эту ошибку.

Исходный код доступен в репозитории github https://github.com/shwanoff/TestVuejs.

Следующая статья Знакомство с SCSS при работе с Vue.js

P.S. Присоединяйся в любой удобной для тебя социальной сети. Для меня очень важно оставаться с тобой на связи, ведь у меня есть еще много полезной информации о программировании для тебя, которой я хочу с тобой поделиться.

Вконтакте
Telegram
Facebook
Twitter
Одноклассники
Дзен
Google+

 

shwan

Программист .NET

×
%d такие блоггеры, как: