VuePress2配置unocss的闭坑指南

文章目录

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

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

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

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

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

bash 复制代码

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

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

json 复制代码

"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-vite和vuepress两个包必须保持一致的版本号，以避免由于版本不匹配导致的白屏或其他异常错误。其他如主题等组件，则应该根据需要选择相匹配的版本。

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

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

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

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

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

以下是示例配置：

javascript 复制代码

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作为打包器。

javascript 复制代码

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的样式文件。这一步类似于施法过程中的最后一个手势，标志着整个魔法仪式的完成。

javascript 复制代码

import "virtual:uno.css";

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

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