vue 记录计算样式和路由封装引入

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,

});