Vue3.5 企业级管理系统实战（三）：页面布局及样式处理 （Scss UnoCSS ）

news2025/1/30 13:10:58

本章主要是关于整体页面布局及样式处理，在进行这一章代码前，先将前两章中的示例代码部分删除（如Home.vue、About.vue、counter.ts、App.vue中引用等）

1 整体页面布局

页面整体布局构成了产品的框架基础，通常涵盖主导航、侧边栏菜单、面包屑导航以及核心内容展示区域等关键元素

1.1 创建 layout 布局组件

在 src 文件夹下新建文件夹 layout，用于放置页面整体布局相关的组件页面。在 layout 文件夹下新建文件 index.vue

//layout/index.vue
<template>
  <div class="app-wrapper">
    <div class="sidebar-container">侧边导航</div>
    <div class="main-container">
      <div class="header">
        <div class="navbar">导航条1</div>
        <div class="tags-view">导航条2</div>
      </div>
      <div class="app-main">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

1.2 创建 Dashboard 页面

删除 main.ts 中引用的默认样式 style.css，在 views 文件夹下新建 Dashboard 文件夹，在Dashboard 文件夹下新建文件 index.vue 文件

1.3 配置路由

修改 router/index.ts 

//router/index.ts
import {
  createRouter,
  createWebHistory,
  type RouteRecordRaw
} from "vue-router";
import Layout from "@/layout/index.vue";

const routes: RouteRecordRaw[] = [
  {
    path: "/",
    component: Layout,
    redirect: "/dashboard",
    children: [
      {
        path: "dashboard",
        name: "Dashboard",
        component: () => import("@/views/Dashboard/index.vue")
      }
    ]
  }
];

export default createRouter({
  routes, //路由表
  history: createWebHistory() //路由模式
});

1.4 启动项目

启动项目，查看页面

npm run dev

2 样式处理

样式使用 Sass + Unocss 编写，使用前先安装 Sass 和 Unocss。

2.1 安装 Sass

Sass 是一种强大的 CSS 预处理器，它扩展了 CSS 的功能，增加了变量、嵌套规则、混合（mixins）、继承、函数等高级特性。Sass 提供了更高效、更易于维护的样式编写方式。通过编译，Sass 代码转换为标准的 CSS，兼容所有浏览器。Sass 有两种语法格式：SCSS（类似于 CSS 的语法）和Indented Sass（缩进语法）。它广泛应用于大型项目和框架中，有助于提高开发效率和代码的可读性。

使用 pnpm 安装 Sass

pnpm install sass -D

2.2 安装 UnoCss

UnoCSS 是一个即时按需的原子化 CSS 引擎，它提供了一种灵活、强大、快速且愉快的方式来生成和定制 CSS。这个引擎的特点是不需要解析、抽象语法树（AST）或扫描，因此它在性能上比其他类似的 CSS 引擎（如 Windi CSS 或 Tailwind CSS JIT）快五倍。UnoCSS 是轻量级的，零依赖，并且对浏览器友好，其大小约为 6kb（使用 minbrotli 压缩）

@unocss/preset-uno 是 UnoCSS 的一个预设，它提供了一系列基于原子化CSS的实用类。这个预设包含了大量的通用样式规则，如颜色、间距、字体大小、边框、布局等，使得开发者可以快速应用这些样式到HTML元素上，而无需编写具体的CSS代码。@unocss/preset-uno 的目标是提供一种简洁、直观的方式来构建界面，同时保持高性能和低维护成本。

@unocss/preset-attributify 是另一个 UnoCSS 预设，它允许开发者使用属性（attributes）而不是类（classes）来应用原子化CSS样式。这种方法的优点是可以减少HTML中的类名数量，使标记更加简洁，并且可以更容易地应用动态样式。例如，你可以直接在HTML元素上使用 bg-red、text-lg 等属性来改变背景颜色或文本大小，而不需要在元素上添加相应的类。这使得 UnoCSS 的使用更加灵活，尤其是在处理动态内容和响应式设计时。

使用 pnpm 安装 UnoCss

pnpm i unocss @unocss/preset-uno @unocss/preset-attributify -D

安装好后，在项目根目录下新建配置文件 uno.config.ts 对 Unocss 进行配置

