初始化仓库

src/pages/about/about.vue

@@ -0,0 +1,84 @@
+<route lang="jsonc" type="page">
+{
+  "layout": "tabbar",
+  "style": {
+    "navigationBarTitleText": "关于"
+  }
+}
+</route>
+
+<script lang="ts" setup>
+import RequestComp from './components/request.vue'
+
+// 奇怪：同样的代码放在 vue 里面不会校验到错误，放在 .ts 文件里面会校验到错误
+// const testOxlint = (name: string) => {
+//   console.log('oxlint')
+// }
+// testOxlint('oxlint')
+console.log('about')
+
+function gotoAlova() {
+  uni.navigateTo({
+    url: '/pages/about/alova',
+  })
+}
+function gotoVueQuery() {
+  uni.navigateTo({
+    url: '/pages/about/vue-query',
+  })
+}
+function gotoSubPage() {
+  uni.navigateTo({
+    url: '/pages-sub/demo/index',
+  })
+}
+// uniLayout里面的变量通过 expose 暴露出来后可以在 onReady 钩子获取到（onLoad 钩子不行）
+const uniLayout = ref()
+onLoad(() => {
+  console.log('onLoad:', uniLayout.value) // onLoad: undefined
+})
+onReady(() => {
+  console.log('onReady:', uniLayout.value) // onReady: Proxy(Object)
+  console.log('onReady:', uniLayout.value.testUniLayoutExposedData) // onReady: testUniLayoutExposedData
+})
+</script>
+
+<template>
+  <view>
+    <view class="mt-8 text-center text-xl text-gray-400">
+      组件使用、请求调用、unocss
+    </view>
+    <RequestComp />
+    <view class="mb-6 h-1px bg-#eee" />
+    <view class="text-center">
+      <button type="primary" size="mini" class="w-160px" @click="gotoAlova">
+        前往 alova 示例页面
+      </button>
+    </view>
+    <view class="text-center">
+      <button type="primary" size="mini" class="w-160px" @click="gotoVueQuery">
+        vue-query 示例页面
+      </button>
+    </view>
+    <view class="text-center">
+      <button type="primary" size="mini" class="w-160px" @click="gotoSubPage">
+        前往分包页面
+      </button>
+    </view>
+    <view class="mt-6 text-center text-sm">
+      <view class="inline-block w-80% text-gray-400">
+        为了方便脚手架动态生成不同UI模板，本页的按钮统一使用UI库无关的原生button
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.test-css {
+  // 16rpx=>0.5rem
+  padding-bottom: 16rpx;
+  // mt-4=>1rem=>16px;
+  margin-top: 16px;
+  text-align: center;
+}
+</style>

src/pages/about/alova.vue

@@ -0,0 +1,56 @@
+<route lang="jsonc" type="page">
+{
+  "layout": "default",
+  "style": {
+    "navigationBarTitleText": "Alova 请求演示"
+  }
+}
+</route>
+
+<script lang="ts" setup>
+import { useRequest } from 'alova/client'
+import { foo } from '@/api/foo-alova'
+
+const initialData = undefined
+
+const { loading, data, send } = useRequest(foo, {
+  initialData,
+  immediate: true,
+})
+console.log(data)
+function reset() {
+  data.value = initialData
+}
+</script>
+
+<template>
+  <view class="p-6 text-center">
+    <button type="primary" size="mini" class="my-6 w-160px" @click="send">
+      发送请求
+    </button>
+    <view class="h-16">
+      <view v-if="loading">
+        loading...
+      </view>
+      <block v-else>
+        <view class="text-xl">
+          请求数据如下
+        </view>
+        <view class="text-green leading-8">
+          {{ JSON.stringify(data) }}
+        </view>
+      </block>
+
+      <view class="text-red">
+        {{ data?.id }}
+      </view>
+    </view>
+    <button type="default" size="mini" class="my-6 w-160px" @click="reset">
+      重置数据
+    </button>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+//
+</style>

src/pages/about/components/request.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import type { IFooItem } from '@/api/foo'
+import { getFooAPI } from '@/api/foo'
+
+// const initialData = {
+//   name: 'initialData',
+//   id: '1234',
+// }
+const initialData = undefined
+
+const { loading, error, data, run } = useRequest<IFooItem>(() => getFooAPI('菲鸽'), {
+  immediate: true,
+  initialData,
+})
+
+function reset() {
+  data.value = initialData
+}
+</script>
+
+<template>
+  <view class="p-6 text-center">
+    <view class="my-2">
+      pages 里面的 vue 文件会扫描成页面，将自动添加到 pages.json 里面。
+    </view>
+    <view class="my-2 text-green-400">
+      但是 pages/components 里面的 vue 不会。
+    </view>
+
+    <view class="my-4 text-center">
+      <button type="primary" size="mini" class="w-160px" @click="run">
+        发送请求
+      </button>
+    </view>
+    <view class="h-16">
+      <view v-if="loading">
+        loading...
+      </view>
+      <block v-else>
+        <view class="text-xl">
+          请求数据如下
+        </view>
+        <view class="text-green leading-8">
+          {{ JSON.stringify(data) }}
+        </view>
+      </block>
+    </view>
+    <view class="my-4 text-center">
+      <button type="warn" size="mini" class="w-160px" :disabled="!data" @click="reset">
+        重置数据
+      </button>
+    </view>
+  </view>
+</template>

src/pages/about/vue-query.vue

@@ -0,0 +1,53 @@
+<route lang="jsonc" type="page">
+{
+  "layout": "default",
+  "style": {
+    "navigationBarTitleText": "Vue Query 请求演示"
+  }
+}
+</route>
+
+<script lang="ts" setup>
+import { useQuery } from '@tanstack/vue-query'
+import { foo } from '@/api/foo'
+import { getFooQueryOptions } from '@/api/foo-vue-query'
+
+// 简单使用
+onShow(async () => {
+  const res = await foo()
+  console.log('res: ', res)
+})
+
+// vue-query 版
+const {
+  data,
+  error,
+  isLoading: loading,
+  refetch: send,
+} = useQuery(getFooQueryOptions('菲鸽-vue-query'))
+</script>
+
+<template>
+  <view class="p-6 text-center">
+    <button type="primary" size="mini" class="my-6 w-160px" @click="send">
+      发送请求
+    </button>
+    <view class="h-16">
+      <view v-if="loading">
+        loading...
+      </view>
+      <block v-else>
+        <view class="text-xl">
+          请求数据如下
+        </view>
+        <view class="text-green leading-8">
+          {{ JSON.stringify(data) }}
+        </view>
+      </block>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+//
+</style>