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.pswp.cn/web/67736.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/67736.shtml
英文地址,請注明出處:http://en.pswp.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;操作繁瑣且效果不理想。本項…