From 642ee9e6374651d502fc47bb6596711a93af1e07 Mon Sep 17 00:00:00 2001 From: h_mo <596417202@qq.com> Date: Wed, 2 Apr 2025 23:34:02 +0800 Subject: [PATCH] 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. --- .npmrc | 9 +++-- README.md | 6 ++-- build/platform.ts | 4 +-- build/vitePlugins.ts | 14 +++----- package.json | 9 ++--- src/main.ts | 1 + src/pages/index/index.vue | 6 ++-- src/styles/main.css | 1 - unocss.config.ts | 69 +++++++++++++++++++++++++++++++++++++++ vite.config.ts | 3 -- 10 files changed, 92 insertions(+), 30 deletions(-) create mode 100644 unocss.config.ts diff --git a/.npmrc b/.npmrc index 152f324..7b91ab7 100644 --- 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 + diff --git a/README.md b/README.md index f758b51..ae70fe1 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ - + @@ -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 diff --git a/build/platform.ts b/build/platform.ts index 0282e9b..830f6e3 100644 --- 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, }; diff --git a/build/vitePlugins.ts b/build/vitePlugins.ts index b3e83d3..06af119 100644 --- 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: [ diff --git a/package.json b/package.json index 7b4ee7a..7cd613c 100644 --- 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", diff --git a/src/main.ts b/src/main.ts index eb8233f..0bf2abc 100644 --- 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); diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue index 1caa986..9b5ef9e 100644 --- a/src/pages/index/index.vue +++ b/src/pages/index/index.vue @@ -9,10 +9,12 @@ const appTitle = 'uniapp-vue3'; diff --git a/src/styles/main.css b/src/styles/main.css index d4b5078..e69de29 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -1 +0,0 @@ -@import 'tailwindcss'; diff --git a/unocss.config.ts b/unocss.config.ts new file mode 100644 index 0000000..8c68e7a --- /dev/null +++ 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, + }), + ], +}); diff --git a/vite.config.ts b/vite.config.ts index 240d617..2d72fc7 100644 --- 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 }), // 开发服务器配置