Эта статья предназначена для разработчиков .NET, которые, возможно, в настоящее время работают с ASP.NET MVC и хотят изучить одну из трех больших сред javascript — React, Angular или Vue, используя свои существующие навыки работы с .NET.

Статья проведет вас через следующее:

  • Создайте новое приложение Asp Net Core с помощью Vue.js.
  • Загрузите данные из контроллера в ваше приложение Vue.js.

Есть несколько обязательных условий, а именно:

  • VSCode установлен
  • NPM установлен — установить здесь.

Об остальном позаботятся ниже.

Создайте новое приложение Asp Net Core с Vue.js

Во-первых, давайте начнем с открытия VSCode и создания нового приложения Asp Net Core с Vue.js с использованием шаблона vuejs.

Откройте терминал VSCode и создайте каталог, в который вы хотите поместить свой новый проект, затем перейдите в этот каталог и выполните следующую команду:

mkdir mynewproject
cd mynewproject
dotnet new vuejs

После этого вам нужно будет установить команду CODE в каталог вашего проекта, вы можете сделать это, перейдя в панель команд VSCode (Cmd + Shift + P на Mac) и введите «Код», затем нажмите «Команда оболочки: установить команду кода в ДОРОЖКА'.

После того, как вы установили команду кода, вы можете вернуться в свой терминал VSCode и запустить:

code .

Если ваш VSCode попросит вас добавить какие-либо необходимые отсутствующие активы, нажмите «Да».

Далее нам нужно установить зависимости, указанные в файле package.json.

Для этого выполните следующую команду npm:

npm install

После выполнения этой команды мы готовы запустить наш проект. Для этого выполните следующую команду npm:

npm run dev

Эта команда указывает npm запустить команду dev, указанную в нашем файле package.json. Давайте посмотрим, что делает эта команда.

cross-env — это библиотека npm, которая делает вашу команду npm независимой от платформы при установке переменных среды.

ASPNETCORE_ENVIRONMENT=Development просто устанавливает среду aspnet, позволяя ссылаться на нее в коде C#, подробнее см. здесь.

NODE_ENV=developmentподобно переменной среды asp net, это ваш эквивалент javascript, вы можете ссылаться на него в коде .js, используя process.env.NODE_ENV.

dotnet run эквивалентно нажатию F5 в Visual Studio, при этом будет запущена команда dotnet build перед запуском кода.

Теперь посетите https://localhost:5001, чтобы просмотреть ваше новое приложение asp net core vue.js.

Загрузите данные из контроллера в ваше приложение Vue.js.

Добавьте новую конечную точку в свой HomeController.cs со следующим кодом.

[HttpGet]
public IEnumerable<string> Hobbits()
{
    return new List<string>
    {
        "Frodo",
        "Sam",
        "Merry",
        "Pippin"
    };
}

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

В терминале VSCode нажмите Ctrl+C, чтобы остановить приложение, а затем снова запустите его.

dotnet run

Теперь вы сможете посетить https://localhost:5001/home/hobbits и увидеть возвращенный список хоббитов.

Теперь давайте отобразим этот список. Перейдите в ClientApp -> компоненты -> home-page.vue и введите следующий код.

Выше наш отредактированный компонент home-page.vue. Есть несколько замечаний.

Сначала мы добавили немного HTML для отображения наших хоббитов.

<ul>
<li v-for="hobbit in hobbits" :key="hobbit">{{ hobbit }}</li>
</ul>

v-for — это директива Vue для рендеринга списков объектов. Вы можете прочитать больше здесь". Это отобразит <li> элементов для каждого хоббита в нашем списке.

:key в идеале должен быть уникальным. Он используется Vue для оптимизации изменений в списке.

{{ hobbit }} используется для печати хоббита в виде текста. Если бы наш список хоббитов имел свойства, мы могли бы использовать {{ hobbit.name }} или {{ hobbit.isRingBearer }}.

Следующим фрагментом кода, на который следует обратить внимание, является импорт вспомогательной библиотеки, а именно axios. Это HTTP-клиент для браузера. Вы можете прочитать больше здесь".

import axios from 'axios'

Ранее мы рассмотрели код для отображения наших хоббитов. Чтобы отобразить этот список, нам нужно где-то их хранить.

data () {
    return {
        hobbits: []
    }
},

Это сообщает Vue, что мы хотим сохранить свойство с именем «hobbits» в нашем компоненте и что оно будет инициализировано как пустой массив.

Последний фрагмент кода отвечает за загрузку наших хоббитов с сервера.

mounted() {
    axios.get('/home/hobbits')
    .then((response) => {
        this.hobbits = response.data;
    })
}

mounted() — это крюк жизненного цикла Vue, он будет запущен, когда компонент будет смонтирован, после того, как будет сгенерирован HTML для элемента.

Затем Axios используется для загрузки данных о наших хоббитах из нашей новой конечной точки, после чего для свойства this.hobbits устанавливается значение response.data (наш список хоббитов). Следует отметить, что ключевое слово this относится к экземпляру компонента Vue.

С этого момента механизм реактивности Vue позаботится обо всем остальном и отобразит наш список хоббитов.

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