init

.env.development

+# 开发环境变量
+VITE_APP_BASE_URL='/api'
+# 开发环境请求的地址
+VITE_APP_API_SERVER='http://codercba.com:9002'
\ No newline at end of file

.env.production

+# 生产环境变量
+VITE_APP_BASE_URL='/api'
+# 开发环境请求的地址
+VITE_APP_API_SERVER=''

.env.test

+# 测试环境变量
+VITE_APP_BASE_URL='/test'
+# 开发环境请求的地址
+VITE_APP_API_SERVER=''

.eslintrc-auto-import.json

+{
+  "globals": {
+    "EffectScope": true,
+    "computed": true,
+    "createApp": true,
+    "customRef": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "effectScope": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
+    "inject": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "provide": true,
+    "reactive": true,
+    "readonly": true,
+    "ref": true,
+    "resolveComponent": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "toRaw": true,
+    "toRef": true,
+    "toRefs": true,
+    "triggerRef": true,
+    "unref": true,
+    "useAttrs": true,
+    "useCssModule": true,
+    "useCssVars": true,
+    "useRoute": true,
+    "useRouter": true,
+    "useSlots": true,
+    "watch": true,
+    "watchEffect": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true
+  }
+}
\ No newline at end of file

.eslintrc.cjs

+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier',
+    './.eslintrc-auto-import.json'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  },
+  // 校验关闭
+  rules: {
+    // 关闭定义vue文件名称
+    'vue/multi-word-component-names': 'off'
+  }
+}

.gitignore

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.prettierrc.json

+{
+  "semi": false,
+  "vueIndentScriptAndStyle": true,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "endOfLine": "auto"
+}

.vscode/extensions.json

+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}

README.md

