spring boot + Vue + iView前后端分离架构(Mac版) -- 首页布局与实现(三)

spring boot + Vue + iView前后端分离架构(Mac版) – 首页布局与实现(三)

小景哥哥博客

一、首页的布局

在src-->view-->main目录下，创建main.vue文件，内容如下：

<template>
  <div class="layout">
    <Layout>
      <!--  Header 表示头部的位置-->
      <Header>
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-logo">
            <img height="50px" width="50px" src="../../assets/logo.png"/>
          </div>
          <div class="layout-nav">
            <language @on-lang-change="setLanguage" style="margin-right: 10px;" :lang="local"/>
          </div>
          <div class="layout-nav">
            <Submenu name="1">
              <template slot="title">
                <Icon type="ios-paper"/>