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

使用Vue实现数据可视化大屏功能(一)

news 2025/7/13 3:20:18

导语
现在在很多的工程项目中，都有有关于数据大屏相关的监控内容，这里我们就来看一下如何用Vue来搭建一个数据可视化大屏应用。

创建项目

使用WebStorm工具创建一个Vue的项目。如下图所示，配置好vue的脚手架工具和nodejs的运行环境，等待项目执行创建完成。
当然这里也可以采用命令行脚本构建的方式。

在这里插入图片描述
根据提示选择对应的编译版本进行创建

创建项目完成，如下图所示。

项目创建完成之后运行项目。效果如下

安装依赖

引入vue-router

在创建完成的项目中运行如下的命令，安装vue-router，注意执行第一个命令的时候，如果是Vue2的话会报错，需要去使用指定的版本号的方式来进行安装。

npm install vue-router --save
npm install vue-router@"3.1.5"

引入sass-loader

npm install --save-dev sass-loader
npm install --save-dev sass

注意直接安装这两个组件依赖的时候会因为版本问题而找不到对应的组件，需要进行如下的操作

npm uninstall sass-loader node-sass
npm install sass-loader@8.0.2 sass@1.26.5  --save-dev

这两个命令是将原有的sass的依赖剔除，然后引入新的sass依赖。

修改项目

第一步、编辑App.vue 的页面

根据Vue的原理这里我们引入了路由页面，并且将路由组件加入到主页面中。

<template><div id="app"><router-view/></div>
</template><style lang="scss">body {margin: 0;}#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
</style>

第二步、编写路由JS文件

在文件路径中创建router的文件夹并且创建router.js的路由配置文件内容如下，引入了Vue组件，引入了VueRouter组件，并且添加默认的路由配置。

import Vue from 'vue'
import VueRouter from "vue-router";
Vue.use(VueRouter)
const routes = [{path:'/',name:'index',component:()=>import('../views/index')}
]
const router = new VueRouter({mode:"history",routes
})
export default router

第三步、创建主页面路由文件

创建一个views的视图文件夹，添加index.vue的主视图文件，内容如下。

<template><div>这个页面有东西了</div>
</template><script>export default {name: "index"}
</script><style scoped></style>

第四步、在主文件中配置路由规则

import Vue from 'vue'
import App from './App.vue'
import router from "@/router";Vue.config.productionTip = falsenew Vue({router,render: h => h(App),
}).$mount('#app')