在 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 截图

相关推荐
胖鱼罐头6 小时前
Android-尺寸单位换算全解析
前端
不一样的少年_6 小时前
别再无脑装插件了!你的浏览器扩展可能正在“偷家”
前端·安全·浏览器
猪哥帅过吴彦祖6 小时前
第 3 篇:让图形动起来 - WebGL 2D 变换
前端·javascript·webgl
Linsk6 小时前
如何实现TypeScript级的polyfill自动引入
前端·typescript·前端工程化
林希_Rachel_傻希希6 小时前
一文搞懂 JavaScript 数组非破坏性方法:slice、indexOf、join 你都懂了吗?
前端·javascript
_AaronWong6 小时前
分享一个平常用的工具包:前端开发实用工具函数集合
前端·javascript·vue.js
我是天龙_绍6 小时前
vue2数据响应式
前端
猪哥帅过吴彦祖6 小时前
Flutter 系列教程:Dart 语言快速入门 (下)
前端·flutter·ios
西瓜啵啵奶茶6 小时前
Siderbar和Navbar
前端
银安6 小时前
初识前端工程化
前端