当前位置：首页 > news >正文

在 uniapp 里使用 unocss，vue3 + vite 项目

news 2025/8/16 9:40:37

一、创建项目方式：vue-cli

二、基本的安装

npm install -D unocss

三、vite.config.js

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import UnoCSS from 'unocss/vite'
// https://vitejs.dev/config/
export default defineConfig({plugins: [uni(),UnoCSS()],server: {port: 6321,host: '0.0.0.0',}
})

四、main.js

import {createSSRApp
} from "vue";
import App from "./App.vue";import 'virtual:uno.css'
export function createApp() {const app = createSSRApp(App);return {app,};
}

五、unocss.config.js

unocss-preset-weapp 是一个专为微信小程序和 UniApp 设计的 UnoCSS 预设，它内置了 rpx 单位支持，并可以自动处理 rem 转换问题10。
安装：

npm i unocss-preset-weapp -D

// unocss.config.jsimport presetWeapp from "unocss-preset-weapp";import {transformerClass,transformerAttributify,
} from "unocss-preset-weapp/transformer";
import { defineConfig, presetAttributify } from "unocss";
const directionMap = {t: "top",b: "bottom",r: "right",l: "left",x: ["left", "right"], // 水平方向y: ["top", "bottom"], // 垂直方向
};export default {presets: [presetAttributify(),presetWeapp({whRpx: true, // 启用 rpx 单位（默认 true）platform: "uniapp", // 或 'uniapp'designWidth: 750,}),],transformers: [transformerAttributify(), transformerClass()],shortcuts: [],rules: [// 基础间距[/^m-(\d+)$/, ([, d]) => ({ margin: `${d}rpx` })],[/^p-(\d+)$/, ([, d]) => ({ padding: `${d}rpx` })],// 方向性间距（修正版）[/^m([tbrlxy])-(\d+)$/,([, dir, d]) => {const directions = Array.isArray(directionMap[dir])? directionMap[dir]: [directionMap[dir]];return Object.fromEntries(directions.map((k) => [`margin-${k}`, `${d}rpx`]));},],[/^p([tbrlxy])-(\d+)$/,([, dir, d]) => {const directions = Array.isArray(directionMap[dir])? directionMap[dir]: [directionMap[dir]];return Object.fromEntries(directions.map((k) => [`padding-${k}`, `${d}rpx`]));},],// 负值支持[/^-m([tbrlxy])?-(\d+)$/,([, dir, d]) => {if (!dir) return { margin: `-${d}rpx` };const directions = Array.isArray(directionMap[dir])? directionMap[dir]: [directionMap[dir]];return Object.fromEntries(directions.map((k) => [`margin-${k}`, `-${d}rpx`]));},],["center",{position: "absolute",top: "50%",left: "50%",transform: `translate(-50%, -50%)`,},],["shadow1",{"box-shadow": "0px 0px 12px rgba(0, 0, 0, .12)",},],[/^border-#([0-9a-fA-F]+)$/,([_, color]) => ({border: `1px solid #${color}`,}),],["trans",{transition: ".3s",},],],
};