Tue Mar 4 20:19:00 CST 2025 inscode

src/router/index.js

 import { createRouter, createWebHistory } from 'vue-router';
 import Home from '../views/Home.vue'; 
 import VoucherNormal from '../views/VoucherNormal/index.vue';
+import ExportFile from '../views/ExportFile/index.vue';
+import Experience from '../views/Experience/index.vue';
 
 const routes = [
   {
@@ -13,6 +15,11 @@ const routes = [
     name: 'VoucherNormal',
     component: VoucherNormal,
   },
+  {
+    path: '/Experience',
+    name: 'Experience',
+    component: Experience,
+  },
 ];
 
 const router = createRouter({

src/utils/index.js

+export function downloadFile (fileUrl, fileName) {
+    const eleLink = document.createElement('a')
+    eleLink.download = fileName
+    eleLink.style.display = 'none'
+    eleLink.href = fileUrl
+    document.body.appendChild(eleLink)
+    eleLink.click()
+    document.body.removeChild(eleLink)
+}
\ No newline at end of file

src/views/Experience/alias.md

+# 简化路径引用的方式
+
+## 理解别名引用 (@) 的使用
+在 Vue 项目中，@ 通常被配置为指向项目的 src 目录。这是一种简化路径引用的方式，可以让你避免使用相对路径（如 ../../），从而使代码更简洁和易读。
\ No newline at end of file

src/views/ExportFile/index.vue

+<template>
+    <div class="export-file-main">
+        <Button block color="linear-gradient(to right, #ff6034, #ee0a24)">导出</Button>
+    </div>
+</template>
+
+<script setup>
+import { Button } from 'vant';
+import { downloadFile } from '@/utils/index'
+
+const exportFile = ()=>{
+  console.log('linda-文件导出');
+  downloadFile('http://192.168.1.23:8080/file/202401041612466880.xlsx', '导出文件.xlsx')
+}
+</script>
+<style lang="less" scoped>
+.export-file-main {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+</style>
\ No newline at end of file

src/views/Home.vue

 <template>
   <Cell title="省钱中心" is-link to="/voucherNormal" />
+  <Cell title="导出" is-link to="/ExportFile" />
+  <Cell title="汲取经验" is-link to="/Experience" />
 </template>
 <script setup>
 import { Cell } from 'vant'

vite.config.js

 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import path from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -7,5 +8,10 @@ export default defineConfig({
     host: true,
     allowedHosts: true
   },
-  plugins: [vue()]
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src') //
+    }
+  }
 })