Vue3.0实战:大数据平台可视化

文章目录

  • 创建vue3.0项目
  • 项目初始化
  • 项目分辨率响应式设置
  • 项目顶部信息条创建
  • 页面主体创建
  • 全局引入echarts和axios
  • 后台接口创建express
  • 销售总量图实现
  • 完整项目下载

项目任何问题都可在评论区,或者直接私信即可。

创建vue3.0项目

创建项目:

vue create vueecharts

选择第三项:

Vue CLI v5.0.8
? Please pick a preset:Default ([Vue 3] babel, eslint)Default ([Vue 2] babel, eslint)
> Manually select features

继续选择,然后回车:

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( ) Progressive Web App (PWA) Support(*) Router(*) Vuex
>(*) CSS Pre-processors(*) Linter / Formatter( ) Unit Testing( ) E2E Testing

选择vue版本3.0:

? Choose a version of Vue.js that you want to start the project with
> 3.x2.x

剩下步骤:

在这里插入图片描述

运行项目:

cd vueecharts
pnpm/npm run serve

打开浏览器:

在这里插入图片描述

项目初始化

清空无用代码和文件:

  • 删除views中的页面;新建HomeView.vue

  • 删除App.vue中的多余代码。

    • <template><router-view/>
      </template><style lang="less"></style>
      
  • 修改路由

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vector容器(详解)

本文最后是模拟实现全部讲解&#xff0c;文章穿插有彩色字体&#xff0c;是我总结的技巧和关键 1.vector的介绍及使用 1.1 vector的介绍 https://cplusplus.com/reference/vector/vector/&#xff08;vector的介绍&#xff09; 了解 1. vector是表示可变大小数组的序列容器。…

Ubuntu 下 nginx-1.24.0 源码分析 ngx_debug_init();

目录 ngx_debug_init() 函数&#xff1a; NGX_LINUX 的定义&#xff1a; ngx_debug_init() 函数&#xff1a; ngx_debug_init() 函数定义在 src\os\unix 目录下的 ngx_linux_config.h 中 #define ngx_debug_init() 也就是说这个环境下的 main 函数中的 ngx_debug_init() 这…

Airflow:深入理解Apache Airflow Task

Apache Airflow是一个开源工作流管理平台&#xff0c;支持以编程方式编写、调度和监控工作流。由于其灵活性、可扩展性和强大的社区支持&#xff0c;它已迅速成为编排复杂数据管道的首选工具。在这篇博文中&#xff0c;我们将深入研究Apache Airflow 中的任务概念&#xff0c;探…

开发环境搭建-4:WSL 配置 docker 运行环境

在 WSL 环境中构建&#xff1a;WSL2 (2.3.26.0) Oracle Linux 8.7 官方镜像 基本概念说明 容器技术 利用 Linux 系统的 文件系统&#xff08;UnionFS&#xff09;、命名空间&#xff08;namespace&#xff09;、权限管理&#xff08;cgroup&#xff09;&#xff0c;虚拟出一…

JavaScript 基础 - 7

关于JS函数部分的学习和一个案例的练习 1 函数封装 抽取相同部分代码封装 优点 提高代码复用性&#xff1a;封装好的函数可以在多个地方被重复调用&#xff0c;避免了重复编写相同的代码。例如&#xff0c;编写一个计算两个数之和的函数&#xff0c;在多个不同的计算场景中都…

详解u3d之AssetBundle

一.AssetBundle的概念 “AssetBundle”可以指两种不同但相关的东西。 1.1 AssetBundle指的是u3d在磁盘上生成的存放资源的目录 目录包含两种类型文件(下文简称AB包)&#xff1a; 一个序列化文件&#xff0c;其中包含分解为各个对象并写入此单个文件的资源。资源文件&#x…

微信登录模块封装

文章目录 1.资质申请2.combinations-wx-login-starter1.目录结构2.pom.xml 引入okhttp依赖3.WxLoginProperties.java 属性配置4.WxLoginUtil.java 后端通过 code 获取 access_token的工具类5.WxLoginAutoConfiguration.java 自动配置类6.spring.factories 激活自动配置类 3.com…

DeepSeek 介绍及对外国的影响

DeepSeek 简介 DeepSeek&#xff08;深度求索&#xff09;是一家专注实现 AGI&#xff08;人工通用智能&#xff09;的中国科技公司&#xff0c;2023 年成立&#xff0c;总部位于杭州&#xff0c;在北京设有研发中心。与多数聚焦具体应用&#xff08;如人脸识别、语音助手&…

