feat: add unocss configuration for styling

- Introduced a new unocss.config.ts file to define styling configurations. - Configured presets for Weapp and Icons, including custom transform rules. - Set up theme colors and font sizes for consistent styling across the application. - Added transformers for attributify and class handling.
2025-04-04 22:02:44 +08:00 · 2025-04-02 23:34:02 +08:00 · 2025-04-02 23:34:02 +08:00 · 642ee9e637
commit 642ee9e637
parent a00d3a3c2d
10 changed files with 92 additions and 30 deletions
--- a/.npmrc
+++ b/.npmrc
@ -1,6 +1,9 @@
 # 提示:如果你想自动安装对等依赖，在项目根目录下的.npmrc文件中添加"auto-install-peers=true"。
 # 提示:如果你不希望pnpm在对等依赖问题上失败，在项目根目录下的.npmrc文件中添加"strict-peer-dependencies=false"。
-# auto-install-peers=true
+auto-install-peers=true
 strict-peer-dependencies=false
-# registry=https://registry.npmmirror.com
-registry=https://registry.npmjs.org
+registry=https://registry.npmmirror.com
+# registry=https://registry.npmjs.org
+public-hoist-pattern[]=*vue*
+shamefully-hoist=true
+
--- a/README.md
+++ b/README.md
@ -17,7 +17,7 @@
        <img src="https://img.shields.io/badge/-pnpm-F69220?logo=pnpm&logoColor=white" />
    </a>
    <a href="https://unocss.dev/" target="_blank">
-        <img src="https://img.shields.io/badge/-tailwindcss-0f172a?logo=tailwindcss" />
+        <img src="https://img.shields.io/badge/-unocss-0f172a?logo=unocss" />
    </a>
    <a href="https://iconify.design/" target="_blank">
        <img src="https://img.shields.io/badge/-Iconify-1769aa?logo=Iconify" />
@ -55,7 +55,7 @@
 ## 特性

 - **最新技术栈**：使用 Vue3/Vite5/pinia ,TypeScript 等前端前沿技术开发;
