使用vue-cli 4.0 搭建后台系統（頂部導航和左側導航） 第二集

1.  搭建頁面整體布局 

layout>index.vue

<template>

  <div :class="classObj">

    <!-- 頂部導航 -->

    <div class="navbar-container">

      <NavBar @select="selectMenu" />

    </div>

    <!-- 左側導航 -->

    <div class="sidebar-container">

      <SideBar :path-name="menuActiveName" />

    </div>

    <!-- 內容區域 -->

    <div class="main-container">

      <breadcrumb class="breadcrumb-container" />

      <keep-alive>

        <router-view />

      </keep-alive>

    </div>

  </div>

</template>

 

對應的組件在layout目錄。

2.整個項目需要 

1. vue-router 進行路由控制

2. vux 進行狀態更新

3.node-scss  實現樣式處理

4.nprogress 頂部加載條

5.element-ui 基礎UI庫

6.axios  后期進行數據交互 目前只是前段一些交互，沒有和后台交互。

截圖