[fix][V]：拆分aside组件

element-vue/src/components/personalAside.vue

@@ -0,0 +1,54 @@
+<template>
+    <div>
+        <el-row class="tac" style="margin-top: 30px">
+            <el-col :span="24">
+                <el-avatar shape="square" :size="250" fit="cover"
+                           src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-avatar>
+                <br>
+                <el-link type="primary">更换头像（尚未开发）</el-link>
+                <el-menu
+                        style="text-align: left;margin-top: 30px"
+                        default-active="2"
+                        class="el-menu-vertical-demo"
+                        @open="handleOpen"
+                        @close="handleClose">
+                    <el-menu-item index="2" route="message">
+                        <i class="el-icon-user"></i>
+                        <span slot="title">我的个人信息</span>
+                    </el-menu-item>
+                    <el-menu-item index="3" disabled>
+                        <i class="el-icon-document"></i>
+                        <span slot="title">站内信（尚未开发）</span>
+                    </el-menu-item>
+                    <el-menu-item index="4" disabled>
+                        <i class="el-icon-setting"></i>
+                        <span slot="title">系统设置（尚未开发）</span>
+                    </el-menu-item>
+                </el-menu>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script>
+
+    export default {
+        data() {
+            return {}
+        },
+        methods: {
+            handleOpen(key, keyPath) {
+                console.log(key, keyPath);
+            },
+            handleClose(key, keyPath) {
+                console.log(key, keyPath);
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .personal-message {
+        margin: 200px 20% 0 20%;
+    }
+</style>

element-vue/src/pages/teacher/personal.vue

@@ -5,33 +5,7 @@
         </el-container>
         <el-container>
             <el-aside width="300px">
-                <el-row class="tac" style="margin-top: 30px">
+                <personal-aside></personal-aside>
-                    <el-col :span="24">
-                        <el-avatar shape="square" :size="250" fit="cover"
-                                   src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-avatar>
-                        <br>
-                        <el-link type="primary">更换头像（尚未开发）</el-link>
-                        <el-menu
-                                style="text-align: left;margin-top: 30px"
-                                default-active="2"
-                                class="el-menu-vertical-demo"
-                                @open="handleOpen"
-                                @close="handleClose">
-                            <el-menu-item index="2" route="message">
-                                <i class="el-icon-user"></i>
-                                <span slot="title">我的个人信息</span>
-                            </el-menu-item>
-                            <el-menu-item index="3" disabled>
-                                <i class="el-icon-document"></i>
-                                <span slot="title">站内信（尚未开发）</span>
-                            </el-menu-item>
-                            <el-menu-item index="4" disabled>
-                                <i class="el-icon-setting"></i>
-                                <span slot="title">系统设置（尚未开发）</span>
-                            </el-menu-item>
-                        </el-menu>
-                    </el-col>
-                </el-row>
             </el-aside>
             <el-main>
                 <personal-message></personal-message>
@@ -43,9 +17,10 @@
 <script>
     import navBar from "~/components/teacher/navBar";
     import personalMessage from "~/components/personalMessage";
+    import personalAside from "~/components/personalAside";
 
     export default {
-        components: {personalMessage,navBar},
+        components: {personalMessage,navBar, personalAside},
         methods: {
             handleOpen(key, keyPath) {
                 console.log(key, keyPath);