当前位置：首页 > news >正文

[福游宝——AI智能旅游信息查询平台]全栈AI项目-阶段一：Vite前端开荒

news 来源：原创 2025/9/12 22:15:36

简言

本项目旨在构建一个以AI智能体为核心的福建省旅游信息查询系统，聚焦景点推荐、路线规划、交通天气查询等功能，为游客提供智能化、便捷化的旅游信息服务。项目采用前后端分离架构，前端基于Vite + TypeScript + Vue3技术栈，搭配轻量级移动端UI库Vant实现高效开发与响应式布局；后端采用SpringBoot框架构建RESTful API，通过MySQL进行数据存储与管理，将集成DeepSeekAI实现自然语言处理与智能推荐能力。

项目地址

gitCode平台：https://gitcode.com/Var_ya/varWisdomModelBody

脚手架明细表

前端：

技术	版本	官网地址
Vite	^6.2.0	https://cn.vitejs.dev/
node.js	^22.14.0	https://nodejs.org/zh-cn
npm	^10.9.2	https://www.npmjs.com/
vue-router	^4.5.0	https://router.vuejs.org/zh/
Vue3	^3.5.13	https://vuejs.org/
Vant	^4.9.18	https://vant-ui.github.io/vant/#/zh-CN
postcss	^8.5.3	https://github.com/cuth/postcss-pxtorem
postcss-pxtorem	^6.1.0
待补充…

当前进度预览

已完成首页布局（gitcode平台代码进度，博客将会在后续更新~）

一、gitcode平台创建项目

提示：创建项目的详细步骤请看：《2025 Windows安装 Git 教程｜GitCode平台代码托管实战演示》

本项目是公开的，项目地址：https://gitcode.com/Var_ya/varWisdomModelBody

二、搭建Vite项目

Vite官网：https://cn.vitejs.dev/

前提条件

在搭建Vite项目前，需要用户有node环境。
windows命令行查询node命令：node -v
如果用户没有node环境，请阅读文章：Node.js v22.14.0 多平台安装指南：Windows、Linux 和 macOS 详细教程

npm安装

执行命令

npm create vite@latest

建立项目名

我对web前端项目命名为： varWisdomModelBodyWeb

注意：可以不命名，默认项目名为：vite-project

建立包名

本项目包名为：cn.varin

模板选择

Vue

前端语言选择

TypeScript

由此：Vite项目已经建立完成了

三、启动Vite项目

安装醒目依赖

npm install

启动项目

npm run dev

默认页面：App.vue

四、页面背景初始化

禁用全局样式表
1. 到main.ts页面中，注释掉对应部分：style.css

首页初始化

