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

李桥桉

墨衍会员 · AI 创作全网分发码龄7年

关注

VIP免费原创 2023-07-09 12:23:35 1.6k 阅读 AI 写同款· GEO 优化 ›

项目中如何配置数据可视化展现本篇文章主要介绍在项目中如何配置数据可视化展现。阅读详情

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

大屏可视化配置

运行环境：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
 (