Создание компонента формы с использованием Element UI

Введение

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

👀 Предпросмотр

предпросмотр готового компонента формы

🎯 Задачи

В этом проекте вы научитесь:

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

🏆 Достижения

После завершения этого проекта вы сможете:

Использовать Element UI для создания компонентов форм в приложении на Vue.js
Отлаживать и исправлять проблемы, связанные с интеграцией компонентов интерфейса пользователя
Разобраться в важности правильного включения и ссылки на внешние библиотеки в веб-приложении

Настройка структуры проекта

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

Откройте папку проекта. Структура каталогов следующая:

├── element-ui-2.15.10
│   ├── index.css
│   └── index.js
├── index.html
├── js
│   ├── http-vue-loader.js
│   └── vue.min.js
└── myform.vue

где:

index.html - главная страница.
myform.vue - файл с инкапсулированным компонентом формы.
js - папка для хранения файлов, связанных с Vue.js.
element-ui-2.15.10 - папка для хранения файлов element-ui.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и вручную обновите страницу, чтобы увидеть следующее в браузере:

Описание изображения

Компонент формы myform в исходном коде не отображается в браузере.

Идентифицировать проблему

В этом шаге вы узнаете о исходном коде, предоставленном для проекта, и определите проблему, которая привела к исчезновению формы.

Откройте файл index.html. Это главный HTML-файл, который является точкой входа в приложение.
Просмотрите код в index.html. Можно увидеть, что он включает необходимые файлы Vue.js и Element UI, а также содержит ссылку на компонент myform.vue.
Откройте файл myform.vue. Это Vue-компонент, содержащий форму, которую нужно отобразить.
Изучите структуру файла myform.vue. Он включает необходимый HTML, JavaScript и CSS для компонента формы.
Заметьте, что форма не отображается в браузере, несмотря на то, что она ссылалась в файле index.html.
Пересмотрите внимательно файл index.html снова.
Обратите внимание, что файл element-ui-2.15.10/index.js не имеет ссылки на index.html.

Исправить проблему

В этом шаге вы исправите проблему и убедитесь, что форма отображается правильно.

Откройте файл index.html.
Добавьте вставку файла element-ui-2.15.10/index.js в конец внутри <head>.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vanished Into Thin Air</title>
    <script src="./js/vue.min.js"></script>
    <script src="./js/http-vue-loader.js"></script>
    <!-- element-ui style -->
    <link rel="stylesheet" href="./element-ui-2.15.10/index.css" />

    <!-- TODO: element-ui js -->
    <script src="./element-ui-2.15.10/index.js"></script>
  </head>
  <!--... -->
</html>

Сохраните изменения в файле index.html.
Обновите браузер, чтобы увидеть обновленную страницу.
Убедитесь, что форма отображается как ожидалось, как показано на изображении ниже:

Описание изображения

Поздравляем! Вы успешно исправили проблему и правильно отобразили форму.

Резюме

Поздравляем! Вы завершили этот проект. Вы можете выполнить больше лабораторных работ в LabEx, чтобы улучшить свои навыки.

Закрылось в ниоткуда