<!--修改页面：index.html -->
<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,viewport-fit=cover" /><title>Var Wisdom</title></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body></html>
<style>*{margin:0;padding:0;}p{font-size: 16px;display: block;padding: 0;margin: 0;}img{display: block;border:none;}body{/* 背景渐变色设置，从右上角到左下角 */background: linear-gradient(to bottom left,#a0c9ff,#f2f5fa);background-repeat: no-repeat;background-size: 100% ,100%;background-attachment: fixed;  }</style>

效果预览

五、vue-router引入使用

官网地址：https://router.vuejs.org/zh/

使用教程可参考：https://router.vuejs.org/zh/guide/

引入依赖

npm install vue-router@4

使用路由

创建router实例

步骤一：在src目录下建立router文件夹后

步骤二:在router文件夹中创建index.ts文件

配置路由表

注意：src为根路径

页面名	路由路径	页面路径	备注
home	/	src\page\home\index.vue	聊天页面
goodsDetails	/goodsDetails	src\page\goodsDetails\index.vue	商品详情页
complainPage	/complainPage	src\page\complainPage\index.vue	投诉页面

编写路由代码

import {createWebHashHistory, createRouter } from 'vue-router'const routes = [// 聊天界面{path: '/',name: "home",component: () => import("../page/home/index.vue")},// 商品详情界面{path: '/goodsDetails',name: "goodsDetails",component: () => import("../page/goodsDetails/index.vue")},// 投诉界面{path: '/complainPage',name: "complainPage",component: () => import("../page/complainPage/index.vue")},]// 创建路由实例const router = createRouter({history: createWebHashHistory(),routes,
})
// 导出
export default router

main.ts进入router

import { createApp } from 'vue'// import './style.css'
import App from './App.vue'// 引入路由实例
import router from"./router/index"
const app = createApp(App)
// 注入路由
app.use(router)app.mount('#app')

App.vue添加动态加载组件标签

<template><!-- 动态加载组件 -->
<RouterView></RouterView>
</template><script setup lang="ts">
</script>
<style scoped></style>

结语：以上已经完成路由配置

六、自定义路由设置别名

配置alias路径别名
1. 在根目录的vite.config.ts下配置alias路径别名
2. 完整代码：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'import {resolve} from "path" // 用来处理文件路径
// https://vite.dev/config/
export default defineConfig({plugins: [vue()],// 添加别名resolve:{alias:{"@":resolve(__dirname,"./src")// 引入文件路径时使用@/默认从src开始}}
})

添加compilerOptions（中文：编译器选项）的配置
1. 在**tsconfig.app.json**的compilerOptions下配置paths，目的是告诉编译器，我用一个符号来代替文件地址了~

{"extends": "@vue/tsconfig/tsconfig.dom.json","compilerOptions": {"tsBuildInfoFile": "@/node_modules/.tmp/tsconfig.app.tsbuildinfo",/* Linting */"strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"noFallthroughCasesInSwitch": true,"noUncheckedSideEffectImports": true,// 设置，告诉TS找文件从哪里找"baseUrl": "./",// 定义路径映射// 当用户用键盘输入@时，让编辑器知道从src下开始找"paths": {"@/*":["src/*"]}},"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],}

修改router目录下index.ts文件路径编写格式

import { createWebHashHistory, createRouter } from 'vue-router'const routes  = [// 聊天界面{path: '/',name: "home",component: () => import("@/page/home/index.vue")},// 商品详情界面{path: '/goodsDetails',name: "goodsDetails",component: () => import("@/page/goodsDetails/index.vue"),},// 投诉界面{path: '/complainPage',name: "complainPage",component: () => import("@/page/complainPage/index.vue")},]// 创建路由实例const router = createRouter({history: createWebHashHistory(),routes,
})
// 导出
export default router

注意点：

如果在设置完成后，遇到了设置完成后，路径别名爆红的情况，请参考文章：

https://blog.csdn.net/weixin_45597682/article/details/142663210?spm=1001.2014.3001.5506

七、Vant移动端组件引入

官网地址：https://vant-ui.github.io/vant/#/zh-CN

引入依赖

# Vue 3 项目，安装最新版 Vant
npm i vant# Vue 2 项目，安装 Vant 2
npm i vant@latest-v2

引入单组件实例

man.ts注册组件

import { createApp } from 'vue'// import './style.css'
import App from './App.vue'// 引入路由实例
import router from"./router/index"
const app = createApp(App)
// 注入路由
app.use(router)// 1. 引入你需要的组件
import { Button } from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';// 3. 注册你需要的组件
app.use(Button);app.mount('#app')

使用组件
1. 任意在一个vue页面中添加

<template><!-- 按钮--><van-button type="primary">主要按钮</van-button>
<van-button type="success">成功按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="danger">危险按钮</van-button>
<van-button type="warning">警告按钮</van-button>
</template>
<script lang="ts"></script><style lang="less" scoped></style>

八、像素转化自适应设备

postcss插件引入

安装插件

npm install postcss postcss-pxtorem --save-dev

配置属性
1. vite.config.ts文件配置

import { defineConfig } from 'vite'
import postcssPxtorem from "postcss-pxtorem"
import vue from '@vitejs/plugin-vue'import {resolve} from "path" // 用来处理文件路径
// https://vite.dev/config/
export default defineConfig({plugins: [vue()],// 添加别名resolve:{alias:{"@":resolve(__dirname,"./src")// 引入文件路径时使用@/默认从src开始}},css:{postcss:{plugins:[postcssPxtorem({rootValue: 39, // 以iphone12 为例   unitPrecision: 5,// 转rem精确到小数点位数propList: ['*'] // 需要转换的属性})]}}})

amfe-flexible插件引入

安装

npm i -S amfe-flexible

main.ts 引入依赖

import { createApp } from 'vue'// import './style.css'
import App from './App.vue'
// 动态改变字体大小
import "amfe-flexible"// 引入路由实例
import router from"./router/index"
const app = createApp(App)
// 注入路由
app.use(router)// 1. 引入你需要的组件
import { Button } from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';// 3. 注册你需要的组件
app.use(Button);app.mount('#app')

简言

项目地址

脚手架明细表

当前进度预览

一、gitcode平台创建项目

二、搭建Vite项目

前提条件

npm安装

三、启动Vite项目

四、页面背景初始化

五、vue-router引入使用

引入依赖

使用路由

六、自定义路由设置别名

七、Vant移动端组件引入

引入依赖

引入单组件实例

八、像素转化自适应设备

postcss插件引入

amfe-flexible插件引入

效果

相关文章：