前言
- 本文安装经过多次验证,坑点会重点强调,务必注意
- 有两个版本
- 极速版:只有代码和安装命令,非常快捷,适合已经了解unocss的同学
- 详细版:图文教程,非常详细,适合初次接触的同学
- 为了方便复制粘贴,先看极速版,如有遇到问题,再看详细版
- 总共4步,缺一不可
- js和ts通用,注意修改文件后缀名 uno.config.js | vite.config.ts
- 尽可能的复制粘贴,别手写
如有其他需要的安装教程,可在评论区留言。
极速版
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配置文件
添加两行代码
- 一行导入 UnoCss
- 一行导入上面的文件
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会自动新增一行代码
-
后面的版本号可能不相同,只要出现,就代表成功
效果图如下

第二步:新建文件
- 在package.json的同级目录下新建文件:uno.config.js或uno.config.ts。
- 往新建的文件中添加代码
- 文件名可修改,记得同时修改要导入vite里面的导入名
这个文件的作用
- 代码提示
- 添加自定义的预设
- 没导入不影响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';
成功示例

最终效果,自检
- 可在标签上写样式
- 有代码提示信息
- @apply 生效
- 无任何报错警告
- 控制台【默认】有: UnoCSS Inspector: http://localhost:5173/__unocss/
代码效果
界面效果

控制台效果

大功告成!