大数据-数据可视化-环境部署vue+echarts+显示案例

文章目录

    • 一、安装node.js
      • 1 打开火狐浏览器,下载Node.js
      • 2 进行解压
      • 3 配置环境变量
      • 4 配置生效
    • 二、安装vue脚手架
      • 1 下载vue脚手架,耐心等待。
    • 三、创建vue项目并启动
      • 1 创建
      • 2 启动
    • 四、下载echarts.js与axios.js到本地。
    • 五、图表显示demo

【以下所有操作均在centos上进行】

一、安装node.js

1 打开火狐浏览器,下载Node.js

在node.js中选择需要的版本下载,本人下载v16.60,下载网址https://nodejs.org/download/release/v16.20.2/
在这里插入图片描述

2 进行解压

在这里插入图片描述
查看解压内容:
在这里插入图片描述

3 配置环境变量

切换到root角色

su root
vi /etc/profile

添加安装路径

export PATH=$PATH:【Node.js中bin的路径】(如下图)

在这里插入图片描述

4 配置生效

source /etc/profile

二、安装vue脚手架

1 下载vue脚手架,耐心等待。

在这里插入图片描述
安装完成时显示如下:
在这里插入图片描述

安装时遇到错误 sill idealTree buildDeps:
在这里插入图片描述
解决方案:更换镜像源

npm config set registry http://registry.npm.taobao.org/

三、创建vue项目并启动

1 创建

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/2804779.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

【高德地图】Android高德地图控件交互详细介绍

📖第5章 与地图控件交互 ✅控件交互🧊缩放按钮🧊指南针🧊定位按钮🧊地图Logo ✅手势交互🧊缩放手势🧊滑动手势🧊旋转手势🧊倾斜手势🧊指定屏幕中心点的手势操…

啊丢的刷题记录手册

1.洛谷题P1923 求第k小的数 题目描述 输入 n&#xff08;1≤n<5000000 且 n 为奇数&#xff09;个数字ai​&#xff08;1≤ai​<109&#xff09;&#xff0c;输出这些数字的第 k 小的数。最小的数是第 0 小。 请尽量不要使用 nth_element 来写本题&#xff0c;因为本题…

Spring及工厂模式概述

文章目录 Spring 身世什么是 Spring什么是设计模式工厂设计模式什么是工厂设计模式简单的工厂设计模式通用的工厂设计 总结 在 Spring 框架出现之前&#xff0c;Java 开发者使用的主要是传统的 Java EE&#xff08;Java Enterprise Edition&#xff09;平台。Java EE 是一套用于…

JavaWeb——004Maven SpringBootWeb入门

一、Maven 1、什么是maven&#xff1f; 2、Maven的作用是什么&#xff1f;&#xff08;3种&#xff09; 1.1、方便的依赖管理 依赖管理&#xff1a;有了Maven&#xff0c;我们就不用再手动导入Jar包了&#xff0c;我们只需要在配置文件当中&#xff0c;简单描述一下项目所需要…

windows11本地深度学习环境搭建Anacond,keras,tensorflow,pytorch, jupyter notebook

前言 工欲善其事&#xff0c;必先利其器。 第一步 安装Anaconda 下载地址&#xff1a; https://www.anaconda.com/download 路径默认 这里都勾选上 然后会卡在这里&#xff0c;卡很久&#xff0c;不用管&#xff0c;等着就行 第二步 配置环境 conda env list 列出所有…

fpga_直方图均衡

直方图均衡是一种用于图像增强和对比度调整的图像处理技术。它通过重新分配图像中像素的灰度级分布&#xff0c;使得图像的直方图变得更加均衡&#xff0c;从而增强图像的视觉效果。 一 直方图 直方图源于柱状图 二 数字图像与灰度直方图 如图所示&#xff0c;灰度直方图是读…

详解AP3216C(三合一sensor: 光照、距离、照射强度)驱动开发

目录 概述 1 认识AP3216C 1.1 AP3216C特性 1.2 AP3216C内部结构 1.3 AP3216C 硬件电路 1.4 AP3216C工作时序 1.4.1 I2C 写数据协议 1.4.2 I2C 读数据协议 1.5 重要的寄存器 1.5.1 系统配置寄存器 1.5.2 和中断相关寄存器 1.5.3 IR数据寄存器 1.5.4 ALS 数据寄存器 …

HTML+CSS:动态搜索框

效果演示 这段代码实现了一个简单的搜索栏效果。页面背景为从天蓝色到深蓝色的渐变色&#xff0c;搜索栏包括一个圆形背景的搜索图标和一个输入框。当用户点击搜索图标时&#xff0c;输入框会从搜索图标的位置滑出&#xff0c;显示一个输入框和一个清除按钮。用户可以在输入框中…

