init project

src/App.vue

@@ -0,0 +1,13 @@
+<template>
+    <router-view v-slot="{ Component }">
+      <transition name="fade" mode="out-in">
+        <component :is="Component" />
+      </transition>
+    </router-view>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>

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/HelloWorld.vue

@@ -0,0 +1,43 @@
+<script setup>
+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>
+    Learn more about IDE Support for Vue in the
+    <a
+      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
+      target="_blank"
+      >Vue Docs Scaling up Guide</a
+    >.
+  </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/main.js

@@ -0,0 +1,11 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import './style.css'
+
+const app = createApp(App)
+app.use(router)
+app.use(ElementPlus)
+app.mount('#app')

src/router/index.js

@@ -0,0 +1,38 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '../views/Home.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home,
+    meta: {
+      title: '首页'
+    }
+  },
+  // 404 页面
+  {
+    path: '/:pathMatch(.*)*',
+    name: 'NotFound',
+    component: () => import('../views/NotFound.vue')
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+// 全局前置守卫
+router.beforeEach((to, from, next) => {
+  // 设置页面标题
+  document.title = to.meta.title || '默认标题'
+  next()
+})
+
+// 全局后置钩子
+router.afterEach((to, from) => {
+  window.scrollTo(0, 0)
+})
+
+export default router 

src/utils/request.js

@@ -0,0 +1,92 @@
+import axios from 'axios'
+
+class Request {
+    constructor(config = {}) {
+        // 创建 axios 实例
+        this.instance = axios.create({
+            baseURL: config.baseURL || '',
+            timeout: config.timeout || 5000,
+            headers: config.headers || {}
+        })
+
+        // 请求拦截器
+        this.instance.interceptors.request.use(
+            (config) => {
+                // 在发送请求之前做些什么
+                // 例如：添加 token
+                // const token = localStorage.getItem('token')
+                // if (token) {
+                //     config.headers.Authorization = `Bearer ${token}`
+                // }
+                return config
+            },
+            (error) => {
+                return Promise.reject(error)
+            }
+        )
+
+        // 响应拦截器
+        this.instance.interceptors.response.use(
+            (response) => {
+                // 对响应数据做点什么
+                return response.data
+            },
+            (error) => {
+                // 对响应错误做点什么
+                // if (error.response) {
+                //     switch (error.response.status) {
+                //         case 401:
+                //             // 未授权，可以在这里处理登出逻辑
+                //             break
+                //         case 403:
+                //             // 禁止访问
+                //             break
+                //         case 404:
+                //             // 未找到
+                //             break
+                //         case 500:
+                //             // 服务器错误
+                //             break
+                //     }
+                // }
+                return Promise.reject(error)
+            }
+        )
+    }
+
+    // GET 请求
+    get(url, params = {}, config = {}) {
+        return this.instance.get(url, { params, ...config })
+    }
+
+    // POST 请求
+    post(url, data = {}, config = {}) {
+        return this.instance.post(url, data, config)
+    }
+
+    // PUT 请求
+    put(url, data = {}, config = {}) {
+        return this.instance.put(url, data, config)
+    }
+
+    // DELETE 请求
+    delete(url, config = {}) {
+        return this.instance.delete(url, config)
+    }
+
+    // PATCH 请求
+    patch(url, data = {}, config = {}) {
+        return this.instance.patch(url, data, config)
+    }
+}
+
+// 创建默认实例
+const request = new Request({
+    baseURL: 'http://localhost:3000',
+    timeout: 5000,
+    headers: {
+        'Content-Type': 'application/json'
+    }
+})
+
+export default request

src/views/About.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="about">
+    <h1>关于我们</h1>
+    <p>这是关于页面的内容</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'About',
+  components: {},
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style scoped>
+.about {
+  padding: 20px;
+}
+</style> 

src/views/Home.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="container">
+    Hello World
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+
+onMounted(() => {
+  
+})
+
+</script>
+
+<style scoped>
+.container {
+  height: 100vh;
+  background-color: #f5f7fa;
+}
+
+</style> 

src/views/NotFound.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="not-found">
+    <h1>404</h1>
+    <p>抱歉，页面不存在</p>
+    <router-link to="/">返回首页</router-link>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NotFound'
+}
+</script>
+
+<style scoped>
+.not-found {
+  padding: 40px;
+  text-align: center;
+}
+
+h1 {
+  font-size: 72px;
+  color: #666;
+}
+
+a {
+  color: #42b983;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+</style>