不再踩坑，在Vue3+vite安装UNOCSS

前言

1. 本文安装经过多次验证，坑点会重点强调，务必注意
2. 有两个版本
   1. 极速版：只有代码和安装命令，非常快捷，适合已经了解unocss的同学
   2. 详细版：图文教程，非常详细，适合初次接触的同学
3. 为了方便复制粘贴，先看极速版，如有遇到问题，再看详细版
4. 总共4步，缺一不可
5. js和ts通用,注意修改文件后缀名 uno.config.js | vite.config.ts
6. 尽可能的复制粘贴，别手写

如有其他需要的安装教程，可在评论区留言。

极速版

1.安装依赖

选择一个运行

npm i unocss -D
yarn add unocss -D
pnpm add unocss -D

2.新建文件

执行：在 vite.config.ts,vite.config.js 同级目录下

新建文件 -> uno.config.js

import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetWind3,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(),
    presetAttributify(),
    presetIcons(),
    presetTypography(),
  ],
  transformers: [transformerDirectives(), transformerVariantGroup()],
})

3.修改VITE配置文件

添加两行代码

1. 一行导入 UnoCss
2. 一行导入上面的文件

import { fileURLToPath, URL } from 'node:url';

import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';

/* ------------------------------------------------需要添加下面这行------------------------------------ */
import UnoCss from 'unocss/vite';

export default defineConfig({
  plugins: [
    vue(),
    /* ------------------------------------------------需要添加下面这行------------------------------------ */
    UnoCss({ configFile: './uno.config.js'/*注意这里的后缀名*/ }),//上面新建的那个文件的地址,
  ],
  //这里省略了其他配置
});

4.添加入口代码

在main.js|main.ts中添加代码

import 'uno.css'

仅有一行，到此结束，可以启动试试了

THE END

详细版

详细版和极速版步骤一致，原理一致，总共四步，缺一不可

请确保每一步执行后，参照正确执行的效果

第一步：安装依赖

确保在 package.json 同级目录下中执行命令

npm i unocss -D

• 安装成功后，package.json会自动新增一行代码

• 后面的版本号可能不相同，只要出现，就代表成功

效果图如下

第二步：新建文件

1. 在package.json的同级目录下新建文件：uno.config.js或uno.config.ts。
2. 往新建的文件中添加代码
3. 文件名可修改，记得同时修改要导入vite里面的导入名

这个文件的作用

1. 代码提示
2. 添加自定义的预设
3. 没导入不影响unocss的简单使用，但这样的unocss相当于一本残卷，无法发挥所有的功力

注意：uno.config.js和vite.config.js是同级

import { fileURLToPath, URL } from 'node:url';

/* ------------------------------------------------需要添加这行------------------------------------ */
import UnoCss from 'unocss/vite';
export default defineConfig({
  plugins: [
    vue(),
    /* ------------------------------------------------需要添加这行------------------------------------ */
    UnoCss({ configFile: './uno.config.js'/*注意文件名*/ }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});

效果图

第三步：修改VITE配置文件

修改vite.config.js的内容，添加两行代码

import { fileURLToPath, URL } from 'node:url';

import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';

/* ------------------------------------------------需要添加这行------------------------------------ */
import UnoCss from 'unocss/vite';
export default defineConfig({
  plugins: [
    vue(),
    /* ------------------------------------------------需要添加这行------------------------------------ */
    UnoCss({ configFile: './uno.config.js' }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  //其他代码
});

效果图

最后一步：修改入口文件

在main.js中添加，别写成 unocss ，中间有个点

import 'uno.css';

成功示例

最终效果，自检

1. 可在标签上写样式
2. 有代码提示信息
3. @apply 生效
4. 无任何报错警告
5. 控制台【默认】有： UnoCSS Inspector: http://localhost:5173/__unocss/

代码效果

界面效果

控制台效果

大功告成！