提交 4/10

package-lock.json

@@ -4834,7 +4834,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4855,12 +4856,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4875,17 +4878,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5002,7 +5008,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5014,6 +5021,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5028,6 +5036,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5035,12 +5044,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -5059,6 +5070,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5139,7 +5151,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5151,6 +5164,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5236,7 +5250,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5272,6 +5287,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5291,6 +5307,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5334,12 +5351,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },

src/App.vue

@@ -7,15 +7,14 @@
 <script>
 export default {
   name: "app",
-  components: {}
+  components: {},
 };
 </script>
 
 <style lang="scss">
+html,
+body,
 #app {
   height: 100%;
-  > div {
-    height: 100%;
-  }
 }
 </style>

src/components/HelloWorld.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

src/components/MyBox.vue

@@ -0,0 +1,156 @@
+<template>
+  <div id="app">
+    <div>我是没有mybox 组件</div>
+    <my-table>
+      <template slot="header" slot-scope="scope">
+          <h2>{{scope.row}}</h2>
+          <div>兄弟</div>
+      </template>
+    </my-table>
+    <!-- 默认的插槽 为了是给父组件能在里面写自定义html模板 -->
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MyBox",
+  props: {
+    msg: {
+      type: String,
+      default: "哈哈",
+    },
+    propE: {
+      type: Object,
+      default() {
+        return { message: "hello" };
+      },
+    },
+  },
+  data() {
+    var checkAge = (rule, value, callback) => {
+      if (!value) {
+        return callback(new Error("年龄不能为空"));
+      }
+      setTimeout(() => {
+        if (!Number.isInteger(value)) {
+          callback(new Error("请输入数字值"));
+        } else {
+          if (value < 18) {
+            callback(new Error("必须年满18岁"));
+          } else {
+            callback();
+          }
+        }
+      }, 1000);
+    };
+    var validatePass = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请输入密码"));
+      } else {
+        if (this.loginForm.checkPass !== "") {
+          this.$refs.loginForm.validateField("checkPass");
+        }
+        callback();
+      }
+    };
+    var validatePass2 = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请再次输入密码"));
+      } else if (value !== this.loginForm.password) {
+        callback(new Error("两次输入密码不一致!"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      msgssss: "我是新的",
+      loginForm: {
+        password: "",
+        checkPass: "",
+        age: null,
+      },
+      rules: {
+        password: [{ validator: validatePass, trigger: "blur" }],
+        checkPass: [{ validator: validatePass2, trigger: "blur" }],
+        age: [{ validator: checkAge, trigger: "blur" }],
+      },
+      lllll: "llll",
+      obj: {
+        username: "张三",
+        age: 50,
+      },
+      watchlll: "watch111",
+      items: [
+        { message: "one", id: "1" },
+        { message: "two", id: "2" },
+        { message: "three", id: "3" },
+      ],
+    };
+  },
+  methods: {
+    login() {
+      console.log(this.msgssss);
+    },
+    hhhh() {
+      console.log("5545");
+    },
+
+    hadleClick() {
+      this.lllll = "22222";
+      // this.obj.username = '李四'
+      // this.$set(this.obj,1,'李四')
+      console.log(this.obj.username);
+    },
+
+    hadleClick2() {
+      this.lllll = "222333333322";
+      // this.obj.username = '李四'
+      // this.$set(this.obj,1,'李四')
+      console.log(this.obj.username);
+    },
+  },
+  watch: {
+    lllll: {
+      handler(newValue, oldValue) {
+        console.log(newValue, "改变手的值");
+        console.log(oldValue, "原始值");
+        if (newValue) this.watchlll = "watch222";
+      },
+      immediate: false,
+    },
+
+    "obj.username": {
+      handler(newValue, oldValue) {
+        console.log(newValue, "改变手的值");
+        console.log(oldValue, "原始值");
+        if (newValue) this.watchlll = "watch222";
+      },
+      immediate: false,
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+#app {
+  .login {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 400px;
+    height: 400px;
+    border: 1px saddlebrown solid;
+    .conte {
+      margin-top: 50px;
+      margin-left: 50px;
+    }
+  }
+
+  .form {
+    padding: 20px 20px 0 0;
+  }
+}
+</style>

src/components/MyTable.vue

@@ -0,0 +1,153 @@
+<template>
+  <div id="app">
+    <div>我是没有mytable 组件</div>
+    <p>{{firstParent}}</p>
+    <slot name="header" :row="watchlll"> 我是默认的头部啊 </slot>
+    <slot></slot>
+    <slot name="footer"></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MyTable",
+  inject:['firstParent'],
+  props: {
+    msg: {
+      type: String,
+      default: "哈哈",
+    },
+    propE: {
+      type: Object,
+      default() {
+        return { message: "hello" };
+      },
+    },
+  },
+  data() {
+    var checkAge = (rule, value, callback) => {
+      if (!value) {
+        return callback(new Error("年龄不能为空"));
+      }
+      setTimeout(() => {
+        if (!Number.isInteger(value)) {
+          callback(new Error("请输入数字值"));
+        } else {
+          if (value < 18) {
+            callback(new Error("必须年满18岁"));
+          } else {
+            callback();
+          }
+        }
+      }, 1000);
+    };
+    var validatePass = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请输入密码"));
+      } else {
+        if (this.loginForm.checkPass !== "") {
+          this.$refs.loginForm.validateField("checkPass");
+        }
+        callback();
+      }
+    };
+    var validatePass2 = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请再次输入密码"));
+      } else if (value !== this.loginForm.password) {
+        callback(new Error("两次输入密码不一致!"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      msgssss: "我是新的",
+      loginForm: {
+        password: "",
+        checkPass: "",
+        age: null,
+      },
+      rules: {
+        password: [{ validator: validatePass, trigger: "blur" }],
+        checkPass: [{ validator: validatePass2, trigger: "blur" }],
+        age: [{ validator: checkAge, trigger: "blur" }],
+      },
+      lllll: "llll",
+      obj: {
+        username: "张三",
+        age: 50,
+      },
+      watchlll: "watch111",
+      items: [
+        { message: "one", id: "1" },
+        { message: "two", id: "2" },
+        { message: "three", id: "3" },
+      ],
+    };
+  },
+  methods: {
+    login() {
+      console.log(this.msgssss);
+    },
+    hhhh() {
+      console.log("5545");
+    },
+
+    hadleClick() {
+      this.lllll = "22222";
+      // this.obj.username = '李四'
+      // this.$set(this.obj,1,'李四')
+      console.log(this.obj.username);
+    },
+
+    hadleClick2() {
+      this.lllll = "222333333322";
+      // this.obj.username = '李四'
+      // this.$set(this.obj,1,'李四')
+      console.log(this.obj.username);
+    },
+  },
+  watch: {
+    lllll: {
+      handler(newValue, oldValue) {
+        console.log(newValue, "改变手的值");
+        console.log(oldValue, "原始值");
+        if (newValue) this.watchlll = "watch222";
+      },
+      immediate: false,
+    },
+
+    "obj.username": {
+      handler(newValue, oldValue) {
+        console.log(newValue, "改变手的值");
+        console.log(oldValue, "原始值");
+        if (newValue) this.watchlll = "watch222";
+      },
+      immediate: false,
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+#app {
+  .login {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 400px;
+    height: 400px;
+    border: 1px saddlebrown solid;
+    .conte {
+      margin-top: 50px;
+      margin-left: 50px;
+    }
+  }
+
+  .form {
+    padding: 20px 20px 0 0;
+  }
+}
+</style>

src/components/dynamicmenu/DynamicMenu.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="menu-container">
+        <template v-for="v in menuList">
+            <el-submenu :index="v.name" v-if="v.children&&v.children.length>0" :key="v.name">
+                <template slot="title">
+                    <i class="iconfont" :class="v.meta.icon"></i>
+                    <span>{{v.meta.name}}</span>
+                </template>
+                <el-menu-item-group>
+                    <DynamicMenu :menuList="v.children"></DynamicMenu>
+                </el-menu-item-group>
+            </el-submenu>
+            <el-menu-item :key="v.name" :index="v.name" @click="gotoRoute(v.name)" v-else>
+                <i class="iconfont" :class="v.meta.icon"></i>
+                <span slot="title">{{v.meta.name}}</span>
+            </el-menu-item>
+        </template>
+    </div>
+</template>
+<script>
+export default {
+    name: 'DynamicMenu',
+    props: {
+        menuList: {
+            type: Array,
+            default: function() {
+                return []
+            }
+        }
+    },
+    methods: {
+        gotoRoute(name) {
+            this.$router.push({ name }) // push(path)  push({name:''})
+        }
+    },
+    mounted(){
+    
+    }
+    
+}
+</script>

src/components/index.js

@@ -0,0 +1,10 @@
+import Vue from 'vue'
+// import MyBox from '../components/MyBox'
+// import HelloWorld from '../components/HelloWorld'
+
+Vue.component('MyBox', () => import('../components/MyBox'));
+Vue.component('HelloWorld', () => import('../components/HelloWorld'));
+Vue.component('MyTable', () => import('../components/MyTable'));
+Vue.component('MyForm', () => import('@c/myform/MyForm.vue'))
+Vue.component('DynamicMenu', () => import('@c/dynamicmenu/DynamicMenu.vue'))
+

src/components/myform/MyForm.vue

@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <el-form
+      ref="formData"
+      :model="formValue"
+      label-width="80px"
+      :label-position="labelPosition"
+      class="form-box"
+      :rules="rules"
+    >
+      <div v-for="(item, index) in formList" :key="index">
+        <el-form-item
+          v-if="item.type === 'input'"
+          :label="item.label"
+          :prop="item.prop"
+        >
+          <el-input
+            v-model="formValue[item.prop]"
+            :style="{ width: `${item.width}` }"
+            :placeholder="item.placeholder"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item
+          v-if="item.type === 'select'"
+          :label="item.label"
+          :prop="item.prop"
+        >
+          <el-select
+            v-model="formValue[item.prop]"
+            :placeholder="item.placeholder"
+          >
+            <el-option
+              v-for="(item1, index1) in item.child"
+              :key="index1"
+              :label="item1.label"
+              :value="item1.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </div>
+      <slot name="handle" :formData="formValue">
+        <el-button type="primary" @click="submitForm">提交</el-button>
+      </slot>
+    </el-form>
+  </div>
+</template>
+<script>
+export default {
+  name: "my-form",
+  props: {
+    formList: {
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
+
+    formValue: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+    rules: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+
+    labelPosition: {
+      type: String,
+      default: function () {
+        return "right";
+      },
+    },
+  },
+  data() {
+    return {
+      form: {
+        name: "",
+        region: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        desc: "",
+      },
+    };
+  },
+  methods: {
+    submitForm() {
+      this.$refs.formData.validate((valid) => {
+        if (valid) {
+          this.$emit("submitForm", this.formValue);
+        } else {
+          return false;
+        }
+      });
+    },
+  },
+
+  mounted() {
+    console.log(this.formList, "sss");
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.form-box {
+  margin-top: 30px;
+}
+
+::v-deep .el-button {
+  font-size: 10px;
+  float: right;
+  margin-right: 50px;
+}
+</style>

src/main.js

@@ -6,6 +6,8 @@ import store from './store'
 import './plugins/element.js'
 import "./router/permission"
 import "./assets/css/index.scss"
+import './components/index.js'
+
 
 Vue.config.productionTip = false
 

src/pages/home/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        Home首页
+        Home首页111
     </div>
 </template>
 

src/pages/layout/component/main-content/content.vue

@@ -1,15 +1,16 @@
 <template>
+  <el-card>
     <router-view class="content"></router-view>
+  </el-card>
 </template>
 
 <script>
 export default {
-    data() {
-        return {}
-    }
-}
+  data() {
+    return {};
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-
 </style>

src/pages/layout/component/main-content/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="main-container">
+    <div >
         <TopAside/>
         <Content/>
     </div>

src/pages/layout/component/main-content/top-aside.vue

@@ -1,12 +1,35 @@
 <template>
-    <aside class="aside__top">
-        <!-- <span
+  <div class="box">
+    <el-row :gutter="20">
+      <el-col :span="17"><span>张三</span></el-col>
+      <el-col :span="7">
+        <el-row justify="end" type="flex" align="middle">
+          <span>张三</span>
+          <el-dropdown trigger="click" placement="top">
+            <span class="el-dropdown-link">
+              <i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>个人中心</el-dropdown-item>
+              <el-dropdown-item>修改密码</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <div class="shu"></div>
+          <el-button type="primary" @click="loginOut" size="mini"
+            >退出</el-button
+          >
+        </el-row>
+      </el-col>
+    </el-row>
+
+    <!-- <span
             class="iconfont icon-nav toggleNavCollapse"
             :class="{active:isSidebarNavCollapse}"
             @click="toggleNavCollapse"
         >
         </span> -->
-        <div class="aside__top--right">
+
+    <!-- <div class="aside__top--right">
             <div class="email">
                 <span class="iconfont icon-email"><i>40</i></span>
             </div>
@@ -25,147 +48,158 @@
             <div class="quit-system" @click="loginOut">
                 <span class="iconfont icon-quit"></span>
             </div>
-        </div>
-    </aside>
+        </div> -->
+  </div>
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapMutations } from "vuex";
 
 export default {
-    data() {
-        return {}
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(["isSidebarNavCollapse"]),
+  },
+  methods: {
+    ...mapMutations(["LOGIN_OUT"]),
+    toggleNavCollapse() {
+      this.$store.commit("toggleNavCollapse");
     },
-    computed: {
-        ...mapState(['isSidebarNavCollapse'])
+    loginOut() {
+      this.LOGIN_OUT();
+      /* 防止切换角色时addRoutes重复添加路由导致出现警告 */
+      window.location.reload();
     },
-    methods: {
-        toggleNavCollapse() {
-            this.$store.commit('toggleNavCollapse')
-        },
-        loginOut() {
-            this.$store.commit('LOGIN_OUT')
-            /* 防止切换角色时addRoutes重复添加路由导致出现警告 */
-            window.location.reload()
-        }
-    }
-}
+  },
+};
 </script>
 
 <style lang="scss" scoped>
+.box {
+  margin-bottom: 2%;
+  .shu {
+    display: inline-block;
+    margin: 0 5%;
+    border-left: 1px solid black;
+    height: 20px;
+  }
+}
+
 .aside__top {
-    border-bottom: 1px solid #e5e5e5;
-    height: 50px;
-    line-height: 50px;
-    position: fixed;
-    left: 200px;
-    top: 0;
-    right: 0;
-    background: #fff;
-    z-index: 1000;
-    transition: left 0.25s;
-    .toggleNavCollapse {
-        display: inline-block;
-        margin-left: 8px;
-        padding: 0 10px;
-        font-size: 26px;
-        vertical-align: middle;
-        color: #333;
-        cursor: pointer;
-        transition: all 0.5s;
-        &.active {
-            transform: rotate(90deg);
-        }
+  border-bottom: 1px solid #e5e5e5;
+  height: 50px;
+  line-height: 50px;
+  position: fixed;
+  left: 200px;
+  top: 0;
+  right: 0;
+  background: #fff;
+  z-index: 1000;
+  transition: left 0.25s;
+  .toggleNavCollapse {
+    display: inline-block;
+    margin-left: 8px;
+    padding: 0 10px;
+    font-size: 26px;
+    vertical-align: middle;
+    color: #333;
+    cursor: pointer;
+    transition: all 0.5s;
+    &.active {
+      transform: rotate(90deg);
     }
+  }
 
-    .aside__top--right {
+  .aside__top--right {
+    position: absolute;
+    right: 10px;
+    top: -1px;
+    bottom: 0px;
+    > div {
+      position: relative;
+      display: inline-block;
+      text-align: center;
+      vertical-align: middle;
+      margin-left: 10px;
+      padding: 0 15px;
+      cursor: pointer;
+      &:hover::after {
+        transform-origin: 0 0;
+        transform: scaleX(1);
+      }
+      &:first-child:before {
+        border: none;
+      }
+      &::after {
+        content: "";
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: 2px;
+        background: #ef4747;
+        transform: scaleX(0);
+        transform-origin: right 0;
+        transition: transform 0.5s;
+      }
+      &::before {
+        content: "";
         position: absolute;
-        right: 10px;
-        top: -1px;
-        bottom: 0px;
-        > div {
-            position: relative;
-            display: inline-block;
-            text-align: center;
-            vertical-align: middle;
-            margin-left: 10px;
-            padding: 0 15px;
-            cursor: pointer;
-            &:hover::after {
-                transform-origin: 0 0;
-                transform: scaleX(1);
-            }
-            &:first-child:before {
-                border: none;
-            }
-            &::after {
-                content: '';
-                position: absolute;
-                left: 0;
-                bottom: 0;
-                width: 100%;
-                height: 2px;
-                background: #ef4747;
-                transform: scaleX(0);
-                transform-origin: right 0;
-                transition: transform 0.5s;
-            }
-            &::before {
-                content: '';
-                position: absolute;
-                height: 20px;
-                top: 50%;
-                left: -8px;
-                margin-top: -10px;
-                border-left: 1px solid #ccc;
-            }
-            &.email {
-                i {
-                    position: absolute;
-                    left: 18px;
-                    top: -12px;
-                    border-radius: 20px;
-                    background: red;
-                    color: #fff;
-                    text-align: center;
-                    font-size: 12px;
-                    line-height: 1.5;
-                    min-width: 20px;
-                    min-height: 20px;
-                }
-            }
-            &.user-msg {
-                .user-img {
-                    width: 34px;
-                    height: 34px;
-                    border-radius: 50%;
-                    vertical-align: middle;
-                }
-                .user-name {
-                    color: #758eb5;
-                    padding: 0 4px;
-                }
-            }
-            .iconfont {
-                position: relative;
-                font-size: 24px;
-                color: #758eb5;
-            }
+        height: 20px;
+        top: 50%;
+        left: -8px;
+        margin-top: -10px;
+        border-left: 1px solid #ccc;
+      }
+      &.email {
+        i {
+          position: absolute;
+          left: 18px;
+          top: -12px;
+          border-radius: 20px;
+          background: red;
+          color: #fff;
+          text-align: center;
+          font-size: 12px;
+          line-height: 1.5;
+          min-width: 20px;
+          min-height: 20px;
         }
+      }
+      &.user-msg {
+        .user-img {
+          width: 34px;
+          height: 34px;
+          border-radius: 50%;
+          vertical-align: middle;
+        }
+        .user-name {
+          color: #758eb5;
+          padding: 0 4px;
+        }
+      }
+      .iconfont {
+        position: relative;
+        font-size: 24px;
+        color: #758eb5;
+      }
     }
+  }
 }
 .breadcrumb-enter,
 .breadcrumb-leave-active {
-    opacity: 0;
-    transform: translateX(20px);
+  opacity: 0;
+  transform: translateX(20px);
 }
 
 .breadcrumb-enter-active,
 .breadcrumb-leave-active {
-    transition: all 0.6s;
+  transition: all 0.6s;
 }
 
 .breadcrumb-leave-active {
-    position: absolute;
+  position: absolute;
 }
 </style>

src/pages/layout/index.vue

@@ -1,28 +1,45 @@
 <template>
-    <div :class="{navCollapsed:isSidebarNavCollapse}">
-        <sidebarNav  class="sidebar"/>
-        <mainContent/>
-    </div>
+  <el-container class="home_container">
+    <!-- <div :class="{ navCollapsed: isSidebarNavCollapse }">
+            </div> -->
+    <el-aside width="200px">
+      <sidebarNav></sidebarNav>
+    </el-aside>
+    <el-main>
+      <mainContent></mainContent>
+    </el-main>
+  </el-container>
+
+  <!--
+        <mainContent/> -->
 </template>
 
 <script>
-import sidebarNav from './component/sidebar-nav'
-import mainContent from './component/main-content/index'
-import { mapState } from 'vuex'
+import sidebarNav from "./component/sidebar-nav";
+import mainContent from "./component/main-content/index";
+import { mapState } from "vuex";
 export default {
-    data() {
-        return {}
-    },
-    computed: {
-        ...mapState(['isSidebarNavCollapse'])
-    },
-    components: {
-        sidebarNav,
-        mainContent
-    }
-}
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(["isSidebarNavCollapse"]),
+  },
+  components: {
+    sidebarNav,
+    mainContent,
+  },
+};
 </script>
 
 <style lang="scss" scoped>
+.home_container {
+  height: 100%;
+  margin: 0px;
+  padding: 0px;
+}
 
+.el-aside {
+  background: #304156;
+}
 </style>

src/pages/login/index.vue

@@ -1,122 +1,63 @@
 <template>
   <div class="clearfix" id="login_wrap">
-    <h2 class="title">登录页</h2>
-    <div id="login">
-      <div class="login--account">
-        <span>账号：</span>
-        <input type="text" placeholder="随便输" name="account" v-model.trim="account" />
-      </div>
-      <div class="login--password">
-        <span>密码：</span>
-        <input
-          type="password"
-          placeholder="随便输"
-          name="password"
-          v-model.trim="password"
-          @keyup.enter="login"
-        />
-      </div>
-      <p class="login--btn">
-        <button id="loginBtn" @click="login">登录</button>
-      </p>
+    <div class="login">
+      <h2 class="title">登录页</h2>
+      <my-form class="content" :formList="formList" :formValue="formValue">
+        <template slot="handle" slot-scope="scope">
+          <el-button type="primary" @click="login(scope.formData)"
+            >登录</el-button
+          >
+        </template>
+      </my-form>
     </div>
   </div>
 </template>
 
 <script>
-
-import { login } from "../../api"
-
+import { login } from "../../api";
 export default {
   data() {
     return {
-      account: "",
-      password: ""
+      formList: [
+        { type: "input", prop: "account", label: "姓名", width: "280px" },
+        { type: "input", prop: "password", label: "密码", width: "280px" },
+      ],
+      formValue: {
+        account: "",
+        password: "",
+      },
     };
   },
   methods: {
     async login() {
-        // 网络请求
-        let data = await login(this.account);
-        let token = data.token;
-        // 本地  vuex
-        this.$store.commit('LOGIN_IN',token);
-        this.$router.replace("/")
-    }
+      // 网络请求
+      let data = await login(this.formValue);
+      let token = data.token;
+      // 本地  vuex
+      this.$store.commit("LOGIN_IN", token);
+      this.$router.replace("/");
+    },
   },
-  mounted() {}
+  mounted() {},
 };
 </script>
 <style scoped lang="scss">
-.title {
-  text-align: center;
-  font-size: 22px;
-  padding-top: 100px;
-}
-#login_wrap {
-  position: relative;
-  background: rgba(64, 64, 194, 0.1);
-  > div {
-    background: #fff;
-    width: 479px;
-    height: 325px;
-    padding: 30px 40px;
+#app {
+  .login {
     position: absolute;
-    top: 40%;
     left: 50%;
+    top: 50%;
     transform: translate(-50%, -50%);
-    > div {
-      padding: 10px 0;
-      border-bottom: 1px solid #ddd;
-      &.login--account {
-        margin: 25px 0 30px;
-      }
-      span {
-        color: #666;
-        display: inline-block;
-        width: 84px;
-        font-size: 20px;
-      }
-      input {
-        background: none;
-        font-size: 16px;
-        border: none;
-        height: 30px;
-        width: 280px;
-        padding-left: 12px;
-        box-sizing: border-box;
-        color: #666;
-        &.error {
-          border: 1px solid #f00;
-        }
-        &::-webkit-input-placeholder {
-          color: #aaa;
-        }
-      }
+    width: 400px;
+    height: 400px;
+    border: 1px saddlebrown solid;
+    .content {
+      margin-top: 20%;
     }
+  }
 
-    p {
-      text-align: right;
-      &.login--btn {
-        button {
-          width: 100%;
-          height: 50px;
-          font-size: 18px;
-          background: #0f6171;
-          border: none;
-          margin-top: 30px;
-          color: #fff;
-          border-radius: 6px;
-          cursor: pointer;
-        }
-      }
-      a {
-        color: #fff;
-        display: inline-block;
-        padding: 0 15px;
-        font-size: 14px;
-      }
-    }
+  .form {
+    padding: 20px 20px 0 0;
   }
 }
 </style>

src/router/permission.js

@@ -2,7 +2,8 @@ import router from "./index"
 import store from "../store/index"
 
 router.beforeEach((to,from,next) =>{
-    if(!store.state.UserToken){
+    console.log();
+    if(!store.state.user.token){
         // 未登录  页面是否需要登录
         if(to.matched.length > 0 && !to.matched.some(record => record.meta.requiresAuth)){
             next();
@@ -13,6 +14,7 @@ router.beforeEach((to,from,next) =>{
         }
     }else{
         // 用户已经登录  路由的访问权限
+        console.log("八十");
         if(!store.state.permission.permissionList){
             store.dispatch("permission/FETCH_PERMISSION").then(() =>{
                 next({

src/store/index.js

@@ -1,13 +1,32 @@
+// import Vue from 'vue'
+// import Vuex from 'vuex'
+// import state from "./defaultState"
+// import mutations from "./mutations"
+// import modules from "./modules"
+
+// Vue.use(Vuex)
+
+// export default new Vuex.Store({
+//     state,
+//     mutations,
+//     modules
+// })
+
+
 import Vue from 'vue'
 import Vuex from 'vuex'
-import state from "./defaultState"
-import mutations from "./mutations"
-import modules from "./modules"
+import user from './modules/user'
+import permission from './modules/permission'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-    state,
-    mutations,
-    modules
+
+  modules: {
+    user,
+    permission
+  }
+
+
+
 })

src/store/modules/permission.js

@@ -28,12 +28,12 @@ export default {
     // 异步访问
     actions:{
         async FETCH_PERMISSION({ commit,state }){
-            let permissionList = await fetchPermission();
+            //let permissionList = await fetchPermission();
             // 筛选
-            let routes = recursionRouter(permissionList,dynamicRouter);
+            //let routes = recursionRouter(permissionList,dynamicRouter);
             let MainContainer = DynamicRoutes.find(v => v.path === "");
             let children = MainContainer.children;
-            children.push(...routes)
+            children.push(...dynamicRouter)
 
             // 生成菜单
             commit("SET_MENU",children);

src/store/modules/user.js

@@ -0,0 +1,34 @@
+
+import sessionTool from '@/utils/sessionTool'
+
+const state = {
+  //设置属性 用来存储数据
+  token: ''
+}
+
+const getters = {
+  token: state => state.token
+}
+
+const mutations = {
+  LOGIN_IN(state, data) {
+    sessionTool.set('token', data)
+    state.token = data;
+  },
+  LOGIN_OUT(state, data) {
+    sessionTool.clearAll();
+    state.token = '';
+  }
+}
+
+const actions = {
+
+}
+
+export default {
+  state,
+  getters,
+  mutations,
+  actions
+}
+

src/utils/sessionTool.js

@@ -0,0 +1,24 @@
+export default {
+    //往缓存保存数据   注意 存储的如果是null 或者undefid 会存这些的字符形式  只能存字符
+    set(key, value) {
+        window.sessionStorage.setItem(key, JSON.stringify(value));
+    },
+    //根据key清除值
+    clear(key) {
+        window.sessionStorage.removeItem(key);
+    },
+    clearAll() {
+        window.sessionStorage.clear();
+
+    },
+    //根据key读取缓存数据
+    get(key) {
+        let parse = null;
+        try {
+            parse = JSON.parse(window.sessionStorage.getItem(key));
+        } catch (e) {
+            parse = null;
+        }
+        return parse;
+    }
+}

vue.config.js

@@ -1,4 +1,20 @@
+const path = require('path')
+
+function resolve(dir) {
+    return path.join(__dirname, dir)
+}
+
 module.exports = {
+
+    lintOnSave: true,
+    chainWebpack: (config) => {
+        config.resolve.alias
+            .set('@', resolve('src'))
+            .set('base', resolve('src/base'))
+            .set('views', resolve('src/views'))
+            .set('common', resolve('src/common'))
+            .set('@c', resolve('src/components'))
+    },
     devServer: {
         proxy: {
             '/api': {