当前位置: 首页 > news >正文

VuePress2配置unocss的闭坑指南

文章目录

    • 1. 安装依赖:准备魔法材料
    • 2. 检查依赖版本一定要一致:确保魔法配方准确无误
    • 3. 新建uno.config.js:编写咒语书
    • 4. 配置config.js和client.js:完成仪式

1. 安装依赖:准备魔法材料

在开始我们的前端魔法之前,我们需要准备好所有必要的魔法材料——即安装正确的依赖项。这一步骤至关重要,因为它奠定了我们整个项目的基础。

首先,我们将引入unocss以及@unocss/preset-rem-to-px。后者是专门用来将rem单位转换为px的预设,因为UnoCSS默认使用的是rem单位,而有时我们可能更倾向于直接使用像素值来定义样式。尽管UnoCSS允许你通过类似m-l-10px的方式直接指定像素,但为了代码的一致性和可读性,使用预设来统一处理单位转换是一个更好的选择。

安装这两个依赖项非常简单,只需要运行以下命令:

pnpm add -D unocss @unocss/preset-rem-to-px

接下来,我们要特别关注VuePress与它的Vite打包器之间的版本兼容性问题。以下是推荐的devDependencies配置:

"devDependencies": {"@vuepress/bundler-vite": "2.0.0-rc.19","@vuepress/theme-default": "2.0.0-rc.49","sass-embedded": "^1.79.4","unocss": "^0.64.0","@unocss/preset-rem-to-px": "^0.64.0","vue": "^3.5.10","vuepress": "2.0.0-rc.19","vuepress-theme-plume": "1.0.0-rc.121"
}

这里强调的是@vuepress/bundler-vitevuepress两个包必须保持一致的版本号,以避免由于版本不匹配导致的白屏或其他异常错误。其他如主题等组件,则应该根据需要选择相匹配的版本。

2. 检查依赖版本一定要一致:确保魔法配方准确无误

在魔法世界中,配方的准确性决定了最终效果的成功与否。同样地,在前端开发里,依赖项的版本一致性也是至关重要的。正如前面提到的,@vuepress/bundler-vitevuepress必须具有相同的版本号。这是因为它们之间有着紧密的合作关系;一个负责构建工具链,另一个则是核心框架本身。如果两者版本不同步,可能会引发各种意想不到的问题,比如页面加载失败、样式错乱或是交互逻辑失效等。

此外,对于UnoCSS及其预设@unocss/preset-rem-to-px来说,也应尽量保证它们处于相同的主要版本系列内,这样可以最大限度地减少潜在冲突,确保功能正常运作。至于其他依赖,如Vue或特定的主题插件,则需根据官方文档或者社区反馈来决定最合适的版本组合。

3. 新建uno.config.js:编写咒语书

现在我们已经有了所有的魔法材料,接下来就是编写咒语书的时间了。在这个阶段,我们需要创建一个名为uno.config.js的文件,用于配置UnoCSS的行为。这份配置文件就像是魔法师手中的咒语书,它指导着UnoCSS如何为我们生成所需的样式规则。

以下是示例配置:

import { defineConfig, presetUno, presetAttributify } from 'unocss';
import presetRemToPx from '@unocss/preset-rem-to-px';export default defineConfig({presets: [presetUno(),presetAttributify(),presetRemToPx({baseFontSize: 4,}),],content: {filesystem: ["**/*.{html,vue,md}"],},
});

在这里,presetRemToPx被设置了一个基础字体大小为4px,这意味着当你写下像m-l-4这样的样式时,实际上就是在设定margin-left: 4px。这种做法不仅简化了样式控制,还提高了代码的可维护性和一致性。

4. 配置config.js和client.js:完成仪式

最后两步是为了确保一切顺利运行所做的收尾工作。首先是配置docs/.vuepress/config.js,这是VuePress站点的核心配置文件。我们将在此处引入UnoCSS并配置VuePress以使用Vite作为打包器。

import { viteBundler } from "@vuepress/bundler-vite";
import { defineUserConfig } from "vuepress";
import UnoCSS from 'unocss/vite';export default defineUserConfig({// 请不要忘记设置默认语言bundler: viteBundler({viteOptions: {plugins: [UnoCSS(),],},}),});

这段代码使得我们在启动VuePress站点时,能够正确加载UnoCSS插件,并利用Vite提供的快速热更新和其他优化特性。

紧接着,在docs/.vuepress/client.js中,我们还需要引入UnoCSS的样式文件。这一步类似于施法过程中的最后一个手势,标志着整个魔法仪式的完成。

import "virtual:uno.css";

这段简单的导入语句确保了当用户访问我们的网站时,UnoCSS的样式能够立即生效,从而为他们带来流畅且美观的浏览体验。

至此,我们已经完成了VuePress结合Vite打包器与UnoCSS的所有配置步骤。希望这篇指南能帮助你在前端开发的路上更加得心应手,创造出令人惊艳的作品。记住,每一次技术的选择都是一场新的冒险,愿你在这条道路上不断探索,发现更多可能性。
在这里插入图片描述

http://www.lryc.cn/news/517404.html

相关文章:

  • 海陵HLK-TX510人脸识别模块 stm32使用
  • 安卓14无法安装应用解决历程
  • 【Linux】传输层协议UDP
  • 玩机搞机基本常识-------列举安卓机型一些不常用的adb联机命令
  • unity学习14:unity里的C#脚本的几个基本生命周期方法, 脚本次序order等
  • pytorch 比较两个张量的是否相等的函数介绍
  • MySQL Windows 11 的 MySQL 配置文件 (my.ini) 路径查找指南
  • 06-RabbitMQ基础
  • 关于markdown实现页面跳转(调查测试:csdn(博客编写效果、发布效果)、typroa中md转pdf的使用情况)
  • el-dialog 组件 在<style lang=“scss“ scoped>标签
  • 《深度学习梯度消失问题:原因与解决之道》
  • 中高级运维工程师运维面试题(十一)之 Docker
  • Gitee图形界面上传(详细步骤)
  • WebSocket 实现指南
  • TRELLIS - 生成 3D 作品的开源模型
  • uni-app图文列表到详情页面切换
  • ros2-3.4话题通信最佳实践
  • Vmware安装centos
  • 51单片机——按键实验
  • QT c++ 自定义按钮类 加载图片 美化按钮
  • Django:构建高效Web应用的强大框架
  • 代码随想录算法【Day11】
  • [SeaTunnel] [MySql CDC] Generate Splits for table db.table error
  • Spring Boot | 基于MinIO实现文件上传和下载
  • 企业手机号搜索API接口
  • VirtualBox Main API 学习笔记
  • [Linux]Mysql9.0.1服务端脱机安装配置教程(redhat)
  • uniapp--HBuilder开发
  • 计算机毕业设计学习项目-P10080 基于springboot+vue的社团管理系统的设计与实现
  • with as提高sql的执行效率