开始
📓 最近打算出一个前端可视化数据大屏的系列专栏，这次将很全面的教大家设计可视化大屏，从开始到打包结束，其中，包括如何设计框架，如何封装axios，等等，本次使用的数据均为mock数据。与正常使用一致。本文会从开始的创建vu23项目到最后的项目打包，本篇共计3节。
1.安装脚手架
📓 首先确保电脑上安装node.js，node安装简单，去官网下载安装包一件安装即可，当安装了node.js后，我们新建一个文件夹，用vscode打开文件夹，打开终端，安装脚手架。
npm install -g @vue/cli
📓脚手架安装一次即可，后续在创建vue项目就不需要在重新安装脚手架
2，创建vue2项目
📓打开vscode 在终端输入 ，myapp是我们的项目名称
vue create myapp
📓 选择我们需要的内容，这里需要的是vue-router，其他的按自己的需需求选择
编辑
3.下载我们需要的第三方库
📓这里我们需要的是，moke,datav,echarts,axios
📓在控制台下载即可
📓下载mock
npm install mockjs --save-dev
📓下载datav
npm install @jiaminghi/data-view --save
📓下载axios
npm install axios --save
📓下载echarts
npm install echarts --save
4.在页面上使用datav
📓在src文件夹下面，有个app.vue的入口文件，我们将这个文件处理下，将一些无语的代码删除，保留如下代码
编辑
📓将src--views下的vue文件全部删除
编辑
📓在views创建一个新的文件 IndexData.vue，并在里面写入如下代码
<template> <div> {{ a }} </div> </template> <script> export default{ data(){ return{ a:"123" } } } </script> <style> </style>
📓在src--router文件夹下 将该组件绑定路由
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', name: 'home', component: ()=>import("../views/IndexData.vue") }, ] const router = new VueRouter({ routes }) export default router
📓然后启动服务，当页面上出现123时间，就代表着配置成功
5.配置第一个datav组件
5.1 📓在src下的main.js文件里面，完全引入我们的datav组件
import Vue from 'vue' import App from './App.vue' import router from './router' import dataV from '@jiaminghi/data-view' //导入datav框架 Vue.config.productionTip = false Vue.use(dataV) //添加到vue原型里去 new Vue({ router, render: h => h(App) }).$mount('#app')
5.2 📓在页面上使用我们的datav组件
<template> <div> <!-- 引入组件 --> <dv-water-level-pond :config="config" style="width:150px;height:200px" /> </div> </template> <script> export default{ data(){ return{ config:{ //传入组件数据 data:[66] } } } } </script> <style> </style>
5.3 📓当出现下方的效果时，就代表着使用成功
编辑
6，设计主体框架
📓我打算在indexdata.vue里作为组件的容器，在容器里设计骨架，将其他的内容作为骨架填入，代码如下
<template> <!-- 全屏容器 --> <dv-full-screen-container style="background-color: black;"> <dv-border-box-11 title="香蕉麻花皮演示"> <!-- 我这里将页面分为上中下三块，这是第一块 --> <div class="box"> <!-- 在里面在分成左中右3块 --> <div class="box1"> <dv-border-box-12>dv-border-box-1</dv-border-box-12> </div> <div class="box1"> <dv-border-box-2>dv-border-box-1</dv-border-box-2> </div> <div class="box1"> <dv-border-box-10>dv-border-box-1</dv-border-box-10> </div> </div> <!-- 第二块 --> <div class="box"> <!-- 在里面在分成左中右3块 --> <div class="box1"> <dv-border-box-9>dv-border-box-1</dv-border-box-9> </div> <div class="box1"> <dv-border-box-8>dv-border-box-1</dv-border-box-8> </div> <div class="box1"> <dv-border-box-7>dv-border-box-1</dv-border-box-7> </div> </div> <!-- 第三块 --> <div class="box"> <!-- 在里面在分成左中右3块 --> <div class="box1"> <dv-border-box-2>dv-border-box-1</dv-border-box-2> </div> <div class="box1"> <dv-border-box-3>dv-border-box-1</dv-border-box-3> </div> <div class="box1"> <dv-border-box-8>dv-border-box-1</dv-border-box-8> </div> </div> </dv-border-box-11> </dv-full-screen-container> </template> <script> export default { data() { return { config: { //传入组件数据 } } } } </script> <style scoped> .box1 { width: 610px; height: 310px; } .box{ display: flex; justify-content: space-between; width: 98%; margin: auto; padding-top: 40px; } </style>
📓效果如下
📓 后续我们只需要往骨架里面填充echarts或者是其他需要展示的代码就行
📓在提一嘴 datav需要将padding和margin的初始值设置为0，不然会出现样式问题
📓在commponents里新建文件夹index.css,在文件夹里写入内容
📓在manin.js里引入这个css文件即可
📓下期我们讲如何添加内容和使用moke来模拟数据
📓拜拜