//uno.config.ts
import { defineConfig } from "unocss";
import presetAttributify from "@unocss/preset-attributify";
import presetUno from "@unocss/preset-uno";

export default defineConfig({
  presets: [presetAttributify(), presetUno()],
});

在 vite.config.ts 中引入

//vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
import UnoCSS from "unocss/vite";

// https://vite.dev/config/
export default defineConfig({
  resolve: {
    alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }]
  },
  plugins: [
    vue(),
    UnoCSS({
      configFile: "./UnoCSS.config.ts"
    })
  ]
});

在 main.ts 中导入 Unocss

//main.ts
import { createApp } from "vue";
import App from "./App.vue";

import router from "./router";
import { createPinia } from "pinia";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import "uno.css";

const app = createApp(App);
const pinia = createPinia();

app.use(router);
app.use(pinia);
app.use(ElementPlus);
app.mount("#app");

接着，安装 unocss 插件，这样在代码中会有 unocss 的代码提示

在页面中使用 Unocss，如在 layout.vue 中添加 text-red 属性

效果如下：

2.3 Sass + Unocss 结合使用

Unocss 可以在页面内添加到 class 中使用，或直接如上文所示以行内属性的形式使用，但这样不好维护，为了便于维护，我们希望可以在<style></style>中使用，这样既可以享受 Sass 的语法优势，也可以享受 Unocss 的语法优势，也更方便维护。为了达到这个目的，需要安装一个插件 @unocss/transformer-directives 。（一般不建议 Sass 和 Unocss 一起使用，但是一起用还挺方便的，看个人需求吧~）

@unocss/transformer-directives 是 UnoCSS 的一个转换器插件，用于处理 CSS 文件中的特定指令，如 @apply、@screen 和 theme()。它允许开发者将原子化类应用到自定义选择器，通过媒体查询条件应用样式，以及访问主题配置。这样，UnoCSS 的功能得以扩展，使得样式编写更加灵活和强大，同时保持代码的简洁和可维护性。

使用 pnpm 安装 @unocss/transformer-directives 

pnpm i @unocss/transformer-directives

在 uno.config.ts 中引入

//uno.config.ts
import { defineConfig } from "unocss";
import presetAttributify from "@unocss/preset-attributify";
import presetUno from "@unocss/preset-uno";
import transformDirective from "@unocss/transformer-directives";

export default defineConfig({
  presets: [presetAttributify(), presetUno()],
  transformers: [transformDirective()], // apply
});

在页面<style></style>中使用

//layout/index.vue
<template>
  <div class="app-wrapper">
    <div class="sidebar-container">侧边导航</div>
    <div class="main-container">
      <div class="header">
        <div class="navbar">导航条1</div>
        <div class="tags-view">导航条2</div>
      </div>
      <div class="app-main">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
.app-wrapper {
  @apply text-red w-full h-full;
}
</style>

效果如下：

2.4 清除默认样式

现在，项目中还存在一些默认样式，为了避免对后续样式的影响，需要对这些默认样式进行清除，这里我们使用 pnpm 安装 Normalize.css 插件来清除默认样式

Normalize.css是一个现代的CSS重置方案，旨在提高网页在不同浏览器中的样式一致性。它保留有用的浏览器默认样式，同时修复常见浏览器间的差异和bug，确保HTML元素在多种环境下表现一致。与传统的CSS Reset不同，Normalize.css更加细腻，专注于提升可用性和可访问性，适用于追求一致性和标准化的项目。它被广泛用于众多框架和网站，如Twitter Bootstrap和HTML5 Boilerplate，是现代网页开发的必备工具。

pnpm install normalize.css

在 main.ts 中引入

//main.ts
import { createApp } from "vue";
import App from "./App.vue";

import router from "./router";
import "normalize.css/normalize.css";
import { createPinia } from "pinia";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import "uno.css";
const app = createApp(App);
const pinia = createPinia();

app.use(router);
app.use(pinia);
app.use(ElementPlus);
app.mount("#app");

引入后，可以看见默认的样式已经清除（空隙等）

2.5 完善 layout 样式

完善 layout.vue 的样式

