【权限管理系统】06主界面布局

最新推荐文章于 2024-09-13 23:32:49 发布

阿斯卡码

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量682

点赞数 24

文章标签：前端

本文链接：https://blog.csdn.net/qq_52384627/article/details/135885196

版权

本文介绍了如何在Vue项目中安装并使用Sass，以及如何创建一个包含侧边栏的布局组件，并通过VueRouter实现路由到主页面。步骤包括在App.vue中添加SCSS支持，创建Layout组件，配置路由并启动项目。

摘要由CSDN通过智能技术生成

https://element-plus.org/zh-CN/component/container.html

1、安装sass

npm install --save-dev sass

2、找到index.html添加如下style里面的样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
<style>
  html,body,#app{
    padding: 0px;
    margin: 0px;
    height: 100%;
    box-sizing: border-box;
  }
</style>

3、App.vue修改为如下所示

<template>
  <router-view/>
</template>

<style lang="scss">
</style>

4、src目录下新建layout目录，并新建Index.vue主页面组件

<template>
  <el-container class="layout">
    <el-aside width="200px" class="asside">Aside</el-aside>
    <el-container>
      <el-header class="header">Header</el-header>
      <el-main class="main">Main</el-main>
    </el-container>
  </el-container>
</template>
<style lang="scss">
.layout {
  height: 100%;
  .asside {
    background-color: blueviolet;
  }
  .header {
    background-color: #009688;
  }
  .main {
    background-color: darkcyan;
  }
}
</style>

5、在router中引入主页面组件

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Layout from '@/layout/Index.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/home',
    name: 'Home',
    component: Layout
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router