likes
comments
collection
share

手摸手创建一个 Vue + Ts 项目（五） —— UnoCSS 的基本使用

作者站长头像
站长
· 阅读数 41

系列目录

前言

在前面的篇章中，实现了一个左侧菜单栏，并且做了基本功能的完善，效果如下：

手摸手创建一个 Vue + Ts 项目（五） —— UnoCSS 的基本使用

本篇，来把上一篇中的布局组件高度没有撑开的问题解决，同时，主要学习下 UnoCSS 的使用。

项目中所有源代码：easii-admin-ui: 手摸手创建一个 Vue + Ts 项目源码 (gitee.com)

样式调整

首先，在 src 文件夹下，新建一个 styles 文件夹，用于存放样式文件。在这个文件夹下新建一个 index.css 文件，先将最外层的容器宽度和高度拉满撑开。：

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#app {
  width: 100%;
  height: 100%;
}

之后在 main.ts 中引入该文件：

import '@/styles/index.css'

之后，我们先来将上一篇中遗留的一个问题解决，就是通用的布局，并没有撑开高度。这里直接在布局组件（BasicLayout.vue）上面添加样式：style = "height: 100%"，刷新页面后，可以看到，高度和宽度已经撑开。

手摸手创建一个 Vue + Ts 项目（五） —— UnoCSS 的基本使用

使用 UnoCSS

添加样式固然简单，但这里还有换一种方式来实现，使用最开始添加的 UnoCSS 。

UnoCSS 本身不提供样式，时需要通过加载不同的预设来使用的，本项目中使用的是默认预设，该预设尝试提供流行的功能优先框架（包括Tailwind CSS、Windi CSS、Bootstrap、Tachyons 等）的共同超集。

Tailwind CSS 是一个功能非常强大的 CSS 框架，我们可以优先考虑使用它，在使用时，可以参考它的文档。

比如，要实现前面的功能时，可以查阅 Tailwind CSS 的文档，找到设置宽度和高度的地方，例如宽度：

手摸手创建一个 Vue + Ts 项目（五） —— UnoCSS 的基本使用

其提供了一个名为 w-full 的样式类，同理查阅文档，高度设置中，通过 h-full 来设置 height: 100%。

了解了这些，回到前面的布局组件（BasicLayout.vue），修改如下：

<template>
  <n-layout has-sider w-full h-full>
  	<!-- ...... -->
  </n-layout>
</template>

刷新页面，实现了同样的效果。

UnoCSS 的快捷方式（shortcuts）

所谓的快捷方式，就是将多个规则组合成单个简写。

例如前面的 w-full、h-full，可能经常有一些组件，需要添加这两个属性，我们可以通过配置一个 wh-full 的快捷方式，来组合这两个规则。

修改 vite.config.ts，在配置 UnoCSS 插件时，添加快捷方式的配置代码：

UnoCSS({
  shortcuts: {
    'wh-full': 'w-full h-full'
  },
  presets: [presetUno(), presetAttributify()]
})

这时候，就可以使用 wh-full 啦：

<template>
  <n-layout has-sider w-full h-full>
  	<!-- ...... -->
  </n-layout>
</template>

UnoCSS 配置文件

UnoCSS 官方强烈推荐使用一个专用的 uno.config.ts 文件来配置我们的 UnoCSS，与在 vite.config.ts 中内联配置相比，专用的配置文件，将更好地与 IDEs 和其他工具集成，例如 ESLint plugin，并且能够更好地支持 HMR（热更新）。

所以呢，我们这里按照官方文档，来将我们项目中的 UnoCSS 配置到一个专用的 uno.config.ts 文件中。

在根目录新建 uno.config.ts 文件：

import { defineConfig, presetAttributify, presetUno } from 'unocss'

export default defineConfig({
  shortcuts: {
    'wh-full': 'w-full h-full'
  },
  presets: [presetUno(), presetAttributify()]
})

由于默认情况下，UnoCSS 将自动在项目根目录查找 uno.config.{js.ts} 或 unocss.config.{js,ts}文件，所以新建后就可以了不需要引入该文件。

同时，修改 vite.config.ts 中，将 UnoCSS 插件配置修改为如下：

export default defineConfig({
  plugins: [
		// ......
    UnoCSS()
  ],
  // ......
})

VsCode 插件

UnoCSS 提供了 VsCode 插件，为开发人员提供了极大的便利。

该插件非常的强大，不仅可以提供输入提示，鼠标悬停还能显示编译后的 css 样式，对于自定义的 shortcuts、rules 和 colors 都能生效。

效果如下：

  • 鼠标悬停

手摸手创建一个 Vue + Ts 项目（五） —— UnoCSS 的基本使用

  • 自定义 shortcuts 支持

手摸手创建一个 Vue + Ts 项目（五） —— UnoCSS 的基本使用

结语

本篇，主要通过解决高度没有撑满的问题，学习了下 UnoCSS 的使用，可以说，UnoCSS 的出现，让样式写起来更加的简单、优雅，作为一个后端开发，见到 UnoCSS 的时候，真的让人眼前一亮，很值得大家研究一下。

我是「代码笔耕」，致力于打造高效简洁、稳定可靠代码的后端开发。 由于不是专业的前端开发，也是通过写这一系列的文章，来提升巩固下自己的水平。 本文可能存在纰漏或错误，如有问题欢迎指正，感谢您阅读这篇文章，如果觉得还行的话，不要忘记点赞、评论、收藏喔！ 最后欢迎大家关注我的公众号「代码笔耕」和开源项目：easii (easii) - Gitee.com

转载自:https://juejin.cn/post/7240286394819919929
评论
请登录