//layout.vue
<template>
  <div class="app-wrapper">
    <div class="sidebar-container">侧边导航</div>
    <div class="main-container">
      <div class="header">
        <div class="navbar">导航条1</div>
        <div class="tags-view">导航条2</div>
      </div>
      <div class="app-main">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
.app-wrapper {
  @apply flex w-full h-full;
  .sidebar-container {
    @apply bg-red w-[210px];
  }
  .main-container {
    @apply flex flex-col flex-1;
  }
  .header {
    @apply h-84px;
    .navbar {
      @apply h-50px bg-yellow;
    }
    .tags-view {
      @apply h-34px bg-blue;
    }
  }
  .app-main {
    @apply bg-cyan;
    min-height: calc(100vh - 84px);
  }
}
</style>

效果如下：

2.6 提取公共变量

Vite 支持 Css Modules，使用起来非常简单，它允许你将 CSS 类名局部化，从而避免全局冲突。在 Vite 中使用 Css Modules 的步骤大致如下：

  1. 命名 CSS 文件：CSS Modules 要求你的样式文件以 .module.css 为后缀。例如，如果你有一个名为 styles.css 的文件，你需要将其重命名为 styles.module.css。

  2. 编写 CSS：在 styles.module.css 文件中，你可以像往常一样编写 CSS。

  3. 组件中导入和使用：在你的组件中，你可以导入这个 CSS 文件，Vite 会自动将其识别为 CSS Modules。然后你可以像使用对象一样使用这些样式。

在 src 下新建文件夹 style，新建文件 variables.module.scss，提取公共变量，scss 中声明好的变量在 js 中也可以使用。

//variable.module.scss
$sideBarWidth: 210px;
$navBarHeight: 50px;
$tagsViewHeight: 34px;

在 style 下创建 index.scss 文件，引入 variables.modules.scss，在:root 中定义 css 的变量

//index.scss
//@import "./variables.module.scss"; 弃用
@use "./variables.module.scss" as *;

:root {
  --sidebar-width: #{$sideBarWidth};
  --navbar-height: #{$navBarHeight};
  --tagsview-height: #{$tagsViewHeight};
}

 在 main.ts 中引入 index.scss

//main.ts
import { createApp } from "vue";
import App from "./App.vue";

import router from "./router";
import "normalize.css/normalize.css";
import { createPinia } from "pinia";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import "@/style/index.scss";
import "uno.css";
const app = createApp(App);
const pinia = createPinia();

app.use(router);
app.use(pinia);
app.use(ElementPlus);
app.mount("#app");

修改 layout.vue 中相关 css 的值

//layout.vue
<template>
  <div class="app-wrapper">
    <div class="sidebar-container">侧边导航</div>
    <div class="main-container">
      <div class="header">
        <div class="navbar">导航条1</div>
        <div class="tags-view">导航条2</div>
      </div>
      <div class="app-main">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
.app-wrapper {
  @apply flex w-full h-full;
  .sidebar-container {
    @apply bg-red w-[var(--sidebar-width)];
  }
  .main-container {
    @apply flex flex-col flex-1;
  }
  .header {
    @apply h-84px;
    .navbar {
      @apply h-[var(--navbar-height)] bg-yellow;
    }
    .tags-view {
      @apply h-[var(--tagsview-height)] bg-blue;
    }
  }
  .app-main {
    @apply bg-cyan;
    min-height: calc(100vh - var(--tagsview-height) - var(--navbar-height));
  }
}
</style>

修改后效果

这样，整体布局及大概的样式就设置好了。

下一篇将探讨组件库接入、自动导入配置等内容，敬请期待~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2284835.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Excel中LOOKUP函数的使用

Excel中LOOKUP函数的使用

文章目录 VLOOKUP&#xff08;垂直查找&#xff09;&#xff1a;HLOOKUP&#xff08;水平查找&#xff09;&#xff1a;LOOKUP&#xff08;基础查找&#xff09;&#xff1a;XLOOKUP&#xff08;高级查找&#xff0c;较新版本Excel提供&#xff09;&#xff1a; 在Excel中&…
阅读更多...
美创科技获浙江省网络空间安全协会年度表彰

美创科技获浙江省网络空间安全协会年度表彰

