【测试开发】知识点-前端 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">，生成的文件都会自动注入到这里。
在程序运行起来之后，会动态的生成一些脚本，生成后就会注入到这里了，可以看下网页源码里这个位置：
然后上面是登录页的，现在我点击登录进去，查看【项目管理】的网页源代码，依然是这个内容：
这也就是上面说的整个项目只有这 1 个 html 文件入口了，至于其他的页面内容，就是通过脚本动态的渲染出来的。
2. src/main.js
这个就是能渲染丰富页面的 js 脚本了，生成出来就是网页源码里看到的src="/static/js/app.js"。因为目前是本地开发环境，没有去打包，所以都是临时生成的。
如果打包后就可以看到本地项目有了新的目录dist，这里可以找到生成的app.js文件。
继续来看maim.js。
这里面是没写业务逻辑的，可以看到有很多的 import ，主要引入了一些核心的功能模块。作用就相当于后端代码里，引入相关<dependency>，就可以使用对应的功能。
简单看一下：
import Vue from 'vue' // 用 vue 肯定要引入
import 'normalize.css/normalize.css' // 一个现代化的东西来替代css重置
import ElementUI from 'element-ui' // 用到 element-ui
import 'element-ui/lib/theme-chalk/index.css' // element-ui的一些主题样式
import locale from 'element-ui/lib/locale/lang/en' // element-ui 国际化
import '@/styles/index.scss' // 框架本身给自己定义的一些全局样式
import App from './App' // 引入根组件
import store from './store' // 叫状态管理，这里可以简单理解为一个存放前端数据的地方
import router from './router' // 路由模块
import '@/icons' // 扩展图标模块
import '@/permission' // 框架提供的前端角色权限控制模块
继续往下看，这块是跟前端使用 mock 接口有关的，我实际中没有使用，直接调用后端的真实接口，可以忽略。
/**
* If you don't want to use mock-server
* you want to use MockJs for mock api
* you can execute: mockXHR()
*
* Currently MockJs will be used in the production environment,
* please remove it before going online ! ! !
*/
if (process.env.NODE_ENV === 'production') {
const { mockXHR } = require('../mock')
mockXHR()
}
再往下到了 element-UI相关的，虽然最上面引入了 vue 和 ElementUI，但是为了方便的将 2 者融合使用，这里把ElementUI挂载到了Vue中。
// set ElementUI lang to EN
Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)
在最后，创建了一个 vue 对象：
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
之前在单学习 vue 的时候，写demo的时候都需要在 html 里 new 一个 vue 对象。
但是在使用框架的过程中，在各种页面vue组件里并没有再去创建，比如看接口定义的页面：
并没有去 new vue，但是并不是不需要了，只是这个事情在main.js里做了。
在创建的过程中，指定了渲染的对象是el: '#app'，# 是代表 id，id=app的元素，其实就是public/index.html中的<div id="app"></div>。
接着就会给这个 vue 对象挂载路由router，也就是上面导入进来的模块，也就是之前做开发的时候需要改造的一个地方。
可以继续滑到router/index.js最底部：
看到最终创建了router并且导出。
回到main.js，看最后的render: h => h(App)。这里的render是渲染引擎。
作用是渲染页面当中要展示的内容，也就是要展示组件。展示哪个组件？就是App，也就是上面导入来的根组件。
最终所有的组件都会显示到index.html中的<div id="app"></div>下。
3. src/router/index.js
路由就是上面提到的地方，在实际开发过程中，这里也是需要我们针对自己的项目进行改造的地方。
4. src/App.vue
顶层组件，也就是上面提到的根组件。
这里有个<router-view />，实际上就是路由出口，用来显示模板内容，这些模板就是src/views下的文件来定义的。
比如上图中所示的我们开发中自己定义的组件内容，都会在路由出口这里展示。
那么一个path如何能展示对应的模板，肯定得有映射关系，就是定义在路由模块里的内容。
以这个登录为例，当输入的路由等于/login，就会去找/views/login/index模板，最后 /views/login/index.vue就会显示在路由出口。
如果 chrome装了vue.js devtools插件，在登录页面按F12 可以看到组件嵌套详细:
三、Layout 组件
除了上述几部分内容，还有一个与页面息息相关，就是 Layout 组件。在路由js文件里就已经出现过了。
在路由里也是导入进来使用的，实际位置就是src/layout/index.vue。
/* Layout */
import Layout from '@/layout'
1. 布局组件里的内容
打开src/layout/index.vue，看看里面都有什么。
首先标记出来的有 3 个内容：
- sidebar：侧边栏
- navbar：导航栏
- app-main：主内容区
对应到页面其实就是这样的：
继续往下看。
从./components中导入了3个子组件，然后注册子组件。
子组件注册好之后就可以在页面中调用了，也就是在上面刚介绍过的地方。
这里框架里是可以不区分大小写的，AppMain小写不加驼峰就写成了app-main。
所以现在来看到话，App.vue下面嵌套着Layout， Layout下面又嵌套着上面这3样。
移动鼠标在不同组件上可以看到页面对应部分会高亮。
从外，我们的其他path也都有这个 layout，当我们的页面内容想能够展示在这个布局里，就使用这个Layout组件就好。
2. 嵌套到Appmain主区域里显示
path下的子节点的组件会嵌到 Layout 下的 Appmain组件里展示。
继续打开 Appmain 探索一番。
看到里面嵌套了一个router-view路由出口，而在顶层的App.vue里也是有一个的。
那么现在就是：
- App.vue 里有个路由出口
- APP.vue 嵌套了 layout，layout里面又有这个 AppMain
- AppMain 里也有一个 路由出口
而且AppMain所在的位置，就是页面的主内容区域。所以，AppMain 里的路由出口就是子路由出口了。而子路由出口就对应的子路由。
所以在路由模块里，children下面的就是子路由了。
那么现在/interfaceTest/apiManagement，这个路由对应的组件就是@/views/apiManagement/moduleTreeTable，会显示到主内容区域。
所以，当我们点击不同的子路由的时候，在主内容区域就可以看到不同的页面组件了。
到这里就是对于 vue-element-admin 前端框架的简单分析，帮助理解我们写的前端代码到底是怎么运作最终呈现出来。
