Упражнение. Создание приложения с помощью Vue.js

  • 5 мин

В этом уроке вы создадите начальное приложение Vue с помощью HTML-файла. Файл связан с библиотекой ядра Vue и внешним файлом JavaScript, содержащим сведения о приложении. Вы определяете одну переменную данных Vue и динамически отображаете ее на HTML-странице.

Клонирование начального репозитория

Начальный сайт для приложения включает изображения и базовый стиль. Начните с клонирования репозитория и открытия его в Visual Studio Code.

Откройте окно терминала или командное окно и воспользуйтесь следующей командой.

git clone https://github.com/MicrosoftDocs/mslearn-vue-get-started/
cd mslearn-vue-get-started/start
code .

Вы устанавливаете Vue.js из сети доставки содержимого (CDN).

  1. Откройте папку index.html в Visual Studio Code.

  2. Установите Vue.js, дав ссылку на библиотеку ядра Vue. В файле начального index.html под комментарием TODO: Import Vue.js core library вставьте следующий тег сценария.

    <!-- TODO: Import Vue.js core library -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Создание файла JavaScript для приложения Vue

При желании можно приступить к написанию сценария Vue в HTML-файле. Но обычно приложением можно управлять более четко, размещая код в отдельном файле JavaScript.

  1. Создайте файл с именем index.js.

  2. Создайте приложение, добавив следующий код в index.js.

    const app = Vue.createApp({
    data() {
        return {
            productName: 'Book a Cruise to the Moon',
            productDescription: 'Cruise to the moon in our luxurious shuttle. Watch the astronauts working outside the International Space Station.',
            // additional properties later


        }
    },
});

    Функция доступна createApp(), так как вы импортировали библиотеку Vue.js в тег <head> HTML-страницы. Затем аргумент для этой функции передается как объект со свойством data. Этот объект возвращает другой объект, используемый для хранения данных.

Импорт и подключение приложения

Теперь, когда вы создали код JavaScript, вы можете импортировать и подключить приложение.

  1. Вернитесь к index.html.

  2. Под комментарием TODO: Import Vue app добавьте следующий сценарий.

    <script src="./index.js"></script>
<script>
    app.mount('#app');
</script>

Использование приложения Vue

Теперь, когда вы создали и импортировали приложение Vue, вы можете создать дисплей для сведений.

В файле index.html под комментарием TODO: Add information display добавьте следующий HTML-код.

<div id="app">
    <h2>{{ productName }}</h2>
    <div>{{ productDescription }}</div>
</div>

Внимание

Порядок страниц важен при обработке Vue.js. Приложение нельзя подключить к модели DOM, пока страница HTML не будет полностью загружена. Поэтому импортируйте приложение Vue в нижней части страницы после того, как все остальные элементы HTML будут загружены в браузер. Обычно рекомендуется разрешить загрузку HTML-страницы перед вызовом внешнего файла сценария, предназначенного для изменения содержимого или структуры модели DOM.

Открытие страницы с помощью Live Server

Расширение Live Server для Visual Studio Code создает веб-сервер разработки, который автоматически обновляет страницу при обнаружении изменений. Чтобы установить расширение, следуйте приведенной выше ссылке. Затем используйте его для размещения страницы.

  1. Сохраните все файлы.

  2. Откройте палитру команд в Visual Studio Code, нажав клавиши CTRL + SHIFT + P. На Mac вместо этого нажмите CMD+SHIFT+P.

  3. Введите Live Server: Open with Live Server (Live Server: открыть с помощью Live Server).

    В открывшемся диалоговом окне вы увидите, что ваша страница теперь размещена в http://localhost:5500.

  4. Откройте веб-браузер и перейдите по адресу http://localhost:5500.

Вы увидите созданную страницу.

Снимок экрана: только что созданная страница.