隨心DevOps前端之三：使用element-UI構建vuejs通用模板（頂部、左側導航）

02-09

細心的同學看到倉庫名字的時候就猜到了，我要創建一個首頁模板，類似dashboard，這很有用，本文只給出思想，細節比較多，後面給出git倉庫

先將整個頁面分成上下兩個部分，左側導航與右側
然後將右側分為頂部導航和內容兩部分

source 目錄結構盡量清楚，如下：

NavMenu.vue 是左側導航
Container.vue 是右側其他

App.vue包含左右側，組成整個頁面，如下

<template> <div id="app"> ** <NavMenu></NavMenu> ** ** <Container></Container> ** </div></template><script>import NavMenu from ./components/common/NavMenu.vueimport Container from ./components/common/Container.vueexport default { name: app, components: { NavMenu, Container }}</script>

然後 Container.vue 再分為

TopBar.vue

與內容，如下

<template> <div id="container"> ** <TopBar></TopBar> ** <transition> ** <router-view></router-view> ** </transition> </div></template><script>import TopBar from ./TopBar.vueexport default { components: { TopBar }}</script>

routes.js 是路由

export default [ { path: /, component: resolve => require([./pages/home/home.vue], resolve) }]

style.scss 是樣式，它是scss格式的

效果圖

說明：

搞出這個template有什麼意義呢，下篇會詳細介紹如何使用它

本文代碼存在dashboard-template分支：

tmpbook/vue-template-with-element-ui/tree/dashboard-template

clone 下來，改改代碼，跑一跑，可以幫助你更好的理解前端的構建模式

git clone https://github.com/tmpbook/vue-template-with-element-ui.gitcd vue-template-with-element-uinpm installnpm run dev

附：

Element: 一套為開發者、設計師和產品經理準備的基於 Vue 2.0 的組件庫，提供了配套設計資源，幫助你的網站快速成型。

Normalize.css: makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

vue-router: 前端路由，路由的對象是組件。