2023年7月最新|大屏可视化项目、配置

李桥桉

已于 2023-07-09 12:23:35 修改

阅读量1.3k

点赞数 4

分类专栏：前端 vue 文章标签：前端 vue echarts 可视化

于 2023-06-12 20:20:40 首次发布

本文链接：https://blog.csdn.net/wodegecsdn/article/details/131158708

版权

效果图
在这里插入图片描述

大屏可视化配置

运行环境：VScode
Vue使用

<!-- 从三方网站引入网上的vue。需要网络 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script> -->

<!-- 从vue官网下载vue.js文件，本地引入。不需要网络-->
<script src="./js/vue.js"></script>

（推荐）我们一般采用脚手架来完成开发
（不推荐）谷歌或Edge浏览器搜Vue devtools 点击扩展，获得扩展，搜索安装即可,但是这样开发效率不高。

Vue的脚手架使用

1、选中一个存放项目的文件夹，右键–>【在集成终端中打开】
在这里插入图片描述

2、安装工具类的包一般是全局安装

在终端输入npm i -g @vue/cli

npm i -g @vue/cli

注意当前vue脚手架是webpack打包的；当前 vue2 => vue-cli 5.0.8

3、构建项目

在终端输入【vue create 项目名称(不可以是中文)】,然后回车。
例如：vue create vue01 或 vue create vue02 或 vue create vue03 ...

在这里插入图片描述

（1）选择【> Manually select features 自定义安装】。然后按回车。

（键盘的↑、↓、←、→可移动选择，空格键是确认键。下文同理，不再赘述）
在这里插入图片描述

Vue CLI v5.0.8
? Please pick a preset:  Default ([Vue 3] babel, eslint)  //**默认vue3 babel, eslint**
Default ([Vue 2] babel, eslint)  //**默认vue2 babel, eslint**
> Manually select features   //**自定义安装**

（2）选择下述带（*）的插件

（键盘的↑、↓、←、→可移动选择，空格键是确认键。下文同理，不再赘述）
在这里插入图片描述

Vue CLI v5.0.8
? Please pick a preset: Manually select features? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 (*) Babel> 转化器          //选择插件
 ( ) TypeScript
 (