- **[Tailwindcss](https://tailwindcss.com/)**: 原子化 CSS, [iconify](https://iconify.design/)图标
+- **[Unocss](https://unocss.dev/)**: 原子化 CSS, [iconify](https://iconify.design/)图标
 - **Eslint**: 规范代码格式,统一编码;
 - **路由拦截**: [uni-mini-router](https://gitee.com/fant-mini/uni-mini-router),类似Vue Router的API和功能,在uni-app中进行路由跳转、传参、拦截等常用操作;
 - **请求拦截**: 使用[alova 请求](https://github.com/alovajs/alova),支持请求和响应拦截等;
@ -152,7 +152,7 @@

 - 安装依赖

-> 若 pnpm 安装或运行失败，请使用 npm 或 yarn 安装依赖
+> 若 pnpm 安装或运行失败，请使用 npm 或 **yarn** 安装依赖

 ```bash
 pnpm install
--- a/build/platform.ts
+++ b/build/platform.ts
@ -3,13 +3,13 @@ import process from 'node:process';
 const currentPlatform = process.env.UNI_PLATFORM;
 const isH5 = currentPlatform === 'h5';
 const isApp = currentPlatform === 'app';
-const WeappTailwindcssDisabled = isH5 || isApp;
 const isMp = !isH5 && !isApp;
+const isWeixinMp = currentPlatform === 'mp-weixin';

 export {
  currentPlatform,
  isApp,
  isH5,
  isMp,
-  WeappTailwindcssDisabled,
+  isWeixinMp,
 };
--- a/build/vitePlugins.ts
+++ b/build/vitePlugins.ts
@ -1,11 +1,10 @@
 import type { PluginOption } from 'vite';
 import uni from '@dcloudio/vite-plugin-uni';
-import tailwindcss from '@tailwindcss/vite';
 import { visualizer } from 'rollup-plugin-visualizer';
+import Unocss from 'unocss/vite';
 import autoImport from 'unplugin-auto-import/vite';
 import viteRestart from 'vite-plugin-restart';
-import { UnifiedViteWeappTailwindcssPlugin as uvtw } from 'weapp-tailwindcss/vite';
-import { isH5, WeappTailwindcssDisabled } from './platform';
+import { isH5 } from './platform';

 interface VitePluginConfig {
  isProd: boolean
@ -15,13 +14,8 @@ export function createVitePlugins({ isProd }: VitePluginConfig): PluginOption[]
  return [
    // @ts-expect-error TODO uni() 会报错：uni is not a function,暂时使用此方式解决
    uni?.default(),
-    tailwindcss(),
-    uvtw({
-      rem2rpx: true,
-      disabled: WeappTailwindcssDisabled,
-      // 使用新的 ast-grep 来处理 js 资源，速度是 babel 的2倍左右
-      // 需要先安装 `@ast-grep/napi`
-      // jsAstTool: 'ast-grep'
+    Unocss({
+      hmrTopLevelAwait: false,
    }),
    autoImport({
      include: [
--- a/package.json
+++ b/package.json
@ -33,7 +33,6 @@
    "build:quickapp-webview-union": "uni build -p quickapp-webview-union",
    "lint:fix": "eslint . --fix",
    "git:hooks": "npx simple-git-hooks",
-    "postinstall": "weapp-tw patch",
    "version:first": "commit-and-tag-version --first-release",
    "version:alpha": "commit-and-tag-version --prerelease alpha",
    "version:beta": "commit-and-tag-version --prerelease beta",
@ -74,10 +73,8 @@
    "@dcloudio/uni-stacktracey": "3.0.0-alpha-4060120250328001",
    "@dcloudio/uni-uts-v1": "3.0.0-alpha-4060120250328001",
    "@dcloudio/vite-plugin-uni": "3.0.0-alpha-4060120250328001",
-    "@egoist/tailwindcss-icons": "^1.9.0",
    "@iconify/json": "^2.2.323",
    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@tailwindcss/vite": "^4.1.1",
    "@types/crypto-js": "^4.2.2",
    "@types/lodash-es": "^4.17.12",
    "@types/node": "^22.13.17",
@ -93,15 +90,15 @@
    "rollup-plugin-visualizer": "^5.14.0",
    "sass": "^1.86.1",
    "simple-git-hooks": "^2.12.1",
-    "tailwindcss": "^4.1.1",
    "tsx": "^4.19.3",
    "typescript": "^5.8.2",
    "uni-mini-router": "^0.1.6",
    "uni-read-pages-vite": "^0.0.6",
+    "unocss": "66.1.0-beta.8",
+    "unocss-preset-weapp": "^66.0.0",
    "unplugin-auto-import": "^19.1.2",
    "vite": "^5.4.16",
-    "vite-plugin-restart": "^0.4.2",
-    "weapp-tailwindcss": "^4.1.2"
+    "vite-plugin-restart": "^0.4.2"
  },
  "simple-git-hooks": {
    "pre-commit": "npx lint-staged",
--- a/src/main.ts
+++ b/src/main.ts
@ -3,6 +3,7 @@ import App from './App.vue';
 import { setupRouter } from './router';
 import { setupStore } from './stores';
 import './styles/main.css';
+import 'uno.css';

 export function createApp() {
  const app = createSSRApp(App);
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@ -9,10 +9,12 @@ const appTitle = 'uniapp-vue3';
 <template>
  <view class="flex flex-col items-center gap-y-2 pt-36">
    <image :src="logo" class="h-8 w-8" alt="" mode="widthFix" />
-    <view class="text-xl font-semibold">
+    <view class="text-xl font-semibold text-red">
      {{ appTitle }}
    </view>
-    <view>当前平台：{{ platform }}</view>
+    <view class="text-red">
+      当前平台：{{ platform }}
+    </view>
  </view>
 </template>

--- a/src/styles/main.css
+++ b/src/styles/main.css
@ -1 +0,0 @@
-@import 'tailwindcss';
--- a/unocss.config.ts
+++ b/unocss.config.ts
@ -0,0 +1,69 @@
+import { defineConfig, presetIcons } from 'unocss';
+import presetWeapp from 'unocss-preset-weapp';
+import { transformerAttributify, transformerClass } from 'unocss-preset-weapp/transformer';
+import { isWeixinMp } from './build/platform';
+
+const prefix = '';
+
+const transformRules = {
+  '.': '-d2e-',
+  '/': '-s2f-',
+  ':': '-c3a-',
+  '%': '-p25-',
+  '!': '-e21-',
+  '#': '-w23-',
+  '(': '-b28-',
+  ')': '-b29-',
+  '[': '-f4b-',
+  ']': '-f5d-',
+  '$': '-r24-',
+  ',': '-r2c-',
+};
+
+export default defineConfig({
+  presets: [
+    // https://github.com/MellowCo/unocss-preset-weapp
+    presetWeapp({
+      prefix,
+      whRpx: false,
+      transform: isWeixinMp as boolean,
+      platform: 'uniapp',
+      transformRules,
+    }) as any,
+    presetIcons({
+      scale: 1.2,
+      warn: true,
+    }),
+  ],
+  shortcuts: [
+    {
+      center: 'flex justify-center items-center',
+    },
+  ],
+  theme: {
+    colors: {
+      primary: '#007AFF',
+      secondary: '#4CD964',
+      danger: '#FF3B30',
+      warning: '#FF9500',
+      info: '#5AC8FA',
+      light: '#F0F0F0',
+      dark: '#1A1A1A',
+    },
+    fontSize: {
+      mini: ['20rpx', '26rpx'],
+    },
+  },
+  transformers: [
+    // options https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify
+    transformerAttributify({
+      classPrefix: prefix,
+      transformRules,
+      nonValuedAttribute: true,
+    }) as any,
+    // options https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
+    transformerClass({
+      transformRules,
+    }),
+  ],
+});
--- a/vite.config.ts
+++ b/vite.config.ts
@ -39,9 +39,6 @@ export default defineConfig(async ({ mode }) => {
          silenceDeprecations: ['legacy-js-api'],
        },
      },
-      // postcss: {
-      //   plugins: postcssPlugins,
-      // },
    },
    plugins: createVitePlugins({ isProd }),
    // 开发服务器配置