在實戰中學習，在學習中成長。
測試平台到現在開發了幾個功能了，前后端也陸續寫了些代碼，覺得應該回顧一下，梳理一些知識點。
比如前端在用的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 前端框架的簡單分析，幫助理解我們寫的前端代碼到底是怎么運作最終呈現出來。