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

发布于：2025-04-13 ⋅ 阅读:(22) ⋅ 点赞:(0)

简言

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

项目地址

脚手架明细表

前端：

技术 版本 官网地址
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
待补充…

当前进度预览

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

一、gitcode平台创建项目

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

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

二、搭建Vite项目

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

前提条件

npm安装

  1. 执行命令
npm create vite@latest

  1. 建立项目名

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

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

  1. 建立包名

本项目包名为：cn.varin

  1. 模板选择

Vue

  1. 前端语言选择

TypeScript

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

三、启动Vite项目

  1. 安装醒目依赖
npm install

  1. 启动项目

npm run dev

默认页面：App.vue

四、页面背景初始化

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

  1. 首页初始化
<!--修改页面：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>
  1. 效果预览

五、vue-router引入使用

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

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

引入依赖

npm install vue-router@4

使用路由

  1. 创建router实例

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

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

  1. 配置路由表

注意：src为根路径

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

  1. 编写路由代码
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
  1. 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')
  1. App.vue添加动态加载组件标签
<template>
   <!-- 动态加载组件 -->
<RouterView></RouterView>
</template>

<script setup lang="ts">
</script>
<style scoped>

</style>

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

六、自定义路由设置别名

  1. 配置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开始
    }
  }
})
  1. 添加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"],






}
  1. 修改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
  1. 注意点：

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

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

引入单组件实例

  1. 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. 使用组件
    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插件引入

  1. 安装插件
npm install postcss postcss-pxtorem --save-dev

  1. 配置属性
    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插件引入

  1. 安装
npm i -S amfe-flexible
  1. 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')

效果

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布