MySQL数据库(二)- SQL

目录 ​编辑 一 DDL (一 数据库操作 1 查询-数据库&#xff08;所有/当前&#xff09; 2 创建-数据库 3 删除-数据库 4 使用-数据库 (二 表操作 1 创建-表结构 2 查询-所有表结构名称 3 查询-表结构内容 4 查询-建表语句 5 添加-字段名数据类型 6 修改-字段数据类…

ARM嵌入式学习--第十天(UART)

--UART介绍 UART(Universal Asynchonous Receiver and Transmitter)通用异步接收器&#xff0c;是一种通用串行数据总线&#xff0c;用于异步通信。该总线双向通信&#xff0c;可以实现全双工传输和接收。在嵌入式设计中&#xff0c;UART用来与PC进行通信&#xff0c;包括与监控…

面试题-消失的数字-异或

消失的数字 数组nums包含从0到n的所有整数&#xff0c;但其中缺了一个。请编写代码找出那个缺失的整数。你有办法在 O(n) 时间内完成吗&#xff1f; 示例&#xff1a; 输入&#xff1a;[3,0,1] 输出&#xff1a;2 int missingNumber(int* nums, int numsSize) {}分析 本题对…

数据结构与算法之栈: LeetCode 1685. 有序数组中差绝对值之和 (Ts版)

有序数组中差绝对值之和 https://leetcode.cn/problems/sum-of-absolute-differences-in-a-sorted-array/description/ 描述 给你一个 非递减 有序整数数组 nums 请你建立并返回一个整数数组 result&#xff0c;它跟 nums 长度相同&#xff0c;且result[i] 等于 nums[i] 与数…

笔试-排列组合

应用 一个长度为[1, 50]、元素都是字符串的非空数组&#xff0c;每个字符串的长度为[1, 30]&#xff0c;代表非负整数&#xff0c;元素可以以“0”开头。例如&#xff1a;[“13”, “045”&#xff0c;“09”&#xff0c;“56”]。 将所有字符串排列组合&#xff0c;拼起来组成…

Python3 OS模块中的文件/目录方法说明十七

一. 简介 前面文章简单学习了 Python3 中 OS模块中的文件/目录的部分函数。 本文继续来学习 OS 模块中文件、目录的操作方法&#xff1a;os.walk() 方法、os.write()方法 二. Python3 OS模块中的文件/目录方法 1. os.walk() 方法 os.walk() 方法用于生成目录树中的文件名&a…

[Java]抽象类

1. 什么是抽象类&#xff1f; 1.1 定义&#xff1a; 抽象类是一个不能实例化的类&#xff0c;它是用来作为其他类的基类的。抽象类可以包含抽象方法和非抽象方法。抽象方法没有方法体&#xff0c;子类必须重写这些方法并提供具体的实现。抽象类可以有构造方法、成员变量、静态…

css三角图标

案例三角&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><s…

跨越通信障碍:深入了解ZeroMQ的魅力

在复杂的分布式系统开发中&#xff0c;进程间通信就像一座桥梁&#xff0c;连接着各个独立运行的进程&#xff0c;让它们能够协同工作。然而&#xff0c;传统的通信方式往往伴随着复杂的设置、高昂的性能开销以及有限的灵活性&#xff0c;成为了开发者们前进道路上的 “绊脚石”…

深入解析 COUNT(DISTINCT) OVER(ORDER BY):原理、问题与高效替代方案

目录 一、累计去重需求场景 二、COUNT(DISTINCT) OVER(ORDER BY) 语法解析 2.1 基础语法 2.2 执行原理 三、三大核心问题分析

线性数据结构:单向链表

放弃眼高手低&#xff0c;你真正投入学习&#xff0c;会因为找到一个新方法产生成就感&#xff0c;学习不仅是片面的记单词、学高数......只要是提升自己的过程&#xff0c;探索到了未知&#xff0c;就是学习。 目录 一.链表的理解 二.链表的分类&#xff08;重点理解&#xf…

基于PyQt5打造的实用工具——PDF文件加图片水印,可调大小位置,可批量处理!

01 项目简介 &#xff08;1&#xff09;项目背景 随着PDF文件在信息交流中的广泛应用&#xff0c;用户对图片水印的添加提出了更高要求&#xff0c;既要美观&#xff0c;又需高效处理批量文件。现有工具难以实现精确调整和快速批量操作&#xff0c;操作繁琐且效果不理想。本项…