vue可视化大屏设计

从今天开始，将在这里从头开始介绍可视化大屏的设计

开发工具选用WebStorm

新建一个vue工程，app.vue代码像下面的样子：

<template>
  <div id="app">
    <router-view v-slot="{ Component }">
        <component :is="Component"></component>
    </router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style>
* {
  margin: 0;
  padding:0
}
#app, body, html {
  height:100%;
}
#app {
  background: #202023;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif !important;
  -webkit-font-smoothing:antialiased
}
::-webkit-scrollbar {
  width: 7px;
  height:7px
}
::-webkit-scrollbar, ::-webkit-scrollbar-track-piece {
  background-color:transparent
}
::-webkit-scrollbar {
  width: 5px;
  height:5px
}
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color:rgba(144, 146, 152, .3)
}
</style>

 main.js像下面的样子，引入了elementplus，echarts等

import { createApp } from 'vue'
import App from './App.vue'
//引入全局样式表
import "@/assets/css/app.scss"
import router from "@/assets/js/router/router";
//引入animate动画
import "animate.css";
//引入element-plus
import ElementPlus from "element-plus";
//引入element-plus相关样式
import "element-plus/dist/index.css";
//本地化
import zhCn from "element-plus/es/locale/lang/zh-cn.mjs";
//引入element plus图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
//引入echarts
import * as echarts from 'echarts';

import '@/assets/js/utils/es6'

const app = createApp(App);

app.use(router);

//全局注册图标，并将图标变为使用小驼峰加横杠
const toIconLine = (name) => {
    return 'el-icon-' + name.replace(/(A-Z)/g, '-$1').toLocaleLowerCase()
}
for (let i in ElementPlusIconsVue) {
    let name = toIconLine(i);
    app.component(name, (ElementPlusIconsVue)[i])
}

app.use(ElementPlus, {
    locale: zhCn,
});

app.config.globalProperties.$echarts = echarts;

app.mount('#app')