近日&#xff0c;浙江省网络空间安全协会第二届理事会第三次会议在杭州隆重召开&#xff0c;会议总结部署工作、表彰先进、分享创新实践成果。 会上&#xff0c;省委网信办副主任马晓军出席会议并致辞、宋皆荣理事长向第二届理事会报告2024年协会工作、常务副理事长单位浙江联通…
阅读更多...
游戏引擎介绍：Game Engine

游戏引擎介绍：Game Engine

简介 定义&#xff1a;软件框架&#xff0c;一系列为开发游戏的工具的集合 可协作创意生产工具&#xff0c;复杂性艺术&#xff0c;注重realtime实时 目的 为艺术家&#xff0c;设计师&#xff0c;程序员设计工具链 游戏引擎开发参考书 推荐&#xff1a;Game Engine Archite…
阅读更多...
[A-29]ARMv8/v9-GIC-中断子系统的安全架构设计(Security/FIQ/IRQ)

[A-29]ARMv8/v9-GIC-中断子系统的安全架构设计(Security/FIQ/IRQ)

ver0.1 前言 打开这篇文章的时候，我们已经为每一个中断信号规划一条路径，在外设和PE-Core之间建立了消息通道，外设有紧急的情况下可以给SOC中的大哥打报告了。下面就把接力棒就交到了CPU手里了，但是PE-Core要交给那个Exception Level以及Security下运行的软件处理呢？本文…
阅读更多...
能够对设备的历史数据进行学习与分析，通过与设备当前状态的比对，识别潜在故障并做出预判的名厨亮灶开源了。

能够对设备的历史数据进行学习与分析，通过与设备当前状态的比对，识别潜在故障并做出预判的名厨亮灶开源了。

明厨亮灶视频监控平台是一款功能强大且简单易用的实时算法视频监控系统。它的愿景是最底层打通各大芯片厂商相互间的壁垒&#xff0c;省去繁琐重复的适配流程&#xff0c;实现芯片、算法、应用的全流程组合&#xff0c;从而大大减少企业级应用约95%的开发成本。AI技术可以24小时…
阅读更多...
Linux进程调度与等待：背后的机制与实现

Linux进程调度与等待：背后的机制与实现

个人主页&#xff1a;chian-ocean 文章专栏-Linux 前言&#xff1a; 当一个进程发起某种操作&#xff08;如I/O请求、信号、锁的获取等&#xff09;&#xff0c;但该操作需要的资源暂时不可用时&#xff0c;进程会被操作系统挂起&#xff0c;进入“等待队列”或“阻塞状态”。…
阅读更多...
寒假1.25

寒假1.25

题解 web:[极客大挑战 2019]Upload 打开环境 上传一个一句话木马试试 只能上传图片那就再上传一次&#xff0c;bp抓包修改type-content为image/jpeg试试 不行 看来是文件后缀被绕过了&#xff0c;上传一个.html然后抓包改类型试试 上传成功了&#xff0c;但是提示‘<&…
阅读更多...
C++/stack_queue

C++/stack_queue

目录 1.stack 1.1stack的介绍 1.2stack的使用 练习题&#xff1a; 1.3stack的模拟实现 2.queue的介绍和使用 2.1queue的介绍 2.2queue的使用 2.3queue的模拟实现 3.priority_queue的介绍和使用 3.1priority_queue的介绍 3.2priority_queue的使用 欢迎 1.stack 1.1stack…
阅读更多...
【Java】微服务找不到问题记录can not find user-service

【Java】微服务找不到问题记录can not find user-service

一、问题描述 运行网关微服务与用户微服务后&#xff0c;nacos服务成功注册 但是测试接口的时候网关没有找到相关服务 二、解决方案 我先检查了pom文件确定没问题后查看配置文件 最后发现是配置里spring.application.namexxx-user里面服务的名字后面多了一个空格 三、总结…
阅读更多...
QT：图像上绘制图形

QT：图像上绘制图形

需求描述 1、展示一张图像 2、在图像上可以使用数据绘制图像&#xff1a;矩形、不规则图形、线条 3、有按键可以选择 概要设计 规划布局如下 1、左边是Qlabel 用于展示图片 2、右边是三个按钮 具体实现 1、 首先设计 UI 界面&#xff0c;对控件进行布局 在 mainwindow.u…
阅读更多...
基于java线程池和EasyExcel实现数据异步导入

