Vue3 + Vite + Ts 使用 Layout 布局

前言

使用 Layout 布局需要先安装 vue-router。有不了解的同学可以访问 Vue3使用vue-router路由 进行参考。

准备工作

1，安装 Element Plus

npm install element-plus --save
yarn add element-plus

2，引入 Element Plus

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
// 引入 router
import router from "./router/index.ts";
// 引用element-plu
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
// 注册 所有的 el 图标
import * as ElementPlusIconsVue from "@element-plus/icons-vue";

const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}
app.use(ElementPlus, { locale: zhCn }).use(router).mount("#app");

创建相关文件

1，在 src 目录下创建 layout 文件夹，同时创建 components 文件夹和 index.vue文件
2，在 components 文件夹下创建 menu.vue 和 header.vue 作为菜单组件和头部组件
3，index.vue 内容如下，可根据项目更换布局

<template>
  <el-container>
    <el-aside>
      <Menu></Menu>
    </el-aside>
    <el-container>
      <el-header>
        <Header></Header>
      </el-header>
      <el-main>
        <router-view v-slot="{ Component, route }">
          <transition name="fade-transform" mode="out-in">
            <keep-alive>
              <component :is="Component" :key="route.path" />
            </keep-alive>
          </transition>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
// 引入菜单组件
import Menu from "./components/menu.vue";
// 引入头部组件
import Header from "./components/header.vue";
</script>

<style scoped>
.el-container {
  height: 100vh;
}
.el-header {
  background-color: #b3c0d1;
}
.el-aside {
  width: 200px;
  background-color: #304156;
}
.el-main {
  background-color: #e9eef3;
}
</style>

4，router.ts 文件

// 引入路由
import { createRouter, createWebHistory } from "vue-router";
import layout from "@/layout/index.vue";
// 路由数据
let routes = [
  // 默认路由:进入项目 默认进入 /index 页面
  {
    path: "/",
    redirect: "/index",
  },
  {
    path: "/index",
    component: layout,
    children: [
      {
        path: "/index",
        name: "index",
        component: () => import("@/view/index.vue"),
      },
    ],
  },
  {
    path: "/login",
    name: "login",
    hidden: true,
    component: () => import("@/view/login.vue"),
  },
];
// 路由
const router = createRouter({
  history: createWebHistory(),
  routes,
});
// 导出
export default router;

拓展

1，路由切换时顶部加载进度条的安装及使用

// 安装
npm install --save nprogress
yarn add nprogress
// 在路由文件中引入
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'
// 通过路由守卫使用 nprogress 
router.beforeEach(() => {
  // 开始加载进度条
  nprogress.start()
})
router.afterEach(() => {
  // 结束加载进度条
  nprogress.done()
})
// 在 style.css 文件中 自定义进度条颜色
#nprogress .bar {
  background: #409eff !important;
  height: 2px !important;
}

效果图

仓库地址

https://gitee.com/luliangweb/admin-template