style.js
/*s
*/
const variables = {
main_bg_color: "#f5f5f5",
base_color: "#409EFF",
nav_height: "50px",
side_close_width: "65px",
side_open_width: "160px",
sideBgColor: "#545c64",
sideTextColor: "#fff",
sideActiveTextColor: "#ffd04b",
};
module.exports = variables;
<!--
* @Author: your name
-->
<template>
<el-container>
<el-aside width="auto"><side-bar></side-bar></el-aside>
<el-container>
<el-header :height="nav_height">
<navigate-bar></navigate-bar>
</el-header>
<el-main>
<el-scrollbar
style="padding: 20px; box-sizing: border-box; background: #fff"
>
<router-view v-slot="{ Component }">
<transition name="el-zoom-in-top" mode="out-in">
<component :key="routerAlive" :is="Component" />
</transition>
</router-view>
</el-scrollbar>
</el-main>
</el-container>
</el-container>
</template>
<script setup>
import { nav_height } from "@/styles/variables.scss.js";
import NavigateBar from "@/components/layout/NavigateBar.vue";
import SideBar from "@/components/layout/SideBar.vue";
import { provide, ref, watchEffect } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const routerAlive = ref(null);
watchEffect(() => {
routerAlive.value = route.name;
});
provide("reload", () => {
routerAlive.value = Math.random() + "_" + Math.random();
});
</script>
<style lang="scss" scoped> //
.el-main {
height: calc(100vh - v-bind(nav_height));
background: $main-bg-color;
:deep(.el-scrollbar__bar.is-horizontal) {
visibility: hidden;
}
}
</style>
vue3路由统一引入
let modules = {};
const files = require.context("./modules", true, /index.js$/);
files.keys().forEach((key) => {
const fileName = key.split("/")[1];
modules[fileName] = files(key).default;
});
import { createStore } from "vuex";
import getters from "./getters";
export default createStore({
getters,
modules,
});