1.el-container 標簽非必須。
2.每一個vue文件中，所有的html代碼都應該寫在同一個dom中，否則會報錯。
3.el-aside默認寬度為300px,可以通過在標簽中修改width屬性來調整。
4.若router-view想通過name屬性來指定渲染的組件，則在router.js中，該組件在注冊時，必須是components的方式，否則無法加載。
5.vue項目會加載public/index.html，但是index.html中具體的dom都寫在App.vue中；而究竟哪些要加載哪些不加載，則是在main.js中，通過new Vue().$mount('#dom_id')來加載的。
6.在vue文件的script部分，以及js文件中，可以通過import AAA from ‘BBB’來引入某個文件（或者叫組件），這里的AAA可以隨意命名，相當於定義一個叫AAA的變量，變量的類型是BBB這個路徑所指向的文件/組件。
7.接上：每一個vue文件在創建的時候，都有一個默認生成的 export default{}，這是將該文件導出為一個組件；說白了，這相當於是這個文件/組件的對外開放的接口，只有經過export的vue，才能被別的文件import
8.再接上：除了export default之外，還有個export；同一個文件可以有多個export，但是只能有一個export default：類似於public class 與 class 的區別。
9.在一個組件中，可以在export default中，通過components將其注冊為新的標簽，然后就可以當做一般的html標簽來使用了。
<template> <body> <TopVue></TopVue> <section class="flexModal fixedLeft"> <LeftVue></LeftVue> <CenterVue></CenterVue> </section> <BottomVue></BottomVue> </body> </template> <script> import LeftVue from './views/frame/left.vue' import BottomVue from './views/frame/bottom' import TopVue from './views/frame/top' import CenterVue from './views/frame/center' export default { name: 'app', components: { LeftVue, BottomVue, TopVue, CenterVue } } </script>
10.寫到這里，用朴實的外行語言解釋幾個名詞吧：
組件：一個組件就是一個標簽，這個標簽可以是框架自帶的，也可以是components新注冊的：換句話說，每個vue文件都是一個組件；
路由：顧名思義，就是指到達這個地方（可以是方法、頁面）的路徑；有點類似於接口地址，在router.js中定義路由，感覺就像是在定義接口地址。
待續吧，想不起來其他的了。
11.關於router-link和router-view
router-link就是定義一個跳轉的觸發點，而router-view則用於渲染它請求的dom；
通過這幾天的練習，感覺router-view會更多地以指定name的方式來渲染；這樣一來，router-link和router-view就不需要寫在一起了，甚至都不需要寫在同一個vue文件中：router-link的to屬性會指定路由，而router.js則會定義這個路由並綁定它所路由到的vue文件，router-view則會通過name屬性來讀取router.js中定義好的路由，並將路由到的vue文件渲染在它所在的位置。
通過上面的描述可知，它們三者之間是相互獨立的，因此並不需要寫在一起。
比如說你在某個組件中使用了一個router-link：
<template> <div> <router-link to="/hanzi/hanziQuery">漢字查詢</router-link> </div> </template>
然后router.js中相關的路由是這樣定義的：
import Vue from 'vue' import Router from 'vue-router' import HanziHome from './views/hanzi/hanziHome' import HanziQuery from './views/hanzi/hanziQuery' Vue.use(Router) export default new Router({ routes: [ { path: '/hanzi/hanziQuery', name: 'hanziQuery', components: { hanziQuery: HanziQuery, hanziHome: HanziHome } }] })
此后，你就可以在任意一個地方來使用router-view來渲染，比如說在一個你隨便找的地方：
<template> <div> <router-view name="hanziQuery"></router-view> </div> </template>
這樣，就完成了一個閉環操作。
需要注意的是：router-link中的to屬性要與router.js中路由的path值相同；而router-view中的name屬性要與router.js中路由的name屬性值相同。
上面的話再換個角度講，意思就是：如果你不打算通過router-view指定name的方式來渲染，那么在router.js中定義路由時，name屬性也沒必要寫。
---------------------------------------以上2019.5.14 17:29:54更新，待續---------------------------------------
12.ElementUI的導航菜單
ElementUI有現成的導航欄標簽，可以折疊，有動畫效果。一個完整的示例如下：
<el-menu :default-openeds="['1']" style=" background: #93F393;"> <el-submenu index="1"> <template slot="title"><i class="el-icon-message"></i>導航一</template> <el-menu-item-group> <template slot="title">分組一</template> <el-menu-item index="1-1"> <router-link tag="li" class="menu" to="/zidian/zidianQuery" exact-active-class="true" id="zidianQueryMenu" active-class="_active">字典查詢 </router-link> </el-menu-item> <el-menu-item index="1-2">選項2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分組2"> <el-menu-item index="1-3">選項3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">選項4</template> <el-menu-item index="1-4-1">選項4-1</el-menu-item> </el-submenu> </el-submenu> </el-menu>
在網上的某些文章中，還會在外層添加el-container標簽，目前不知道加這個有什么好處，反正去掉也可以。而且加了這個容器之后，導航欄上下都會出現一個height為60px的空白，這個是el-container標簽默認的高度，試了試無法修改，所以也就索性去掉了。
13.導航菜單的樣式
導航菜單默認的background為白色FFF，同樣可以在標簽中直接通過style屬性來修改成你想要的顏色，比如上面代碼中的style=" background: #93F393;"。但從視覺效果上看，這個只能改變“導航一”這三個字的背景色，當你打開它的字菜單的時候，字菜單的背景色還是白色，這時候如果有需求，可以修改el-submenu標簽或者el-menu-item-group標簽的style.background屬性。
el-menu-item-group標簽是把菜單分了組，具體的效果如圖：
上圖中就是菜單分組的效果，分組的命名有兩種方式，一種是在el-menu-item-group中添加一個template標簽，如上面代碼中的<template slot="title">分組一</template>；另一種就是在el-menu-item-group標簽中定義title屬性，如上面代碼中的<el-menu-item-group title="分組2">。
菜單分組的效果我們平時也常見，如下圖：
這是博客園的右鍵菜單，導航效果圖中的“分組一”、“分組2”，就相當於這里的那兩條灰色的線。
14.ElementUI的el-container標簽
上面提到了el-container標簽，這個是ElementUI的布局容器標簽，當子元素中包含 <el-header> 或 <el-footer> 時，全部子元素會垂直上下排列，否則會水平左右排列。也就是說，我們可以通過這個特性，來嵌套el-container標簽，完成自己想要的總體布局。與此搭配的還有幾個標簽：
<el-header>：頂欄容器。
<el-aside>：側邊欄容器。
<el-main>：主要區域容器。
<el-footer>：底欄容器。
比如說你只想要簡單的上中下結構的布局，那就只需要這樣：
<el-container> <el-header>Header</el-header> <el-main>Main</el-main> <el-footer>Footer</el-footer> </el-container>
至於別的上下、中下結構，刪減el-header或el-footer就可以了。
如果是上中下，中間分左右的結構，那就只需要這樣：
<el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-main> </el-container>
<el-footer>Footer</el-footer> </el-container>
如果是上中下，中間分左中右結構，那就是這樣：
<el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-main> <el-aside width="200px">Aside</el-aside> </el-container> <el-footer>Footer</el-footer> </el-container>
其他的根據需求刪減代碼就OK了。
具體的不多說，上官網鏈接。
---------------------------------------以上2019.5.15 11:17:13更新，待續---------------------------------------
15.見下一篇博文