青远生态内部项目

项目概述

这是青远生态的内部项目，基于 Vue 3 + TypeScript + Vite 构建。主要提供以下功能：

1. 页面更新提示 - 当应用页面有新版本更新时，提供用户通知和更新引导
2. Mapbox 地图渲染功能 - 集成 Mapbox 地图渲染组件，提供地理数据可视化服务

技术栈

• Vue 3
• TypeScript
• Vite

该项目使用 Vue 3 的<script setup>语法，更多信息请参考script setup 文档。

安装与使用

npm install qy-vue-plugins

导入组件

// 导入单个组件
import MapView from "qy-vue-plugins/mapbox/MapView";
import mapLayer from "qy-vue-plugins/mapbox/components/mapLayer";

// 或者导入整个模块
import * as MapComponents from "qy-vue-plugins/mapbox/components";

TypeScript 配置

如果在 TypeScript 项目中使用时遇到模块解析问题（例如"找不到模块或其相应的类型声明"错误），请尝试以下解决方案：

1. 更新 tsconfig.json 中的模块解析策略

   确保使用 "node16"、"nodenext" 或 "bundler" 作为 moduleResolution 选项：

   {
     "compilerOptions": {
       "moduleResolution": "node16" // 或者 "nodenext" 或 "bundler"
       // 其他配置...
     }
   }

2. 添加路径映射

   或者，将以下路径映射添加到你的 tsconfig.json 配置中：

   {
     "compilerOptions": {
       "paths": {
         "qy-vue-plugins/*": ["./node_modules/qy-vue-plugins/dist/types/*"]
       }
     }
   }

3. 直接从 dist 目录导入类型

   作为临时解决方案，也可以直接从 dist 目录导入类型：

   // 导入组件
   import MapView from "qy-vue-plugins/mapbox/MapView";
   // 显式导入类型
   import type { MapViewProps } from "qy-vue-plugins/dist/types/mapbox/MapView.vue";

功能详情

页面更新提示

当应用有新版本发布时，该功能会提示用户刷新页面以获取最新内容，避免用户使用过时的页面版本。

Mapbox 地图渲染

提供基于 Mapbox GL JS 的地图渲染组件，支持：

• 地理数据展示
• 自定义图层
• 交互式地图控件
• 地理数据分析功能

开发指南

更多关于项目设置和 IDE 支持的信息，请参考Vue TypeScript 指南。