+# volunteer-mobile
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```

auto-imports.d.ts

+// Generated by 'unplugin-auto-import'
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}

components.d.ts

+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    VanButton: typeof import('vant/es')['Button']
+  }
+}

env.d.ts

+/// <reference types="vite/client" />
+interface ImportMetaEnv {
+  VITE_APP_BASE_URL: string
+  VITE_APP_API_SERVER: string
+}

index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package.json

+{
+  "name": "volunteer-mobile",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "vue-tsc --noEmit && vite build",
+    "test": "vite build --mode test",
+    "preview": "vite preview --port 4173",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "axios": "^0.27.2",
+    "normalize.css": "^8.0.1",
+    "pinia": "^2.0.21",
+    "vant": "^3.6.2",
+    "vue": "^3.2.38",
+    "vue-router": "^4.1.5"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.1.4",
+    "@types/node": "^16.11.56",
+    "@vitejs/plugin-vue": "^3.0.3",
+    "@vitejs/plugin-vue-jsx": "^2.0.1",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-typescript": "^11.0.0",
+    "@vue/tsconfig": "^0.1.3",
+    "eslint": "^8.22.0",
+    "eslint-plugin-vue": "^9.3.0",
+    "npm-run-all": "^4.1.5",
+    "postcss-px-to-viewport-8-plugin": "^1.1.5",
+    "prettier": "^2.7.1",
+    "sass": "^1.54.9",
+    "typescript": "~4.7.4",
+    "unplugin-auto-import": "^0.11.2",
+    "unplugin-vue-components": "^0.22.7",
+    "vite": "^3.0.9",
+    "vue-tsc": "^0.40.7"
+  }
+}

postcss.config.js

+/* eslint-env node */
+module.exports = {
+  plugins: {
+    'postcss-px-to-viewport-8-plugin': {
+      unitToConvert: 'px', // 需要转换的单位，默认为"px"
+      viewportWidth: 375,
+      selectorBlackList: ['favor']
+    }
+  }
+}

src/App.vue

+<script setup lang="ts"></script>
+
+<template>
+  <router-view />
+</template>
+
+<style scoped lang="scss">
+  .btn {
+    font-size: 24px;
+  }
+</style>

src/api/index.ts

+import { server } from '@/utils/axios'
+
+// 测试用例
+export function serverAxios(val: { keywords: string }) {
+  return server<{ hasMore: boolean; songCount: number; songs: unknown[] }>(
+    'search',
+    'GET',
+    { ...val }
+  )
+}

src/assets/styles/common.scss

+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+form,
+fieldset,
+input,
+textarea,
+p,
+blockquote,
+th,
+td {
+  padding: 0;
+  margin: 0;
+}
+body{
+  font-size: 16px;
+}
+@font-face {
+  font-family: 'XinYiGuang';
+  src: url('../common/typeface.ttf');
+  font-weight: medium;
+  font-style: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+fieldset,
+img {
+  border: 0;
+}
+
+address,
+caption,
+cite,
+code,
+dfn,
+em,
+strong,
+th,
+var {
+  font-weight: normal;
+  font-style: normal;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+caption,
+th {
+  text-align: left;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: normal;
+  font-size: 100%;
+}
+
+q:before,
+q:after {
+  content: '';
+}
+
+abbr,
+acronym {
+  border: 0;
+}
+
+/* flex布局 */
+.flex {
+  display: flex;
+}
+
+/* 纵向排列 */
+.flex_c {
+  display: flex;
+  flex-direction: column;
+}
+
+/* 水平居中 */
+.j_center {
+  display: flex;
+  justify-content: center;
+}
+
+/* 两端对齐 */
+.j_btween {
+  display: flex;
+  justify-content: space-between;
+}
+
+.j_around {
+  display: flex;
+  justify-content: space-around;
+}
+
+.j_evenly {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+/* 垂直居中 */
+.a_center {
+  display: flex;
+  align-items: center;
+}
+
+/* 靠底 */
+.a_start {
+  display: flex;
+  align-items: flex-start;
+}
+
+/* 靠底 */
+.a_end {
+  display: flex;
+  align-items: flex-end;
+}
+
+.j_end {
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* 字内容绝对居中 */
+.j_a_center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.j_a_btween {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.flex_c_r {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+/* flex:1 */
+.flex_full {
+  flex: 1;
+}
+
+/* flex_wrap */
+.flex_wrap {
+  flex-wrap: wrap;
+}
+
+.border-btm {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.ellipsis-one {
+  word-break: break-all;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.ellipsis-one-left {
+  word-break: break-all;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  direction: rtl;
+  text-align: left;
+}
+
+.ellipsis {
+  word-break: break-all;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.ellipsis-three {
+  word-break: break-all;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
+.font-b {
+  font-weight: bold;
+}
+
+.black {
+  color: #303133;
+}
+
+.gray {
+  color: #909399;
+}
+
+.blue {
+  color: #409eff;
+}
+
+.grayblack {
+  color: #606266;
+}
+
+.white {
+  color: white;
+}
+
+.red {
+  color: #f56c6c;
+}
+
+.orange {
+  color: #e6a23c;
+}
+
+.b3b3b3 {
+  color: #b3b3b3;
+}
+
+.authBtn {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+}
+
+/* iphoneX适配 */
+.ipXsafearea {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+/* iphoneX适配 */
+.ipXsafearea-margin {
+  margin-bottom: env(safe-area-inset-bottom);
+}
+
+.hoverview {
+  opacity: 0.7;
+}
+
+/* 动画 */
+@keyframes fadein {
+  0% {
+    background: rgba(0, 0, 0, 0);
+  }
+
+  100% {
+    background: rgba(0, 0, 0, 0.4);
+  }
+}
+
+.full_parent {
+  width: 100%;
+  height: 100%;
+}
+
+.underline {
+  text-decoration: underline;
+}
+
+.text_center {
+  text-align: center;
+}
+
+.unset-margin {
+  margin: unset !important;
+}
+
+.unset-padding {
+  padding: unset !important;
+}
+
+.mask {
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  top: 0px;
+  background: rgba(0, 0, 0, 0.8);
+  overflow: hidden;
+  z-index: 9999;
+  text-align: center;
+}
+
+.text-nowrap {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+

src/main.ts

+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import App from './App.vue'
+import router from './router'
+
+import 'normalize.css'
+import '@/assets/styles/common.scss'
+import 'vant/es/toast/style'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')

src/router/index.ts

+import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    redirect: '/volunteer'
+  },
+  {
+    path: '/volunteer',
+    meta: { title: '首页' },
+    component: () =>
+      import(/* webpackChunkName: "Home" */ '@/views/homePage/home-page.vue')
+  },
+  {
+    path: '/404',
+    meta: { title: '404' },
+    component: () => import(/* webpackChunkName: "404" */ '../views/404.vue')
+  },
+  {
+    path: '/:pathMatch(.*)',
+    redirect: '/404'
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes
+})
+
+export default router

src/stores/Info.ts

+import { defineStore } from 'pinia'
+
+export const useInfoStore = defineStore('counter', {
+  state: () => ({
+    userinfo: {
+      token: ''
+    }
+  }),
+  getters: {},
+  actions: {}
+})

src/utils/axios/index.ts

+import { useInfoStore } from '@/stores/Info'
+import axios from 'axios'
+import type {
+  AxiosResponse,
+  Method,
+  AxiosError,
+  AxiosRequestConfig
+} from 'axios'
+
+import { showMessage } from './status'
+import type { IResponse } from './type'
+
+axios.defaults.timeout = 5000
+axios.defaults.headers.post['Access-Control-Allow-Origin-Type'] = '*'
+
+const baseApi = import.meta.env.VITE_APP_BASE_URL
+const URL = import.meta.env.VITE_APP_API_SERVER
+// 方便后续上传图片
+export const baseURL = (URL as string) + baseApi
+
+const axiosInstance = axios.create({
+  baseURL: baseApi + ''
+})
+
+axiosInstance.interceptors.response.use(
+  (response: AxiosResponse) => {
+    const res = response.data
+    if (res.code === 200) {
+      return res
+    } else {
+      showMessage(res.code)
+      return Promise.reject(res)
+    }
+  },
+  (error: AxiosError) => {
+    const { response } = error
+    if (response) {
+      // 请求已发出，但是不在2xx的范围
+      showMessage(response.status)
+      return Promise.reject(response.data)
+    }
+    showMessage('网络连接异常,请稍后再试!')
+  }
+)
+
+// 后续白名单
+const whiteList = ['']
+axiosInstance.interceptors.request.use(
+  (config: AxiosRequestConfig) => {
+    const user = useInfoStore()
+    const { token } = user.userinfo
+    if (token && config.headers && !whiteList.includes(config.url as string)) {
+      config.headers.token = token
+    }
+    return config
+  },
+  (error: AxiosError) => {
+    return Promise.reject(error)
+  }
+)
+
+/**
+ * @param {String} - url  请求地址
+ * @param {String} - method  请求类型
+ * @param {Object} - submitData  对象类型，提交数据
+ */
+export const server = <T = any>(
+  url: string,
+  method: Method,
+  submitData?: unknown
+) => {
+  return axiosInstance.request<T, IResponse<T>>({
+    url,
+    method,
+    [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
+  })
+}
+
+export default axiosInstance

src/utils/axios/status.ts

+export const showMessage = (status: number | string): string => {
+  let message = ''
+  switch (status) {
+    case 400:
+      message = '请求错误(400)'
+      break
+    case 401:
+      message = '未授权，请重新登录(401)'
+      break
+    case 403:
+      message = '拒绝访问(403)'
+      break
+    case 404:
+      message = '请求出错(404)'
+      break
+    case 408:
+      message = '请求超时(408)'
+      break
+    case 500:
+      message = '服务器错误(500)'
+      break
+    case 501:
+      message = '服务未实现(501)'
+      break
+    case 502:
+      message = '网络错误(502)'
+      break
+    case 503:
+      message = '服务不可用(503)'
+      break
+    case 504:
+      message = '网络超时(504)'
+      break
+    case 505:
+      message = 'HTTP版本不受支持(505)'
+      break
+    default:
+      message = `连接出错(${status})!`
+  }
+  return `${message}，请检查网络或联系管理员！`
+}

src/utils/axios/type.ts

+// 根据后台统一返回的格式进行 类型
+export interface IResponse<T = any> {
+  code: number | string
+  data: T
+  message: string
+  status: string | number
+  result: T
+}

src/views/404.vue

+<template>
+  <div class="wscn-http404">
+    <div class="pic-404">
+      <img class="pic-404__parent" :src="four" alt="404" />
+      <img class="pic-404__child left" :src="four_cloud" alt="404" />
+      <img class="pic-404__child mid" :src="four_cloud" alt="404" />
+      <img class="pic-404__child right" :src="four_cloud" alt="404" />
+    </div>
+    <div class="bullshit">
+      <div class="bullshit__oops">页面不存在!</div>
+      <div class="bullshit__info">
+        请检查您输入的网址是否正确，或单击下面的按钮返回主页
+      </div>
+      <van-button @click="go" type="primary" round>跳转首页</van-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import four from '@/images/404.png'
+  import four_cloud from '@/images/404_cloud.png'
+  const router = useRouter()
+  const go = () => {
+    router.push('/')
+  }
+</script>
+
+<style lang="scss" scoped>
+  .wscn-http404 {
+    position: relative;
+    overflow: hidden;
+    .pic-404 {
+      position: relative;
+      float: left;
+      width: 600px;
+      overflow: hidden;
+
+      &__parent {
+        width: 85%;
+      }
+      &__child {
+        position: absolute;
+        &.left {
+          width: 80px;
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+          animation-name: cloudLeft;
+          animation-duration: 2s;
+          animation-timing-function: linear;
+          animation-fill-mode: forwards;
+          animation-delay: 1s;
+        }
+        &.mid {
+          width: 46px;
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+          animation-name: cloudMid;
+          animation-duration: 2s;
+          animation-timing-function: linear;
+          animation-fill-mode: forwards;
+          animation-delay: 1.2s;
+        }
+        &.right {
+          width: 62px;
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+          animation-name: cloudRight;
+          animation-duration: 2s;
+          animation-timing-function: linear;
+          animation-fill-mode: forwards;
+          animation-delay: 1s;
+        }
+        @keyframes cloudLeft {
+          0% {
+            top: 17px;
+            left: 220px;
+            opacity: 0;
+          }
+          20% {
+            top: 33px;
+            left: 188px;
+            opacity: 1;
+          }
+          80% {
+            top: 81px;
+            left: 92px;
+            opacity: 1;
+          }
+          100% {
+            top: 97px;
+            left: 60px;
+            opacity: 0;
+          }
+        }
+        @keyframes cloudMid {
+          0% {
+            top: 10px;
+            left: 420px;
+            opacity: 0;
+          }
+          20% {
+            top: 40px;
+            left: 360px;
+            opacity: 1;
+          }
+          70% {
+            top: 130px;
+            left: 180px;
+            opacity: 1;
+          }
+          100% {
+            top: 160px;
+            left: 120px;
+            opacity: 0;
+          }
+        }
+        @keyframes cloudRight {
+          0% {
+            top: 100px;
+            left: 500px;
+            opacity: 0;
+          }
+          20% {
+            top: 120px;
+            left: 460px;
+            opacity: 1;
+          }
+          80% {
+            top: 180px;
+            left: 340px;
+            opacity: 1;
+          }
+          100% {
+            top: 200px;
+            left: 300px;
+            opacity: 0;
+          }
+        }
+      }
+    }
+    .bullshit {
+      position: relative;
+      width: 190px;
+      padding: 30px 0;
+      overflow: hidden;
+      margin: 0 auto;
+      text-align: center;
+      &__oops {
+        font-size: 32px;
+        font-weight: bold;
+        line-height: 40px;
+        color: #1482f0;
+        opacity: 0;
+        margin-bottom: 20px;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-fill-mode: forwards;
+      }
+      &__headline {
+        font-size: 20px;
+        line-height: 24px;
+        color: #222;
+        font-weight: bold;
+        opacity: 0;
+        margin-bottom: 10px;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-delay: 0.1s;
+        animation-fill-mode: forwards;
+      }
+      &__info {
+        font-size: 13px;
+        line-height: 21px;
+        color: grey;
+        opacity: 0;
+        margin-bottom: 30px;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-delay: 0.2s;
+        animation-fill-mode: forwards;
+      }
+      &__return-home {
+        display: block;
+        float: left;
+        width: 110px;
+        height: 36px;
+        background: #1482f0;
+        border-radius: 100px;
+        text-align: center;
+        color: #ffffff;
+        opacity: 0;
+        font-size: 14px;
+        line-height: 36px;
+        cursor: pointer;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-delay: 0.3s;
+        animation-fill-mode: forwards;
+      }
+      @keyframes slideUp {
+        0% {
+          transform: translateY(60px);
+          opacity: 0;
+        }
+        100% {
+          transform: translateY(0);
+          opacity: 1;
+        }
+      }
+    }
+  }
+</style>

src/views/homePage/home-page.vue

+<template>
+  <van-button type="primary" size="large" @click="handleBtn">按钮</van-button>
+</template>
+
+<script setup lang="ts">
+  import { Toast } from 'vant'
+  import { serverAxios } from '@/api'
+
+  const test = ref('测试')
+  const reult = ref<any[]>([])
+
+  const handleBtn = () => {
+    Toast({
+      message: '点击了我'
+    })
+  }
+
+  onMounted(async () => {
+    const res = await serverAxios({ keywords: '海阔天空' })
+    console.log(res.code)
+    reult.value = res.result.songs
+  })
+</script>
+
+<style scoped lang="scss">
+  .test {
+    font-size: 20px;
+  }
+</style>

tsconfig.config.json

+{
+  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
+  "compilerOptions": {
+    "composite": true,
+    "types": ["node"]
+  }
+}

tsconfig.json

+{
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "include": [
+    "env.d.ts",
+    "src/**/*",
+    "src/**/*.vue",
+    "./components.d.ts",
+    "./auto-imports.d.ts"
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "jsx": "preserve"
+  },
+
+  "references": [
+    {
+      "path": "./tsconfig.config.json"
+    }
+  ]
+}

vite.config.ts

+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig, loadEnv, type ConfigEnv } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+
+import AutoImport from 'unplugin-auto-import/vite'
+
+import Components from 'unplugin-vue-components/vite'
+import { VantResolver } from 'unplugin-vue-components/resolvers'
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }: ConfigEnv) => {
+  // 当前环境
+  const env = loadEnv(mode, process.cwd())
+  return {
+    plugins: [
+      vue(),
+      vueJsx(),
+      AutoImport({
+        imports: ['vue', 'vue-router'],
+        eslintrc: {
+          enabled: true,
+          filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
+          globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
+        }
+      }),
+      Components({
+        resolvers: [VantResolver()]
+      })
+    ],
+    base: './', // 设置打包路径
+    server: {
+      port: 9528,
+      open: true,
+      cors: true,
+      proxy: {
+        '/api': {
+          target: env.VITE_APP_API_SERVER,
+          changeOrigin: true,
+          secure: false,
+          rewrite: (path) => path.replace(/^\/api/, '')
+        }
+      }
+    },
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url))
+      }
+    }
+  }
+})