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

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

二、基本的安装

node 复制代码
npm install -D unocss

三、vite.config.js

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

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。

安装:

node 复制代码
npm i unocss-preset-weapp -D
js 复制代码
// unocss.config.js

import 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",
      },
    ],
  ],
};

为什么这里要写这么一大段自定义规则,因为这个插件有bug,目前已经反馈了,希望以后可以更新修复,贴上 github issue 截图

相关推荐
mon_star°5 小时前
《浪浪山小妖怪》知识竞赛来袭!测测你是几级影迷?
前端·css·html
Jolyne_5 小时前
H5的Form表单项不够灵活怎么办?来看看这篇通用组件封装思路分享
前端
Ares-Wang5 小时前
JavaScript》》JS》》ES6》》 foreach 、for in 、for of
前端·javascript·es6
coding随想6 小时前
浏览器如何检测用户环境光变化:揭秘Ambient Light Events(环境光事件)
前端
ZSQA6 小时前
Hbuilder X cli项目使用本地的node执行编译。
前端
龙在天6 小时前
介绍一个🔥火热的React 应用状态管理库
前端
字节逆旅6 小时前
CodeBuddy+Figma+MCP,我指挥AI写代码,老板夸我鱼摸得好
前端·人工智能·mcp
满分观察网友z6 小时前
JavaScript 趣味编程:从基础循环到函数式,解锁打印三角形的 N 种姿势
前端
Null1556 小时前
前端ZIP处理:JSZip vs fflate 全方位对比,让你的文件操作效率翻倍!
前端
Mishi6 小时前
前端踩坑日记-sass-resources-loader在Windows上遇到的问题
前端