feat: 添加 unocss 依赖来简化样式编写

build/vite/index.ts

@@ -2,6 +2,8 @@ import type { Plugin } from 'vite'
 import colors from 'picocolors'
 import { configUniPlugin } from './uni'
 import { configImportPlugin } from './unplugin'
+import { configUnocssPlugin } from './unocss'
+
 import pkg from '../../package.json'
 
 export function createVitePlugins(viteEnv: ViteEnv) {
@@ -18,6 +20,9 @@ export function createVitePlugins(viteEnv: ViteEnv) {
     // plugins
     const vitePlugins: (Plugin | Plugin[])[] = []
 
+    // unocss
+    vitePlugins.push(configUnocssPlugin())
+
     // unplugin-auto-import
     // unplugin-vue-components
     vitePlugins.push(configImportPlugin())

build/vite/unocss.ts

+import type { Plugin } from 'vite'
+import Unocss from 'unocss/vite'
+
+export function configUnocssPlugin(): Plugin[] {
+    return Unocss()
+}

package.json

@@ -65,18 +65,18 @@
         }
     },
     "dependencies": {
-        "@dcloudio/uni-app": "3.0.0-alpha-3070620230227001",
-        "@dcloudio/uni-app-plus": "3.0.0-alpha-3070620230227001",
-        "@dcloudio/uni-components": "3.0.0-alpha-3070620230227001",
-        "@dcloudio/uni-h5": "3.0.0-alpha-3070620230227001",
-        "@dcloudio/uni-mp-alipay": "3.0.0-alpha-3070620230227001",
-        "@dcloudio/uni-mp-baidu": "3.0.0-alpha-3070620230227001",
-        "@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-3070620230227001",
-        "@dcloudio/uni-mp-lark": "3.0.0-alpha-3070620230227001",
-        "@dcloudio/uni-mp-qq": "3.0.0-alpha-3070620230227001",
-        "@dcloudio/uni-mp-toutiao": "3.0.0-alpha-3070620230227001",
-        "@dcloudio/uni-mp-weixin": "3.0.0-alpha-3070620230227001",
-        "@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3070620230227001",
+        "@dcloudio/uni-app": "3.0.0-alpha-3070720230314001",
+        "@dcloudio/uni-app-plus": "3.0.0-alpha-3070720230314001",
+        "@dcloudio/uni-components": "3.0.0-alpha-3070720230314001",
+        "@dcloudio/uni-h5": "3.0.0-alpha-3070720230314001",
+        "@dcloudio/uni-mp-alipay": "3.0.0-alpha-3070720230314001",
+        "@dcloudio/uni-mp-baidu": "3.0.0-alpha-3070720230314001",
+        "@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-3070720230314001",
+        "@dcloudio/uni-mp-lark": "3.0.0-alpha-3070720230314001",
+        "@dcloudio/uni-mp-qq": "3.0.0-alpha-3070720230314001",
+        "@dcloudio/uni-mp-toutiao": "3.0.0-alpha-3070720230314001",
+        "@dcloudio/uni-mp-weixin": "3.0.0-alpha-3070720230314001",
+        "@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3070720230314001",
         "@dcloudio/uni-ui": "^1.4.26",
         "@vue/runtime-core": "^3.2.47",
         "@vueuse/core": "^9.13.0",
@@ -99,11 +99,11 @@
         "@commitlint/cli": "^17.4.4",
         "@commitlint/config-conventional": "^17.4.4",
         "@dcloudio/types": "^3.3.2",
-        "@dcloudio/uni-automator": "3.0.0-alpha-3070620230227001",
-        "@dcloudio/uni-cli-shared": "3.0.0-alpha-3070620230227001",
+        "@dcloudio/uni-automator": "3.0.0-alpha-3070720230314001",
+        "@dcloudio/uni-cli-shared": "3.0.0-alpha-3070720230314001",
         "@dcloudio/uni-helper-json": "^1.0.13",
-        "@dcloudio/vite-plugin-uni": "3.0.0-alpha-3070620230227001",
-        "@types/lodash-es": "^4.17.6",
+        "@dcloudio/vite-plugin-uni": "3.0.0-alpha-3070720230314001",
+        "@types/lodash-es": "^4.17.7",
         "@types/mockjs": "^1.0.7",
         "@types/node": "^18.15.3",
         "@types/prettier": "^2.7.2",
@@ -136,7 +136,7 @@
         "postcss-less": "^6.0.0",
         "prettier": "^2.8.4",
         "rimraf": "^4.4.0",
-        "sass": "^1.59.2",
+        "sass": "^1.59.3",
         "sort-package-json": "^2.4.1",
         "stylelint": "^14.16.1",
         "stylelint-config-html": "^1.1.0",
@@ -147,9 +147,11 @@
         "stylus": "^0.59.0",
         "terser": "^5.16.6",
         "typescript": "^4.9.5",
+        "unocss": "^0.50.6",
+        "unocss-preset-weapp": "^0.5.1",
         "unplugin-auto-import": "^0.15.1",
         "unplugin-vue-components": "^0.24.1",
-        "vite": "^4.1.4",
+        "vite": "^4.2.0",
         "vue-eslint-parser": "^9.1.0"
     },
     "engines": {

src/main.ts

@@ -8,6 +8,8 @@ import { setupI18n } from '/@/locales'
 
 import fuiConfig from './components/firstui/fui-config'
 
+import 'uno.css'
+
 export function createApp() {
     const app = createSSRApp(App)
 

src/pages/index/index.vue

@@ -44,37 +44,26 @@
 </script>
 
 <template>
-    <view class="content">
+    <view class="content flex-center flex-col">
         <fui-avatar src="/static/logo.png" radius="14" size="large" background="transparent" @click="surprise" />
-        <view class="info">
+        <view class="flex flex-col justify-center mb-3">
             <text class="title">{{ title }}</text>
             <text class="title">{{ $t('app.hello') }}</text>
-            <uni-icons type="hand-up" size="30" :class="['animate__animated', animate]" @click="handUp" />
+            <uni-icons type="hand-up" size="30" :class="['mt-5', 'animate__animated', animate]" @click="handUp" />
         </view>
         <fui-footer isFixed>
             <template #text>
                 <view v-if="version" @click="checkUpgrade(true)">V{{ version }}</view>
-                <view class="mt-14">壹润科技 版权所有</view>
-                <view class="mt-14">Copyright © 2021-{{ year }} Yiring. All Ringhts Reserved</view>
+                <view class="mt-1">壹润科技 版权所有</view>
+                <view class="mt-1">Copyright © 2021-{{ year }} Yiring. All Ringhts Reserved</view>
             </template>
         </fui-footer>
     </view>
 </template>
 
-<style>
+<style lang="less" scoped>
     .content {
         height: calc(100vh - 100rpx);
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .info {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        margin: 30rpx 0;
     }
 
     .title {
@@ -83,8 +72,4 @@
         font-size: 36rpx;
         color: #8f8f94;
     }
-
-    .mt-14 {
-        margin-top: 8rpx;
-    }
 </style>

unocss.config.ts

+import { defineConfig } from 'unocss'
+import presetWeapp from 'unocss-preset-weapp'
+import { transformerAttributify, transformerClass } from 'unocss-preset-weapp/transformer'
+
+export default defineConfig({
+    presets: [
+        // https://github.com/MellowCo/unocss-preset-weapp
+        presetWeapp(),
+    ],
+    shortcuts: [
+        {
+            'border-base': 'border border-[#eee]',
+            'flex-center': 'flex justify-center items-center',
+            'text-c1': 'text-[#181818]',
+            'text-c2': 'text-[#333333]',
+            'text-c3': 'text-[#B2B2B2]',
+            'text-c4': 'text-[#CCCCCC]',
+            bg: 'bg-[#f6f7fb]',
+        },
+    ],
+    transformers: [
+        // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify
+        transformerAttributify(),
+
+        // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
+        transformerClass(),
+    ],
+})