🎨 项目结构调整

babel.config.js

@@ -1,12 +1,12 @@
 module.exports = {
-  presets: ["@vue/app"],
-  plugins: [
-    [
-      "component",
-      {
-        libraryName: "element-ui",
-        styleLibraryName: "theme-chalk"
-      }
-    ]
-  ]
+  presets: ["@vue/app"]
+  // plugins: [
+  //   [
+  //     "component",
+  //     {
+  //       libraryName: "element-ui",
+  //       styleLibraryName: "theme-chalk"
+  //     }
+  //   ]
+  // ]
 };

src/api/articles.ts

@@ -0,0 +1,3 @@
+import { getData, postData } from "@/utils/request";
+
+export const getArticles = (data: any) => getData("/articles", data);

src/api/users.ts

@@ -0,0 +1,7 @@
+import { getData, postData } from "@/utils/request";
+
+export const getUserInfo = (data: any) => postData("/users/info", data);
+
+export const login = (data: any) => postData("/users/login", data);
+
+export const logout = () => postData("/users/logout");

src/components/Breadcrumb/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
+        <span
+          v-if="item.redirect === 'noredirect' || index === breadcrumbs.length-1"
+          class="no-redirect"
+        >{{ item.meta.title }}</span>
+        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<script lang="ts">
+import pathToRegexp from "path-to-regexp";
+import { Component, Vue, Watch } from "vue-property-decorator";
+import { RouteRecord, Route } from "vue-router";
+@Component({
+  name: "Breadcrumb"
+})
+export default class extends Vue {
+  private breadcrumbs: RouteRecord[] = [];
+  @Watch("$route")
+  private onRouteChange(route: Route) {
+    // if you go to the redirect page, do not update the breadcrumbs
+    if (route.path.startsWith("/redirect/")) {
+      return;
+    }
+    this.getBreadcrumb();
+  }
+  created() {
+    this.getBreadcrumb();
+  }
+  private getBreadcrumb() {
+    let matched = this.$route.matched.filter(
+      item => item.meta && item.meta.title
+    );
+    const first = matched[0];
+    if (!this.isDashboard(first)) {
+      matched = [
+        { path: "/dashboard", meta: { title: "Dashboard" } } as RouteRecord
+      ].concat(matched);
+    }
+    this.breadcrumbs = matched.filter(item => {
+      return item.meta && item.meta.title && item.meta.breadcrumb !== false;
+    });
+  }
+  private isDashboard(route: RouteRecord) {
+    const name = route && route.meta && route.meta.title;
+    return name === "Dashboard";
+  }
+  private pathCompile(path: string) {
+    // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
+    const { params } = this.$route;
+    const toPath = pathToRegexp.compile(path);
+    return toPath(params);
+  }
+  private handleLink(item: any) {
+    const { redirect, path } = item;
+    if (redirect) {
+      this.$router.push(redirect);
+      return;
+    }
+    this.$router.push(this.pathCompile(path));
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+.app-breadcrumb.el-breadcrumb {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 50px;
+  margin-left: 8px;
+  .no-redirect {
+    color: #97a8be;
+    cursor: text;
+  }
+}
+</style>

src/components/Hamburger/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <div :class="[{'is-active': isActive}]" @click="toggleClick">
+    <svg-icon name="hamburger" width="20" height="20" />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+@Component({
+  name: "Hamburger"
+})
+export default class extends Vue {
+  @Prop({ default: false }) private isActive!: boolean;
+  private toggleClick() {
+    this.$emit("toggleClick");
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.svg-icon {
+  vertical-align: middle;
+}
+.is-active {
+  transform: rotate(180deg);
+}
+</style>

src/main.ts

@@ -2,29 +2,18 @@ import Vue from "vue";
 import App from "./App.vue";
 import Component from "vue-class-component";
 import router from "./router";
-import store from "./store/index";
+import store from "./store";
 
-import {
-  Container,
-  Header,
-  Aside,
-  Main,
-  Footer,
-  Menu,
-  MenuItem,
-  Row,
-  Col
-} from "element-ui";
-Vue.component(Container.name, Container);
-Vue.component(Header.name, Header);
-Vue.component(Aside.name, Aside);
-Vue.component(Main.name, Main);
-Vue.component(Footer.name, Footer);
-Vue.component(Menu.name, Menu);
-Vue.component(MenuItem.name, MenuItem);
-Vue.component(Row.name, Row);
-Vue.component(Col.name, Col);
+import "normalize.css";
+import ElementUI from "element-ui";
+import SvgIcon from "vue-svgicon";
 
+Vue.use(ElementUI);
+Vue.use(SvgIcon, {
+  tagName: "svg-icon",
+  defaultWidth: "1em",
+  defaultHeight: "1em"
+});
 Vue.config.productionTip = false;
 
 new Vue({

src/store/index.ts

@@ -1,14 +1,14 @@
 import Vue from "vue";
 import Vuex from "vuex";
-import user from "./modules/user";
+import { IUserState } from "./modules/user";
+import { IAppState } from "./modules/app";
 
 Vue.use(Vuex);
 
-const store = new Vuex.Store({
-  strict: process.env.NODE_ENV !== "production",
-  modules: {
-    user
-  }
-});
+export interface IRootState {
+  app: IAppState;
+  user: IUserState;
+}
 
-export default store;
+// Declare empty store first, dynamically register all modules later.
+export default new Vuex.Store<IRootState>({});