Vue3.5 企业级管理系统实战(三):页面布局及样式处理 (Scss UnoCSS )

本章主要是关于整体页面布局及样式处理,在进行这一章代码前,先将前两章中的示例代码部分删除(如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-redtext-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>

修改后效果

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Vue平台开发三——项目管理页面

前言 对于多个项目的使用&#xff0c;可能需要进行项目切换管理&#xff0c;所以这里创建一个项目管理页面&#xff0c;登录成功后跳转这个页面&#xff0c;进行选择项目&#xff0c;再进入Home页面展示对应项目的内容。 一、实现效果图预览 二、页面内容 功能1、项目列表展…

WPS计算机二级•幻灯片的基础操作

听说这是目录哦 PPT的正确制作步骤&#x1f6e3;️认识PPT界面布局&#x1f3dc;️PPT基础操作 快捷键&#x1f3de;️制作PPT时 常用的快捷技巧&#x1f3d9;️快速替换PPT的 文本字体&#x1f303;快速替换PPT 指定文本内容&#x1f305;能量站&#x1f61a; PPT的正确制作步…

安装 docker 详解

在平常的开发工作中&#xff0c;我们经常需要部署项目。随着 Docker 容器的出现&#xff0c;大大提高了部署效率。Docker 容器包含了应用程序运行所需的所有依赖&#xff0c;避免了换环境运行问题。可以在短时间内创建、启动和停止容器&#xff0c;大大提高了应用的部署速度&am…

Spring Boot 整合 ShedLock 处理定时任务重复执行的问题

&#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Micro麦可乐的博客 &#x1f425;《Docker实操教程》专栏以最新的Centos版本为基础进行Docker实操教程&#xff0c;入门到实战 &#x1f33a;《RabbitMQ》…

BLE透传方案,IoT短距无线通信的“中坚力量”

在物联网&#xff08;IoT&#xff09;短距无线通信生态系统中&#xff0c;低功耗蓝牙&#xff08;BLE&#xff09;数据透传是一种无需任何网络或基础设施即可完成双向通信的技术。其主要通过简单操作串口的方式进行无线数据传输&#xff0c;最高能满足2Mbps的数据传输速率&…

32、【OS】【Nuttx】OSTest分析(1):stdio测试(二)

背景 接上篇wiki 31、【OS】【Nuttx】OSTest分析&#xff08;1&#xff09;&#xff1a;stdio测试&#xff08;一&#xff09; 继续stdio测试的分析&#xff0c;上篇讲到标准IO端口初始化&#xff0c;单从测试内容来说其实很简单&#xff0c;没啥可分析的&#xff0c;但这几篇…

设计新的 Kibana 仪表板布局以支持可折叠部分等

作者&#xff1a;来自 Elastic Teresa Alvarez Soler, Hannah Mudge 及 Nathaniel Reese 在 Kibana 中构建可折叠仪表板部分需要彻底改造嵌入式系统并创建自定义布局引擎。这些更新改进了状态管理、层次结构和性能&#xff0c;同时为新的高级仪表板功能奠定了基础。 我们正在开…

uni-app 程序打包 Android apk、安卓夜神模拟器调试运行

1、打包思路 云端打包方案&#xff08;每天免费次数限制5&#xff0c;最简单&#xff0c;可以先打包尝试一下你的程序打包后是否能用&#xff09;&#xff1a; HBuilderX 发行App-Android云打包 选择Android、使用云端证书、快速安心打包本地打包&#xff1a; HBuilderX …

Jetpack Compose 和 Compose Multiplatform 还有 KMP 的关系

今天刚好看到官方发布了一篇文章&#xff0c;用于讨论 Compose Multiplatform 和 Jetpack Compose 之间的区别&#xff0c;突然想起之前评论区经常看到说 “Flutter 和 CMP 对于 Google 来说项目重叠的问题”&#xff0c;刚好可以放一起聊一聊。 最近写的几篇内容写的太干&…

第38周:猫狗识别 (Tensorflow实战第八周)

目录 前言 一、前期工作 1.1 设置GPU 1.2 导入数据 输出 二、数据预处理 2.1 加载数据 2.2 再次检查数据 2.3 配置数据集 2.4 可视化数据 三、构建VGG-16网络 3.1 VGG-16网络介绍 3.2 搭建VGG-16模型 四、编译 五、训练模型 六、模型评估 七、预测 总结 前言…

python生成图片和pdf,快速

1、下载安装 pip install imgkit pip install pdfkit2、wkhtmltopdf工具包&#xff0c;下载安装 下载地址&#xff1a;https://wkhtmltopdf.org/downloads.html 3、生成图片 import imgkit path_wkimg rD:\app\wkhtmltopdf\bin\wkhtmltoimage.exe # 工具路径&#xff0c;安…

详解:TCP/IP五层(四层)协议模型

一.五层&#xff08;四层&#xff09;模型 1.概念 TCP/IP协议模型分为五层&#xff1a;物理层、数据链路层、网络层、传输层和应用层。这五层每一层都依赖于其下一层给它提供的网络去实现需求。 1&#xff09;物理层&#xff1a;这是最基本的一层&#xff0c;也是最接近硬件…

DeepSeek-R1:将强化学习用于激励大型语言模型的推理能力

目录 引言 一、DeepSeek-R1的贡献 二、DeepSeek-R1的方法 2.1、DeepSeek-R1-Zero&#xff1a;基础模型上的强化学习 2.2、DeepSeek-R1&#xff1a;冷启动强化学习 2.3、蒸馏&#xff1a;赋予小模型推理能力 三、DeepSeek-R1实验结果 3.1、模型优点 3.2、模型缺点 四、…

分布式微服务系统简述

distributed microservice 分布式与微服务的定义及关系&#xff1b;分布式微服务架构里的各组件&#xff0c;如&#xff1a;配置中心、服务注册/发现、服务网关、负载均衡器、限流降级、断路器、服务调用、分布式事务等&#xff1b;spring cloud 介绍及实现案例&#xff0c;如…

从Spring请求处理到分层架构与IOC:注解详解与演进实战

引言 在Spring开发中&#xff0c;请求参数处理、统一响应格式、分层架构设计以及依赖管理是构建可维护应用的核心要素。然而&#xff0c;许多开发者在实践中常面临以下问题&#xff1a; 如何规范接收不同格式的请求参数&#xff1f; 为何要引入分层架构&#xff1f; 什么是控…

神经网络|(三)线性回归基础知识

【1】引言 前序学习进程中&#xff0c;已经对简单神经元的工作模式有所了解&#xff0c;这种二元分类的工作机制&#xff0c;进一步使用sigmoid()函数进行了平滑表达。相关学习链接为&#xff1a; 神经网络|(一)加权平均法&#xff0c;感知机和神经元-CSDN博客 神经网络|(二…

2024年博客之星主题创作|猫头虎分享AI技术洞察:2025年AI发展趋势前瞻与展望

2025年AI发展趋势前瞻&#xff1a;猫头虎深度解析未来科技与商业机遇 摘要 2024年&#xff0c;AI技术迎来爆发式增长&#xff0c;AIGC、智能体、AIRPA、AI搜索、推理模型等技术不断突破&#xff0c;AI应用场景持续扩展。2025年&#xff0c;AI将进入全新发展阶段&#xff0c;W…

Android多语言开发自动化生成工具

在做 Android 开发的过程中&#xff0c;经常会遇到多语言开发的场景&#xff0c;尤其在车载项目中&#xff0c;多语言开发更为常见。对应多语言开发&#xff0c;通常都是在中文版本的基础上开发其他国家语言&#xff0c;这里我们会拿到中-外语言对照表&#xff0c;这里的工作难…

【Maui】提示消息的扩展

文章目录 前言一、问题描述二、解决方案三、软件开发&#xff08;源码&#xff09;3.1 消息扩展库3.2 消息提示框使用3.3 错误消息提示使用3.4 问题选择框使用 四、项目展示 前言 .NET 多平台应用 UI (.NET MAUI) 是一个跨平台框架&#xff0c;用于使用 C# 和 XAML 创建本机移…

AI导航工具我开源了利用node爬取了几百条数据

序言 别因今天的懒惰&#xff0c;让明天的您后悔。输出文章的本意并不是为了得到赞美&#xff0c;而是为了让自己能够学会总结思考&#xff1b;当然&#xff0c;如果有幸能够给到你一点点灵感或者思考&#xff0c;那么我这篇文章的意义将无限放大。 背景 随着AI的发展市面上…