初始化仓库

src/pages/index/index.vue

@@ -0,0 +1,122 @@
+<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
+<route lang="jsonc" type="home">
+{
+  "layout": "tabbar",
+  "style": {
+    // 'custom' 表示开启自定义导航栏，默认 'default'
+    "navigationStyle": "custom",
+    "navigationBarTitleText": "首页"
+  }
+}
+</route>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'Home',
+})
+
+// 获取屏幕边界到安全区域距离
+let safeAreaInsets
+let systemInfo
+
+// #ifdef MP-WEIXIN
+// 微信小程序使用新的API
+systemInfo = uni.getWindowInfo()
+safeAreaInsets = systemInfo.safeArea
+  ? {
+      top: systemInfo.safeArea.top,
+      right: systemInfo.windowWidth - systemInfo.safeArea.right,
+      bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
+      left: systemInfo.safeArea.left,
+    }
+  : null
+// #endif
+
+// #ifndef MP-WEIXIN
+// 其他平台继续使用uni API
+systemInfo = uni.getSystemInfoSync()
+safeAreaInsets = systemInfo.safeAreaInsets
+// #endif
+const author = ref('菲鸽')
+const description = ref(
+  'unibest 是一个集成了多种工具和技术的 uniapp 开发模板，由 uniapp + Vue3 + Ts + Vite5 + UnoCss + VSCode 构建，模板具有代码提示、自动格式化、统一配置、代码片段等功能，并内置了许多常用的基本组件和基本功能，让你编写 uniapp 拥有 best 体验。',
+)
+// 测试 uni API 自动引入
+onLoad(() => {
+  console.log('项目作者:', author.value)
+})
+
+console.log('index')
+</script>
+
+<template>
+  <view class="bg-white px-4 pt-2" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
+    <view class="mt-10">
+      <image src="/static/logo.svg" alt="" class="mx-auto block h-28 w-28" />
+    </view>
+    <view class="mt-4 text-center text-4xl text-[#d14328]">
+      unibest
+    </view>
+    <view class="mb-8 mt-2 text-center text-2xl">
+      最好用的 uniapp 开发模板
+    </view>
+
+    <view class="m-auto mb-2 max-w-100 text-justify indent text-4">
+      {{ description }}
+    </view>
+    <view class="mt-4 text-center">
+      作者：
+      <text class="text-green-500">
+        菲鸽
+      </text>
+    </view>
+    <view class="mt-4 text-center">
+      官网地址：
+      <text class="text-green-500">
+        https://unibest.tech
+      </text>
+    </view>
+
+    <!-- #ifdef H5 -->
+    <view class="mt-4 text-center">
+      <a href="https://unibest.tech/base/3-plugin" target="_blank" class="text-green-500">
+        新手请看必看章节1：
+      </a>
+    </view>
+    <!-- #endif -->
+    <!-- #ifdef MP-WEIXIN -->
+    <view class="mt-4 text-center">
+      新手请看必看章节1：
+      <text class="text-green-500">
+        https://unibest.tech/base/3-plugin
+      </text>
+    </view>
+    <!-- #endif -->
+    <!-- #ifdef H5 -->
+    <view class="mt-4 text-center">
+      <a href="https://unibest.tech/base/14-faq" target="_blank" class="text-green-500">
+        新手请看必看章节2：
+      </a>
+    </view>
+    <!-- #endif -->
+    <!-- #ifdef MP-WEIXIN -->
+    <view class="mt-4 text-center">
+      新手请看必看章节2：
+      <text class="text-green-500">
+        https://unibest.tech/base/14-faq
+      </text>
+    </view>
+    <!-- #endif -->
+
+    <view class="mt-4 text-center">
+      <wd-button type="primary">
+        UI组件按钮
+      </wd-button>
+    </view>
+    <view class="mt-4 text-center">
+      UI组件官网：<text class="text-green-500">
+        https://wot-design-uni.cn
+      </text>
+    </view>
+  </view>
+</template>