第一次提交项目

src/App.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <RouterView />
+</template>
+
+<style scoped></style>

src/api/user.ts

@@ -0,0 +1,5 @@
+import { UserType } from "../types/user"
+import request from "../utils/request"
+export const userLogin = (account:UserType) => {
+    return request.post("api/user/auth",account)
+}

src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

src/components/Footer.vue

@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <van-tabbar v-model="active" active-color="#FD7753" router>
+            <van-tabbar-item icon="home-o" name="home" to="/">
+                <span>首页</span>
+            </van-tabbar-item>
+            <van-tabbar-item icon="search" to="/mine">
+                <span>我的</span>
+            </van-tabbar-item>
+
+        </van-tabbar>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const active = ref("mine")
+</script>
+
+<style scoped></style>

src/components/HelloWorld.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Install
+    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
+    in your IDE for a better DX
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

src/config/index.ts

@@ -0,0 +1 @@
+export const BASE = "/" 

src/main.ts

@@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import { initRem } from './utils/rem'
+import router from './router'
+import "virtual:uno.css"
+
+initRem()
+const app = createApp(App)
+app.use(router)
+app.mount('#app')
+

src/router/index.ts

@@ -0,0 +1,21 @@
+import { createRouter, createWebHashHistory } from "vue-router"
+
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes: [{
+        path: "/",
+        component: () => import("../views/main.vue"),
+        children: [{
+            path: "",
+            component: () => import("../views/home.vue")
+        }, {
+            path: "/mine",
+            component: () => import("../views/mine.vue")
+            }, {
+                path: "/login",
+                component: () => import("../views/login.vue")
+            }]
+    }]
+})
+
+export default router

src/types/user.d.ts

@@ -0,0 +1,4 @@
+export interface UserType{
+    id: string,
+    password:string
+}

src/utils/rem.ts

@@ -0,0 +1,22 @@
+// rem等比适配配置文件
+// 基准大小
+// rem等比适配配置文件
+// 基准大小
+// 设置 rem 函数
+function setRem() {
+    const baseSize = 10;
+    // 当前页面宽度相对于 750宽的缩放比例，可根据自己需要修改。
+    const scale = document.documentElement.clientWidth / 750;
+    // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
+    document.documentElement.style.fontSize =
+        baseSize * Math.min(scale, 2) + "px";
+}
+
+export const initRem = () => {
+    // 初始化
+    setRem();
+    // 改变窗口大小时重新设置 rem
+    window.onresize = function () {
+        setRem();
+    };
+};

src/utils/request.ts

@@ -0,0 +1,7 @@
+import axios from "axios"
+import { BASE } from "../config"
+
+const instance = axios.create({
+    baseURL:BASE
+})
+export default instance

src/views/home.vue

@@ -0,0 +1,11 @@
+<template>
+    <div>
+        首页
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped></style>

src/views/login.vue

@@ -0,0 +1,53 @@
+<template>
+    <div class="box">
+    <van-form @submit="onSubmit">
+      <van-cell-group inset>
+        <van-field
+          v-model="account.id"
+          name="id"
+          label="用户名"
+          placeholder="用户名"
+          :rules="[{ required: true, message: '请填写用户名' }]"
+        />
+        <van-field
+          v-model="account.password"
+          type="password"
+          name="password"
+          label="密码"
+          placeholder="密码"
+          :rules="[{ required: true, message: '请填写密码' }]"
+        />
+      </van-cell-group>
+      <div style="margin: 16px;">
+        <van-button round block type="primary" native-type="submit">
+          提交
+        </van-button>
+      </div>
+    </van-form>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive} from 'vue';
+import { UserType } from '../types/user';
+import { userLogin } from '../api/user';
+
+const account = reactive({
+  id: "blahblah",
+  password:"pwd123"
+})
+const onSubmit = (account:UserType) => {
+  console.log('submit', account);
+  userLogin(account).then(res => {
+      console.log("登陆成功",res);
+      
+    })
+};
+
+</script>
+
+<style lang="scss" scoped>
+.box{
+  padding-top: 40px;
+}
+</style>

src/views/main.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+        <RouterView />
+
+        <Footer></Footer>
+    </div>
+</template>
+
+<script setup lang="ts">
+import Footer from '../components/Footer.vue';
+</script>
+
+<style scoped></style>

src/views/mine.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+   个人主页
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />