不再踩坑,在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/

代码效果

界面效果

控制台效果

大功告成!

相关推荐
秋名山大前端12 分钟前
Chrome GPU 加速优化配置(前端 3D 可视化 / 数字孪生专用)
前端·chrome·3d
今天不要写bug14 分钟前
antv x6实现封装拖拽流程图配置(适用于工单流程、审批流程应用场景)
前端·typescript·vue·流程图
luquinn14 分钟前
实现统一门户登录跳转免登录
开发语言·前端·javascript
用户214118326360233 分钟前
dify案例分享-5分钟搭建智能思维导图系统!Dify + MCP工具实战教程
前端
augenstern41636 分钟前
HTML(面试)
前端
excel42 分钟前
前端常见布局误区:1fr 为什么撑爆了我的容器?
前端
烛阴1 小时前
TypeScript 类型魔法:像遍历对象一样改造你的类型
前端·javascript·typescript
vayy1 小时前
uniapp中 ios端 scroll-view 组件内部子元素z-index失效问题
前端·ios·微信小程序·uni-app
专注API从业者1 小时前
基于 Node.js 的淘宝 API 接口开发:快速构建异步数据采集服务
大数据·前端·数据库·数据挖掘·node.js
前端无冕之王1 小时前
一份兼容多端的HTML邮件模板实践与详解
前端·css·数据库·html