【测试开发】知识点-前端 vue-element-admin 框架，项目组件分析

在实战中学习，在学习中成长。

测试平台到现在开发了几个功能了，前后端也陆续写了些代码，觉得应该回顾一下，梳理一些知识点。

比如前端在用的vue-element-admin框架，以及后端持久化层在用的 mybatis 等等，现在可以只懂皮毛，但是不能一直这样。

为了后面更得心应手的使用，接下来准备先整理一下关于这个前端框架的知识点。

一、组件

开始还是要了解一下组件：

• 组件(Component)是 Vue.js 最强大的功能之一。
• 组件可以扩展 HTML 元素，封装可重用的代码。
• 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。

说个贴合实际点的：就是在页面中看到的内容，都是由组件构成的。

就拿登录页来说，本身就是个登录页组件。而其中，还包含了表单组件。在表单组件里又包含了文本框组件。文本框里还包含了图标组件。。。

换句话来说，在vue js 当中，组件就可以理解为页面当中的某一块元素。

最上面的组件示意图我加工一下，大概就是这样子：

但是组件的细节就不整理了，网上系统的教程多得是，遇到对应的知识点去快速学习使用即可，现在的目的是了解在用的前端项目。

二、vue-element-admin 项目组件

在项目中，有几个重要的部分需要关注：

• 入口 html 文件：public/index.html
• 入口 js 脚本：src/main.js
• 路由：src/router/index.js
• 顶层组件：src/App.vue

1. public/index.html

目前项目当中虽然已经有了几个页面，但实际上，整个项目只有 1 个 html 文件。通过其他 js 文件的配合，会把具体需要的 vue 文件加载到这个 html中显示。

上图就是在项目中的代码文件了，这时候鼠标右击浏览器的登录页面，点击【查看网页源代码】，可以看到运行后的代码效果。

注意，在这个 html 中，有一个<div id="app">，生成的文件都会自动注入到这里。