🚀 项目基础框架done

.env.development

@@ -1,4 +1,4 @@
 NODE_ENV=development
 # Base api
-VUE_APP_BASE_API = '/dev-api'
+VUE_APP_BASE_API = 'https://vue-typescript-admin-mock-server.armour.now.sh/mock-api/v1/'
 VUE_APP_DEV=true

.eslintrc.js

@@ -1,15 +1,18 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    browser: true,
+    node: true,
+    es6: true
   },
   extends: ["plugin:vue/essential", "@vue/prettier", "@vue/typescript"],
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
   },
   parserOptions: {
-    parser: "@typescript-eslint/parser"
+    parser: "@typescript-eslint/parser",
+    sourceType: "module"
   },
   overrides: [
     {

package.json

@@ -49,6 +49,8 @@
     "less": "^3.0.4",
     "less-loader": "^5.0.0",
     "prettier": "^1.18.2",
+    "sass": "^1.22.12",
+    "sass-loader": "^8.0.0",
     "style-resources-loader": "^1.2.1",
     "typescript": "^3.4.3",
     "vue-cli-plugin-element": "^1.0.1",

src/App.vue

@@ -1,63 +1,14 @@
+
 <template>
   <div id="app">
-    <!-- <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>-->
-    <el-container>
-      <el-aside width="200px">
-        <Nav />
-      </el-aside>
-      <el-container>
-        <el-header>Header</el-header>
-        <el-main>
-          <router-view />
-        </el-main>
-        <el-footer>Footer</el-footer>
-      </el-container>
-    </el-container>
+    <router-view />
   </div>
 </template>
-<script lang="ts">
-import { Vue, Watch } from "vue-property-decorator";
-import Component from "vue-class-component";
-import { Route } from "vue-router";
-import Nav from "@/components/Nav.vue";
 
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
 @Component({
-  components: {
-    Nav
-  }
+  name: "App"
 })
-export default class App extends Vue {}
+export default class extends Vue {}
 </script>
-<style lang="less">
-#app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-.el-header,
-.el-footer {
-  // background-color: #b3c0d1;
-  color: #333;
-  text-align: center;
-  line-height: 60px;
-}
-
-.el-aside {
-  // background-color: #d3dce6;
-  color: #333;
-  text-align: center;
-  line-height: 200px;
-}
-
-.el-main {
-  background-color: #e9eef3;
-  color: #333;
-  text-align: center;
-  // line-height: 160px;
-}
-</style>

src/layout/components/AppMain.vue

@@ -0,0 +1,22 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <router-view />
+    </transition>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+
+@Component({
+  name: "AppMain"
+})
+export default class extends Vue {}
+</script>
+
+<style lang="scss" scoped>
+.app-main {
+  overflow: hidden;
+}
+</style>

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,12 +1,97 @@
-<template></template>
+<template>
+  <div
+    v-if="!item.meta || !item.meta.hidden"
+    :class="['menu-wrapper', isCollapse ? 'simple-mode' : 'full-mode', {'first-level': isFirstLevel}]"
+  >
+    <template v-if="theOnlyOneChild && !theOnlyOneChild.children">
+      <sidebar-item-link v-if="theOnlyOneChild.meta" :to="resolvePath(theOnlyOneChild.path)">
+        <el-menu-item
+          :index="resolvePath(theOnlyOneChild.path)"
+          :class="{'submenu-title-noDropdown': isFirstLevel}"
+        >
+          <svg-icon v-if="theOnlyOneChild.meta.icon" :name="theOnlyOneChild.meta.icon" />
+          <span v-if="theOnlyOneChild.meta.title" slot="title">{{ theOnlyOneChild.meta.title }}</span>
+        </el-menu-item>
+      </sidebar-item-link>
+    </template>
+    <el-submenu v-else :index="resolvePath(item.path)" popper-append-to-body>
+      <template slot="title">
+        <svg-icon v-if="item.meta && item.meta.icon" :name="item.meta.icon" />
+        <span v-if="item.meta && item.meta.title" slot="title">{{ item.meta.title }}</span>
+      </template>
+      <template v-if="item.children">
+        <sidebar-item
+          v-for="child in item.children"
+          :key="child.path"
+          :item="child"
+          :is-collapse="isCollapse"
+          :is-first-level="false"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu"
+        />
+      </template>
+    </el-submenu>
+  </div>
+</template>
 
 <script lang="ts">
 import path from "path";
 import { Component, Prop, Vue } from "vue-property-decorator";
 import { Route, RouteConfig } from "vue-router";
 import { isExternal } from "@/utils/validate";
 import SidebarItemLink from "./SidebarItemLink.vue";
-export default Vue.extend({});
+
+@Component({
+  name: "SidebarItem",
+  components: {
+    SidebarItemLink
+  }
+})
+export default class extends Vue {
+  @Prop({ required: true }) private item!: RouteConfig;
+  @Prop({ default: false }) private isCollapse!: boolean;
+  @Prop({ default: true }) private isFirstLevel!: boolean;
+  @Prop({ default: "" }) private basePath!: string;
+
+  get showingChildNumber() {
+    if (this.item.children) {
+      const showingChildren = this.item.children.filter(item => {
+        if (item.meta && item.meta.hidden) {
+          return false;
+        } else {
+          return true;
+        }
+      });
+      return showingChildren.length;
+    }
+    return 0;
+  }
+
+  get theOnlyOneChild() {
+    if (this.showingChildNumber > 1) {
+      return null;
+    }
+    if (this.item.children) {
+      for (let child of this.item.children) {
+        if (!child.meta || !child.meta.hidden) {
+          return child;
+        }
+      }
+    }
+
+    return { ...this.item, path: "" };
+  }
+
+  private resolvePath(routePath: string) {
+    if (isExternal(routePath)) {
+      return routePath;
+    }
+    if (isExternal(this.basePath)) {
+      return this.basePath;
+    }
+    return path.resolve(this.basePath, routePath);
+  }
+}
 </script>
 <style lang="scss">
 .el-submenu.is-active > .el-submenu__title {
@@ -55,3 +140,16 @@ export default Vue.extend({});
 }
 </style>    
 
+<style lang="scss" scoped>
+.svg-icon {
+  margin-right: 16px;
+}
+
+.simple-mode {
+  .svg-icon {
+    margin-left: 20px;
+  }
+}
+</style>
+
+