今天正式開始入門篇，也就是實戰了~
首先我們是要做一個博客網站，UI 框架采用江湖傳聞中的 ElementUI，今天我們就來利用它確定我們博客網站的基本布局吧。
准備工作
-
新建一個vue項目（可以參考基礎篇里的搭建方法，也可以參考官網現在最近的 Vue CLI 3.x進行可視化創建和管理
-
安裝
vue-router -
安裝
elementui
以上的操作都可以在之前的博文中（基礎篇）找到完整步驟，這里就不重復了。
我們做完准備工作之后，目錄結構如下：
我們來看看這個目錄：
|--public 公共目錄
| |--favicon.ico 網站圖標
| |--index.html 網站入口文件
|
|--src 項目目錄
| |--assets 資源目錄
| |--components vue組件目錄
| |--views 視圖目錄，安裝 vue-router之后自動生成
| |--About.vue
| |--Home.vue vue-router 自帶的主頁示例
|
| |--App.vue 項目中 vue組件的入口文件
| |--main.js 項目的入口文件，實例化根實例，做一些配置，以及組件注冊，第三方庫引入
| |--router.js vue-router自動生成的路由映射對象
確定布局
在之前我們說到過， UI 才是最終的呈現效果，代碼是為它而服務的。因此 UI還是需要上點心的：
- 沒辦法做得很好看，那就盡量別做得太難看吧
若羽是個地地道道的后端，對於前端布局、UI設計可以說得上是七竅通了六竅： 一竅不通。
不過好在，這次選擇的 UI庫中有提供布局：
- Container 布局容器
官方文檔：查看
這里我們選用最常見的頁面布局，也就是只有 Header 和 Main的簡約式布局。畢竟復雜的咱也玩不溜，還是不嫌丑了。
查看項目代碼，尋找下手點
之前我們首先分析了整個項目的目錄結構，目的是為了提前預習預習，工欲善其事必先利其器！
預習的目的是為了我們在開始一個新項目時，要知道應該從何下手，而不是上來就擼起袖子一把梭。
這里我們首當其沖的當然是先看 main.js,因為它是項目的入口文件，可以在這里看到整個項目的初始化過程：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
代碼很簡短，它做了哪些事呢：
-
實例化根實例，並掛載在 Id 為 app的 dom節點上（這里掛載的就是 app.vue中的節點）。
-
配置路由對象。
我們再來看看 router.js 中路由對象是怎么定義的：
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
}
]
})
這里定義了兩個路由，一個是 home，同時它也是根路由，也就是項目啟動后默認進入的頁面。
另一個是 about，它是和 home 同級的路由，渲染的時 ./views/About.vue這個組件。
很好，我們再來看看 app.vue，因為我們要在這里進行頁面布局：
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
這里是不是看到一個很眼熟的東西呢：id="app"，沒錯，這就是入口文件掛載的節點。
進行頁面布局
好了，我們千辛萬苦終於找到了這個文件（這里是為了演示如何去了解一個你並不熟悉的項目，開發中如果有文檔，那么直接查看文檔是最便捷的方式）
接下來我們把樣式都給清理掉，中間無用的代碼也都去掉：
<template>
<div id="app">
<router-view/>
</div>
</template>
清理后的代碼就剩五行了，好了，我們可以開始使用 elementui 中的 Container進行布局了。
在寫代碼之前，再來理一下我們要達到的效果：
- 使用簡約式的布局，只有
Header與Main。
好了，開始吧~
首先在入口文件（main.js）中引入 Elementui組件並注冊
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
router,
render: h => h(App)
}).$mount('#app')
然后就可以在 App.vue中使用 ElementUI 進行頁面布局了：
<template>
<div id="app">
<el-container>
<el-header style="text-align:center;">淺入深出Vue-入門篇</el-header>
<el-main>
<router-view/>
</el-main>
</el-container>
</div>
</template>
這里我們把子路由渲染出來的視圖放在了 el-main中，這樣就可以保證整體的布局還是原樣，只是其中的內容在發生變化（進入不同 url時）。
看看最終的效果：
有點丑，但是沒關系，我們先把布局做出來。子頁面里的內容接下來慢慢替換。
這就是我們的第一個頁面了~