西门子200SMART SB AE01的正确用法

西门子200SMART SB AE01&#xff0c;就是1路模拟量输入的SB板。信号板直接安装在 SR/ST CPU 本体正面&#xff0c;无需占用电控柜空间&#xff0c;安装、拆卸方便快捷。有些小型的系统如果只有1路模拟量输入&#xff0c;或者模块配置中恰好缺少1路模拟量输入&#xff0c;就可以…

33.云原生之Istio管理任何七层流量

云原生专栏大纲 文章目录 Istio存在的问题Aeraki介绍Aeraki 的解决方案支持的协议支持的特性 安装AerakiAeraki教程采用 ServiceEntry 的 Demo 应用使用 Dubbo2Istio 对接 Dubbo 注册表 的 Demo 应用&#xff08;Interface 级流量治理&#xff09; Service Mesh 中有大量的七层…

智能光耦合器的特点概述

在不断发展的技术领域&#xff0c;光耦合器在确保无缝通信和可靠信号传输方面的作用变得越来越关键。本文深入探讨了光耦合器的复杂性&#xff0c;阐明了其重要性&#xff0c;探索了进步&#xff0c;并解决了光耦合器技术人员面临的常见问题。 光耦合器基础知识&#xff1a; 光…

力扣hot100题解(python版1-6题)

1、两数之和 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现。 你可以按…

SpringBoot和SpringCloud的区别,使用微服务的好处和缺点

SpringBoot是一个用于快速开发单个Spring应用程序的框架&#xff0c;通过提供默认配置和约定大于配置的方式&#xff0c;快速搭建基于Spring的应用。让程序员更专注于业务逻辑的编写&#xff0c;不需要过多关注配置细节。可以看成是一种快速搭建房子的工具包&#xff0c;不用从…

List集合之UML、特点、遍历方式、迭代器原理、泛型、装拆箱及ArrayList、LinkedList和Vector的区别

目录 ​编辑 一、什么是UML 二、集合框架 三、List集合 1.特点 2.遍历方式 3.删除 4.优化 四、迭代器原理 五、泛型 六、装拆箱 七、ArrayList、LinkedList和Vector的区别 ArrayList和Vector的区别 LinkedList和Vector的区别 一、什么是UML UML&#xff08;Unif…

C# winfroms使用socket客户端服务端代码详解

文章目录 1️⃣ 通信相关说明1.1服务端与客户端1.2 信息发送原理1.3 信息接收原理 2️⃣ socket代码2.1 客户端代码2.2 服务端代码 3️⃣ 定时任务处理报文3.1 Timers定时任务 优质资源分享 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_4315141…

【扩散模型】【网络结构探索】神经网络扩散:Neural Network Diffusion(论文解读)

项目地址&#xff1a;https://github.com/NUS-HPC-AI-Lab/Neural-Network-Diffusion 文章目录 摘要一、前言二、Nerual Network Diffusion &#xff08;神经网络扩散&#xff09;2.1扩散模型&#xff08;预备知识&#xff09;2.2 总览2.3 参数自动编码器2.4 参数生成 三、实验3…

RocketMQ快速实战以及集群架构原理详解

RocketMQ快速实战以及集群架构原理详解 组成部分 启动Rocket服务之前要先启动NameServer NameServer 提供轻量级Broker路由服务&#xff0c;主要是提供服务注册 Broker 实际处理消息存储、转发等服务的核心组件 Producer 消息生产者集群&#xff0c;通常为业务系统中的一个功…

xff注入 [CISCN2019 华东南赛区]Web111

打开题目 看见smarty 想到模板注入 又看见ip 想到xff注入 一般情况下输入{$smarty.version}就可以看到返回的smarty的版本号。该题目的Smarty版本是3.1.30 在Smarty3的官方手册里有以下描述: Smarty已经废弃{php}标签&#xff0c;强烈建议不要使用。在Smarty 3.1&#xff…

07 MyBatis之高级映射 + 懒加载(延迟加载)+缓存

1. 高级映射 例如有两张表, 分别为班级表和学生表 自然, 一个班级对应多个学生 像这种数据 , 应该如果如何映射到Java的实体类上呢? 这就是高级映射解决的问题 以班级和学生为例子 , 因为一个班级对应多个学生 , 因此学生表中必定有一个班级编号字段cid 但我们在学生的实体…

HarmonyOS学习--三方库

文章目录 一、三方库获取二、常用的三方库1. UI库&#xff1a;2. 网络库&#xff1a;3. 动画库&#xff1a; 三、使用开源三方库1. 安装与卸载2. 使用 四、问题解决1. zsh: command not found: ohpm 一、三方库获取 在Gitee网站中获取 搜索OpenHarmony-TPC仓库&#xff0c;在t…