更新

src/App.vue

@@ -1,12 +1,33 @@
 <template>
   <div id="app">
-    <router-view />
+    <el-row>
+      <main-layout></main-layout>
+    </el-row>
   </div>
 </template>
+<script>
+import mainLayout from '@/layout/main-layout.vue';
+export default {
+  name: 'app',
+  components: {
+    mainLayout,
+  },
+  data: () => ({}),
+};
+</script>
 
 <style lang="less">
+html {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
 body {
   margin: 0;
   overflow-x: hidden;
 }
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 </style>

src/layout/layout-part/heads.vue

@@ -0,0 +1,34 @@
+<template>
+  <div id="heads">
+    <el-row>
+      <el-col :span="24">
+        头部
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'heads',
+  props: {},
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/layout/layout-part/menus.vue

@@ -0,0 +1,34 @@
+<template>
+  <div id="menus">
+    <el-row>
+      <el-col :span="24">
+        菜单
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'menus',
+  props: {},
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/layout/main-layout.vue

@@ -0,0 +1,62 @@
+<template>
+  <div id="main-layout">
+    <el-row>
+      <el-container class="index">
+        <el-header height="4rem" class="heads">
+          <heads></heads>
+        </el-header>
+        <el-container>
+          <el-aside width="13rem" class="menus">
+            <menus></menus>
+          </el-aside>
+          <el-main class="main">
+            <router-view />
+          </el-main>
+        </el-container>
+      </el-container>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import heads from '@/layout/layout-part/heads.vue';
+import menus from '@/layout/layout-part/menus.vue';
+import { mapActions, mapState } from 'vuex';
+export default {
+  name: 'main-layout',
+  props: {},
+  components: {
+    heads,
+    menus,
+  },
+  data: () => ({
+    loginBei: require('@/assets/beijing.jpg'),
+  }),
+  created() {},
+  computed: {
+    ...mapState(['user']),
+  },
+  methods: {},
+  mounted() {},
+};
+</script>
+
+<style lang="less" scoped>
+.index {
+  background-image: url('../assets/beijing.jpg');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+.heads {
+  border: 1px solid cyan;
+  padding: 0;
+}
+.menus {
+  min-height: 905px;
+  border: 1px solid blue;
+}
+.main {
+  min-height: 905px;
+  border: 1px solid red;
+}
+</style>

src/router/index.js

@@ -12,6 +12,8 @@ const routes = [
 ];
 
 const router = new VueRouter({
+  mode: 'history',
+  base: process.env.NODE_ENV === 'development' ? '' : process.env.VUE_APP_ROUTER,
   routes,
 });
 

src/views/index.vue

@@ -1,6 +1,15 @@
 <template>
   <div id="index">
-    <p>index</p>
+    <el-row>
+      <el-col :span="24">
+        <el-col :span="24" class="top">
+          头部
+        </el-col>
+        <el-col :span="24" class="main">
+          主题
+        </el-col>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -11,7 +20,7 @@ export default {
   props: {},
   components: {},
   data: function() {
-    return {};
+    return { show2: true };
   },
   created() {},
   methods: {},
@@ -27,4 +36,17 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.transition-box {
+  margin-bottom: 10px;
+  width: 200px;
+  height: 100px;
+  border-radius: 4px;
+  background-color: #409eff;
+  text-align: center;
+  color: #fff;
+  padding: 40px 20px;
+  box-sizing: border-box;
+  margin-right: 20px;
+}
+</style>