使用 Element UI 构建表单组件

简介

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

👀 预览

🎯 任务

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

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

🏆 成果

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/viewport("Viewport Declaration") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") html/FormsandInputGroup -.-> html/forms("Form Elements") subgraph Lab Skills html/head_elems -.-> lab-445636{{"凭空消失"}} html/viewport -.-> lab-445636{{"凭空消失"}} html/doc_flow -.-> lab-445636{{"凭空消失"}} html/embed_media -.-> lab-445636{{"凭空消失"}} html/forms -.-> lab-445636{{"凭空消失"}} end

设置项目结构

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

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

├── 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>

保存对 index.html 文件所做的更改。
刷新浏览器以查看更新后的页面。
确保表单如预期那样显示，如下方图片所示：

恭喜！你已成功修复问题并正确显示了表单。

✨ 查看解决方案并练习

总结

恭喜！你已完成此项目。你可以在LabEx中练习更多实验以提升你的技能。