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

前言

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

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

极速版

1.安装依赖

选择一个运行

csharp 复制代码
npm i unocss -D
yarn add unocss -D
pnpm add unocss -D

2.新建文件

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

新建文件 -> uno.config.js

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. 一行导入上面的文件
html 复制代码
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中添加代码

js 复制代码
import 'uno.css'

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

THE END

详细版

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

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

第一步:安装依赖

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

css 复制代码
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是同级

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的内容,添加两行代码

javascript 复制代码
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/

代码效果

界面效果

控制台效果

大功告成!

相关推荐
该用户已不存在5 分钟前
人人都爱的开发工具,但不一定合适自己
前端·后端
ZzMemory17 分钟前
JavaScript 类数组:披着数组外衣的 “伪装者”?
前端·javascript·面试
梁萌28 分钟前
前端UI组件库
前端·ui
鲸渔32 分钟前
CSS高频属性速查指南
前端·css·css3
小高00732 分钟前
🌐AST(抽象语法树):前端开发的“代码编译器”
前端·javascript·面试
蓝易云33 分钟前
Git stash命令的详细使用说明及案例分析。
前端·git·后端
GIS瞧葩菜35 分钟前
Cesium 中拾取 3DTiles 交点坐标
前端·javascript·cesium
Allen Bright35 分钟前
【JS-7-ajax】AJAX技术:现代Web开发的异步通信核心
前端·javascript·ajax
轻语呢喃40 分钟前
Mock : 没有后端也能玩的虚拟数据
前端·javascript·react.js
Dnui_King44 分钟前
Oracle 在线重定义
java·服务器·前端