<template> <div> <tags /> <div> <transition mode="out-in"> <router-view></router-view> </transition> </div> </div> </template>
import Tags from './Tags.vue' export default { components:{ Tags } }
相关组件写好，在layout组件中汇总
<template> <div> <Aside/> <div :class="isCollapse==true?'container_collapse':''"> <Header/> <Main/> </div> </div> </template>
import Aside from "./components/Aside.vue"; import Header from "./components/Header.vue"; import Main from "./components/Main.vue"; import { mapState } from "vuex"; export default { name: "Layout", components: { Aside, Header, Main }, computed: { ...mapState(["isCollapse"]) } };
至此首页布局已经规划完成，如有不太清楚的可以查看项目地址
十、结语管理系统是多种多样的，每家公司都有不同的业务逻辑，本篇文章也只是抛砖引玉，还有许多需要修正改进的地方，如果同学们有更好的想法可以提出来希望大家一起完善本项目。
|-- vue-admin-project |-- .env |-- .env.prod |-- .env.test |-- .gitignore |-- babel.config.js |-- package-lock.json |-- package.json |-- README.md |-- vue.config.js |-- public | |-- favicon.ico | |-- index.html |-- src |-- App.vue |-- element-variables.scss |-- main.js |-- api | |-- api.js | |-- request.js |-- assets | |-- logo.png | |-- css | | |-- normalize.css | | |-- public.css | |-- icon | | |-- demo.css | | |-- demo_index.html | | |-- iconfont.css | | |-- iconfont.eot | | |-- iconfont.js | | |-- iconfont.svg | | |-- iconfont.ttf | | |-- iconfont.woff | | |-- iconfont.woff2 | |-- img | | |-- tou.jpg | |-- js | | |-- common.js | |-- scss | |-- global.scss |-- components | |-- showAside.vue |-- plugins | |-- element.js |-- router | |-- router.js |-- store | |-- actions.js | |-- getters.js | |-- mutations.js | |-- state.js | |-- store.js |-- views |-- layout | |-- Layout.vue | |-- components | |-- Aside.vue | |-- Header.vue | |-- Main.vue | |-- Tags.vue
最后项目目录文件结构