feat: ✨ 整合UnoCSS和添加Tabbar

.editorconfig

@@ -0,0 +1,15 @@
+# http://editorconfig.org
+root = true
+
+# 表示所有文件适用
+[*]
+charset = utf-8 # 设置文件字符集为 utf-8
+end_of_line = lf # 控制换行类型(lf | cr | crlf)
+indent_style = space # 缩进风格（tab | space）
+indent_size = 2 # 缩进大小
+insert_final_newline = true # 始终在文件末尾插入一个新行
+
+# 表示仅 md 文件适用以下规则
+[*.md]
+max_line_length = off # 关闭最大行长度限制
+trim_trailing_whitespace = false # 关闭末尾空格修剪

.vscode/settings.json

@@ -3,8 +3,9 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
 
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
+    "source.fixAll": "explicit",
-    "source.fixAll.stylelint": true
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
   },
   "stylelint.validate": ["css", "scss", "vue", "html"]
 }

eslint.config.mjs

@@ -1,58 +1,32 @@
 import globals from "globals"; // 全局变量配置
-import jsPlugin from "@eslint/js"; // JavaScript 推荐配置
+import pluginJs from "@eslint/js"; // JavaScript 的推荐配置
-import tsPlugin from "@typescript-eslint/eslint-plugin"; // TypeScript 插件
+import tseslint from "typescript-eslint"; // TypeScript 配置
-import tsParser from "@typescript-eslint/parser"; // TypeScript 解析器
+import pluginVue from "eslint-plugin-vue"; // Vue 配置
-import vuePlugin from "eslint-plugin-vue"; // Vue 插件
-import prettierConfig from "eslint-config-prettier"; // 禁用 ESLint 冲突规则
-import pluginPrettier from "eslint-plugin-prettier"; // 引入 Prettier 插件
 
 export default [
-  // 1. 适用于所有文件的配置 (JavaScript、TypeScript、Vue)
+  { files: ["**/*.{js,mjs,cjs,ts,vue}"] }, // 校验的文件类型
-  {
+  { languageOptions: { globals: globals.browser } }, // 设置浏览器环境的全局变量
-    files: ["**/*.{js,mjs,cjs,ts,vue}"], // 校验的文件类型
+  pluginJs.configs.recommended, // JavaScript 推荐配置
-    languageOptions: {
+  ...tseslint.configs.recommended, // TypeScript 推荐配置
-      globals: globals.browser, // 设置浏览器环境的全局变量
+  ...pluginVue.configs["flat/essential"], // Vue 推荐配置
-    },
+  { files: ["**/*.vue"], languageOptions: { parserOptions: { parser: tseslint.parser } } }, // 对 .vue 文件使用 TypeScript 解析器
-  },
 
-  // 2. 插件推荐的配置
+  // 添加忽略的文件或目录
-  jsPlugin.configs.recommended, // JavaScript 推荐配置
-  tsPlugin.configs.recommended, // TypeScript 推荐配置
-  vuePlugin.configs["flat/essential"], // Vue 推荐配置
-
-  // 3. Prettier 插件配置
-  prettierConfig, // 禁用 ESLint 中与 Prettier 冲突的规则
-  pluginPrettier.configs.recommended, // 启用 Prettier 插件
-
-  // 4. 对 .vue 文件的特殊处理，使用 TypeScript 解析器
-  {
-    files: ["**/*.vue"],
-    languageOptions: {
-      parserOptions: {
-        parser: tsParser, // 解析器指定为 TypeScript
-      },
-    },
-  },
-
-  // 5. 忽略不需要校验的文件和目录
   {
     ignores: [
-      "/dist", // 忽略打包生成的文件夹
+      "/dist",
-      "/public", // 忽略 public 文件夹
+      "/public",
-      "/node_modules", // 忽略依赖模块文件夹
+      "/node_modules",
-      "**/*.min.js", // 忽略压缩后的 JS 文件
+      "**/*.min.js",
-      "**/*.config.mjs", // 忽略配置文件
+      "**/*.config.mjs",
-      "**/*.tsbuildinfo", // 忽略 TypeScript 构建信息文件
+      "**/*.tsbuildinfo",
-      "/src/manifest.json", // 忽略 manifest 文件
+      "/src/manifest.json",
     ],
   },
 
-  // 6. 自定义 ESLint 规则配置
+  // 自定义规则
   {
     rules: {
-      // Prettier 规则
-      "prettier/prettier": "error", // // 将 Prettier 的格式化错误标记为 ESLint 错误
-      // 通用规则
       quotes: ["error", "double"], // 强制使用双引号
       "quote-props": ["error", "always"], // 强制对象的属性名使用引号
       semi: ["error", "always"], // 要求使用分号

package.json

@@ -41,7 +41,7 @@
     "build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
     "build:quickapp-webview-union": "uni build -p quickapp-webview-union",
     "type-check": "vue-tsc --noEmit",
-    "lint:eslint": "eslint --fix ./src",
+    "lint:eslint": "eslint --fix  ./src/App.vue",
     "lint:stylelint": "stylelint  \"**/*.{css,scss,vue,html}\" --fix",
     "lint:lint-staged": "lint-staged",
     "prepare": "husky",
@@ -124,6 +124,8 @@
     "stylelint-prettier": "^5.0.2",
     "typescript": "^4.9.4",
     "typescript-eslint": "^8.6.0",
+    "unocss": "^0.62.4",
+    "unocss-preset-weapp": "^0.62.2",
     "vite": "5.2.8",
     "vue-tsc": "^1.0.24"
   }

src/App.vue

@@ -6,13 +6,8 @@ onLaunch(() => {
 onShow(() => {
   console.log("App Hide");
 });
+onHide(() => {
+  console.log("App Hide");
+});
 </script>
-<style lang="scss">
+<style lang="scss" scoped></style>
-.container {
-  position: relative;
-  width: 100%;
-  height: 100vh;
-  padding: 1px;
-  background-color: #f5f5f5;
-}
-</style>

src/main.ts

@@ -1,5 +1,7 @@
 import { createSSRApp } from "vue";
 import App from "./App.vue";
+import "uno.css";
+
 export function createApp() {
   const app = createSSRApp(App);
   return {

src/pages.json

@@ -1,16 +1,53 @@
 {
-	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+  "pages": [
     {
       "path": "pages/index/index",
       "style": {
-				"navigationBarTitleText": "uni-app"
+        "navigationBarTitleText": "首页"
+      }
+    },
+    {
+      "path": "pages/workbench/index",
+      "style": {
+        "navigationBarTitleText": "工作台"
+      }
+    },
+    {
+      "path": "pages/my/index",
+      "style": {
+        "navigationBarTitleText": "我的"
       }
     }
   ],
   "globalStyle": {
     "navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uni-app",
+    "navigationBarTitleText": "vue-uniapp-template",
     "navigationBarBackgroundColor": "#F8F8F8",
     "backgroundColor": "#F8F8F8"
+  },
+  "tabBar": {
+    "color": "#474747",
+    "selectedColor": "#3B8DFF",
+    "backgroundColor": "#F8F8F8",
+    "list": [
+      {
+        "pagePath": "pages/index/index",
+        "text": "首页",
+        "iconPath": "static/tabbar/home.png",
+        "selectedIconPath": "static/tabbar/home-active.png"
+      },
+      {
+        "pagePath": "pages/workbench/index",
+        "text": "工作台",
+        "iconPath": "static/tabbar/workbench.png",
+        "selectedIconPath": "static/tabbar/workbench-active.png"
+      },
+      {
+        "pagePath": "pages/my/index",
+        "text": "我的",
+        "iconPath": "static/tabbar/my.png",
+        "selectedIconPath": "static/tabbar/my-active.png"
+      }
+    ]
   }
 }

src/pages/index/index.vue

@@ -1,25 +1,18 @@
 <template>
-  <view class="content">
+  <view class="flex-center flex-col">
     <image class="logo" src="/static/logo.png" />
-    <view class="text-area">
+    <view>
-      <text class="title">{{ title }}</text>
+      <text class="text-red font-bold text-lg">{{ title }}</text>
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
-const title = ref("Hello");
+const title = ref("Hello YouLai APP");
 </script>
 
 <style>
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
 .logo {
   width: 200rpx;
   height: 200rpx;
@@ -28,14 +21,4 @@ const title = ref("Hello");
   margin-bottom: 50rpx;
   margin-left: auto;
 }
-
-.text-area {
-  display: flex;
-  justify-content: center;
-}
-
-.title {
-  font-size: 36rpx;
-  color: #8f8f94;
-}
 </style>

src/pages/my/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <view class="flex-center flex-col">
+    <text class="text-blue font-bold text-lg">我的</text>
+  </view>
+</template>

src/pages/workbench/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <view class="flex-center flex-col">
+    <text class="text-cyan font-bold text-lg">工作台</text>
+  </view>
+</template>

tsconfig.json

@@ -1,5 +1,4 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.json",
   "compilerOptions": {
     "sourceMap": true,
     "baseUrl": ".",

unocss.config.ts

@@ -0,0 +1,28 @@
+import presetWeapp from "unocss-preset-weapp";
+import { extractorAttributify, transformerClass } from "unocss-preset-weapp/transformer";
+
+const { presetWeappAttributify, transformerAttributify } = extractorAttributify();
+
+export default {
+  presets: [
+    // https://github.com/MellowCo/unocss-preset-weapp
+    presetWeapp(),
+    // attributify autocomplete
+    presetWeappAttributify(),
+  ],
+  shortcuts: [
+    {
+      "border-base": "border border-gray-500_10",
+      "flex-center": "flex justify-center items-center",
+      "flex-x-center": "flex justify-center",
+    },
+  ],
+
+  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(),
+  ],
+};

vite.config.ts

@@ -1,7 +1,15 @@
 import { defineConfig } from "vite";
 import uni from "@dcloudio/vite-plugin-uni";
 
-// https://vitejs.dev/config/
+export default defineConfig(async () => {
-export default defineConfig({
+  const UnoCss = await import("unocss/vite").then((i) => i.default);
-  plugins: [uni()],
+
+  return {
+    plugins: [
+      uni(),
+
+      // https://github.com/unocss/unocss
+      UnoCss(),
+    ],
+  };
 });