使用 Element UI 构建表单组件

介绍

在这个项目中，你将学习如何使用 Element UI（一个流行的 Vue.js UI 库）来构建一个表单组件，并将其集成到一个 Web 应用程序中。

👀 预览

完成的表单组件预览

🎯 任务

在这个项目中，你将学习：

如何理解初始代码结构和文件组织
如何识别并修复导致表单消失的问题
如何确保表单在 Web 应用程序中正确显示

🏆 成果

完成这个项目后，你将能够：

在 Vue.js 应用程序中使用 Element UI 创建表单组件
排查并修复与 UI 组件集成相关的问题
理解在 Web 应用程序中正确包含和引用外部库的重要性

设置项目结构

在这一步中，你将设置项目文件和结构。请按照以下步骤完成此步骤：

打开项目文件夹。目录结构如下：

├── 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 文件的文件夹。

点击 WebIDE 右下角的 Go Live 按钮来运行项目。

接下来，打开虚拟机顶部的“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 文件。
在 <head> 标签内部的底部添加对 element-ui-2.15.10/index.js 文件的引入。

<!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 样式 -->
    <link rel="stylesheet" href="./element-ui-2.15.10/index.css" />

    <!-- 待办事项：element-ui js -->
    <script src="./element-ui-2.15.10/index.js"></script>
  </head>
  <!--... -->
</html>