基于java线程池和EasyExcel实现数据异步导入

基于java线程池和EasyExcel实现数据异步导入 2.代码实现 2.1 controller层 PostMapping("import")public void importExcel(MultipartFile file) throws IOException {importService.importExcelAsync(file);}2.2 service层 Resource private SalariesListener sa…
阅读更多...
日志收集Day007

日志收集Day007

1.配置ES集群TLS认证: (1)elk101节点生成证书文件 cd /usr/share/elasticsearch ./bin/elasticsearch-certutil cert -out config/elastic-certificates.p12 -pass "" --days 3650 (2)elk101节点为证书文件修改属主和属组 chown elasticsearch:elasticsearch con…
阅读更多...
群晖docker获取私有化镜像http: server gave HTTP response to HTTPS client].

群晖docker获取私有化镜像http: server gave HTTP response to HTTPS client].

群晖docker获取私有化镜像提示http: server gave HTTP response to HTTPS clien 问题描述 层级时间用户事件Information2023/07/08 12:47:45cxlogeAdd image from xx.xx.31.240:1923/go-gitea/gitea:1.19.3Error2023/07/08 12:47:48cxlogeFailed to pull image [Get "http…
阅读更多...
ResNeSt: Split-Attention Networks论文学习笔记

ResNeSt: Split-Attention Networks论文学习笔记

这张图展示了一个名为“Split-Attention”的神经网络结构&#xff0c;该结构在一个基数组&#xff08;cardinal group&#xff09;内进行操作。基数组通常指的是在神经网络中处理的一组特征或通道。图中展示了如何通过一系列操作来实现对输入特征的注意力机制。 以下是图中各部…
阅读更多...
【matlab】绘图 离散数据---＞连续函数

【matlab】绘图 离散数据---＞连续函数

matlab绘图练习 离散数据及离散函数对离散区间进行细划分 达到连续效果画plot(y)图 与 复数的应用 离散数据及离散函数 例1 x1[1 2 4 6 7 8 10 11 12 14 16 17 18 20] y1[1 2 4 6 7 8 10 10 8 7 6 4 2 1] figure(1); plot(x1,y1,o,MarkerSize,15); x21:20; y2log(x2); figure…
阅读更多...
Qt中QVariant的使用

Qt中QVariant的使用

1.使用QVariant实现不同类型数据的相加 方法&#xff1a;通过type函数返回数值的类型&#xff0c;然后通过setValue来构造一个QVariant类型的返回值。 函数&#xff1a; QVariant mainPage::dataPlus(QVariant a, QVariant b) {QVariant ret;if ((a.type() QVariant::Int) &a…
阅读更多...
基础项目实战——3D赛车（c++）

基础项目实战——3D赛车（c++）

目录 前言一、渲染引擎二、关闭事件三、梯形绘制四、轨道绘制五、边缘绘制六、草坪绘制七、前后移动八、左右移动​九、曲线轨道​十、课山坡轨道​十一、循环轨道​十二、背景展示​十三、引入速度​十四、物品绘制​十五、课数字路障​十六、分数展示​十七、重新生成​十八、…
阅读更多...
【SpringBoot教程】Spring Boot + MySQL + HikariCP 连接池整合教程

【SpringBoot教程】Spring Boot + MySQL + HikariCP 连接池整合教程

&#x1f64b;大家好&#xff01;我是毛毛张! &#x1f308;个人首页&#xff1a; 神马都会亿点点的毛毛张 在前面一篇文章中毛毛张介绍了SpringBoot中数据源与数据库连接池相关概念&#xff0c;今天毛毛张要分享的是关于SpringBoot整合HicariCP连接池相关知识点以及底层源码…
阅读更多...
一文讲解Java中Object类常用的方法

一文讲解Java中Object类常用的方法

在Java中&#xff0c;经常提到一个词“万物皆对象”&#xff0c;其中的“万物”指的是Java中的所有类&#xff0c;而这些类都是Object类的子类&#xff1b; Object主要提供了11个方法&#xff0c;大致可以分为六类&#xff1a; 对象比较&#xff1a; public native int has…
阅读更多...
操作系统之输入输出

操作系统之输入输出

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023