Vue3大屏项目笔记

引入依赖

"@amap/amap-jsapi-loader": "^1.0.1",
"@vuemap/vue-amap": "^2.1.11",
"@vuemap/vue-amap-extra": "^2.1.5",
"@vuemap/vue-amap-loca": "^2.1.2",
"axios": "^1.8.4",
"echarts": "^5.6.0",
"less": "^4.2.2",
"less-loader": "^12.2.0",
"screenfull": "^6.0.2",//是否全屏
"vue": "^3.5.13",
"vue-router": "^4.5.0",
"vue3-seamless-scroll": "^3.0.2"//表格自动循环滚动
"@vitejs/plugin-vue": "^5.2.1",
"naive-ui": "^2.41.0",
"vite": "^6.2.3"

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './modules/router'
import './assets/css/global.css'
import "element-plus/dist/index.css" 
import ElementPlus from "element-plus";
import zhCn from "element-plus/es/locale/lang/zh-cn"//引入中文
​
const app = createApp(App)
app.use(router).mount("#app")
app.use(ElementPlus,{locale:zhCn})

新建Home.vue组件为主页面，新建多个组件作为路由跳转后的子页面

在 modules/router.js 中进行路由配置

• 引入组件时采用component: () => import("../components/Home.vue")的方式引入。

import {
  createRouter,
  createWebHistory,
  createWebHashHistory,
} from "vue-router";
const router = createRouter({
  routes: [
    { path: "/", redirect: "/home" },
    {
      name: "home",
      path: "/home",
      component: () => import("../components/Home.vue"),
      children: [
        { path: "/", redirect: "/gyzb" },
        {
          name: "gyzb",
          path: "/gyzb",
          component: () => import("../views/Gyzb.vue"),
        },
        {
          name: "gydt",
          path: "/gydt",
          component: () => import("../views/Gydt.vue"),
        },
        {
          name: "cyltp",
          path: "/cyltp",
          component: () => import("../views/Cyltp.vue"),
        },
        {
          name: "hyfz",
          path: "/hyfz",
          component: () => import("../views/Hyfz.vue"),
        },
        {
          name: "qyyx",
          path: "/qyyx",
          component: () => import("../views/Qyyx.vue"),
        },
      ],
    },
  ],
  history: createWebHashHistory(),
});
// 导航守卫
// router.beforeEach((to, form, next) => {
//   //to访问路径，from路径来源，next函数表示放行
// });
export default router;

组件Map.vue

在Map.vue组件中引入vuemap/vue-amap，通过axios的post请求获取地图标记点的详细信息。

使用el-amap组件创建高德地图实例，使用el-amap-maker组件在地图上创建标记点，使用el-amap-text组件显示点击标记点后的详细信息。

• el-amap组件重要属性：

  center：地图初始中心位置经纬度

  zoom：地图初始缩放大小

  map-style：地图样式设置，例：map-style="amap://styles/dark"

  show-label：地图标记显示

  ......

• el-amap-maker组件重要属性

  position：标记点在地图上的经纬度

  icon：标记点图标

  ......

• el-amap-text组件重要属性

  position：标记点详细信息在地图上的经纬度

  text-style：标记点详细信息的样式

  visible：是否可视

  text：标记点详细信息的内容（可以是html格式）

各种Echarts图表

• 新建charts文件夹用于存放封装好的echarts图表。

  玫瑰图、环形图、柱形图、折线图、关系图等。

• 图表封装流程：

  template标签中创建渲染图表的盒子，属性 ref="chartRef"

  script标签中按需引入需要使用到的echarts组件，并 echarts.use([引用的组件])

  接着获取图表盒子 const chartRef = ref(null)

  在onMounted阶段初始化图表

  1. const myChart = echarts.init(chartDom);
     

  2. 图表配置项option，在option中配置图表属性和样式。

     const option = {}
     

  3. option && myChart.setOption(option);
     

• 封装好的图表使用

  在需要使用的组件中import图表组件然后直接在模板里使用。

  例：

  import demoChart from 'charts/demoChart.vue'
  <demoChart />
  

图表option属性配置项手册：echarts.apache.org/zh/option.h…

video标签（HTML5内容）属性

muted：静音播放

autoplay：自动播放

loop：循环播放

src：视频路径

屏幕变化自适应全屏，本质是使用计算属性computed动态设置Home.vue主页面的transform:scale(X,Y)属性。

使用了screenfull库，借助 screenfull.isFullscreen 来获取当前浏览器是否处于全屏模式。

表格循环滚动效果

使用了vue3-seamless-scroll插件，例：

<vue3-seamless-scroll hover-stop="true" :list="data2" :hover="hoverVal" :step="stepVal">
    <n-data-table style="width: 590px; margin-left: 5px;" size="10" :columns="columns1" :data="data1" striped />
</vue3-seamless-scroll>