vue3 + TS + vite 搭建中后台管理系统(开箱即用)

@[TOC](vue3 + TS + vite 搭建中后台管理系统) 开箱即用

前言

要成功,先发疯,头脑简单往前冲!

三金四银,金九银十,多学知识,也不能埋头苦干,要成功,先发疯,头脑简单往前冲!

项目主要架构:1、安装框架开发2、配置vite 中使用 less 或 scss3、配置vite自动导入语法插件开发4、安装路由Router开发5、安装pinia(vue3+ts使用pinia更好用,vuex使用ts没有pinia优雅)6、安装element-ui-plus7、配置vite.config.ts8、新建confing文件夹,分别配置一些共用的ts9、layouts搭建菜单组件开发a、新建layouts模块文件a-1、index.vue 主要入口(一次性加载方式)[二选一个入口即可]a-2、indexAsync 主要入口(异步加载方式)[二选一个入口即可]a-3、LayoutVertical 分栏主入口[纵向:vertical]a-4、LayoutClassic 分栏主入口[经典:classic]a-5、LayoutTransverse 分栏主入口[横向:transverse]a-6、components 布局组件模块聚合[布局组件:components]a-6-1、Menu [左侧菜单栏]a-6-2、Main [右侧布局栏]a-6-3、Header [头部栏]a-6-4、Tabs [顶部Tabs切换]a-6-5、Footer [底部页脚]a-6-6、ThemeDrawer [布局切换栏]a-7、创建MenuList数据开发a-8、封装并异步调用接口数据开发a-9、安装mockjs,实现数据模拟开发a-10、安装nprogress进度条简单开发10、路由权限配置11、API接口配置12、登录页面开发13、首页开发14、安装拖动插件开发15、富文本插件安装开发16、引导页开发17、拖拽组件开发18、分屏开发19、在线打印开发20、charts开发21、高德地图开发22、西瓜视频开发23、数据大屏开发24、搭建框架插件安装注意问题25、TS类型基础定义文档说明

在这里插入图片描述

1、搭建步骤及方法

搭建方法参考上一篇文章
https://blog.csdn.net/weixin_44873831/article/details/129728248

1、安装框架:npm create vite@latest;2、配置vite 中使用 less 或 scss:npm add -D less  或  npm add -D sass3、配置vite自动导入语法插件npm install -D unplugin-vue-components unplugin-auto-importa、使用 npm install -D unplugin-vue-components unplugin-auto-importb、在vite.config.ts中引入c、出现报错,(找不到模块“unplugin-vue-components/vite”。你的意思是要将 "moduleResolution" 选项设置为 "node",还是要将别名添加到 "paths" 选项中?ts(2792))d、将tsconfig.json和tsconfig.node.json中的 "moduleResolution" 选项设置为 "node"e、删除"allowImportingTsExtensions",从 TypeScript 3.8 开始,这个选项已经被废弃了;

2、集成多种插件功能,实现中后台按需使用

框架集成多种插件,项目做并不是所有都能用到,在使用时可以按照需要的插件方法

在这里插入图片描述

3、新手学TS如何快速进入状态、定义TS类型

TS官网
新手建议先看看官网,了解大概后进行实操;
如果不知道从哪里开始,接着往下看:

// 了解基本的类型定义1、any // any类型,则允许被赋值为任意类型2void // void类型(空值),表示没有任何返回值的函数3、Interfaces // 接口定义类型a、 任意值 [let str:string;]: 如果是一个普通类型,在赋值过程中改变类型是不被允许的,任意值(Any)用来表示允许赋值为任意类型str = '123'b、 联合类型 [let str: string | number;]: 表示取值可以为多种类型中的一种str = '123'str = 123c、 数组类型的定义 [let arr: number[]]: 简单的方法是使用「类型 + 方括号」来表示数组:arr = [1,2,3]d、 接口(Interfaces)、泛型(Generics)、类(Classes)、枚举类型(Enums)等e、 泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。`泛型变量T` T表示任何类型说明:`泛型的语法是尖括号 <> 里写类型参数,一般可以用T来表示`示例1// let swap = ('1',2)function swap<T, U>(tuple: [T, U]): [U, T]{return [tuple[1], tuple[0]]}function swap(tuple) {return [tuple[1], tuple[0]]}示例2let arr:Array<number> =[1,2,3];// 定义多个类型let arr:Array<number|string> =['1',2,3];了解更多往下看;

4、layout搭建四款常见风格

这里封装了4款风格切换
layouts文件夹

第一款:


在这里插入图片描述


第二款:


在这里插入图片描述


第三款:


在这里插入图片描述


第四款:


在这里插入图片描述

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

6、大屏搭建效果

大屏采用了 datav-vue3、echarts框架搭建
推荐使用:
官网:https://datav-vue3.netlify.app/
npm:pnpm install @kjgl77/datav-vue3
配合echarts:
官网:https://www.makeapie.cn/echarts
npm:npm install echarts --save
获取源码接着往下看!


第一款:拼夕夕大屏数据


在这里插入图片描述

第二款:城市大屏数据


在这里插入图片描述

大屏模块文件目录


在这里插入图片描述

5、vue3+Ts+运营管理系统

-项目预览-👆


总结:

前端路上 | 所知甚少,唯善学。
各位小伙伴有什么疑问,欢迎留言探讨。

— 关注我:前端路上不迷路 —




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

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

相关文章

关于前端blob协议下载,wkwebview相关适配整理知识整理

关于前端blob协议下载&#xff0c;wkwebview相关适配整理 如果前端使用的blob协议对目标进行下载&#xff0c;该功能是嵌套在iOS客户端中可以这样做&#xff1a; available(iOS 14.5, *)func webView(_ webView: WKWebView, navigationAction: WKNavigationAction, didBecome …

ElasticSearch安装和kibana控制台安装

文章目录 简介ElasticSearch安装环境下载参数密码配置启动 kibana安装修改config/kibana.yml配置 简介 Elasticsearch 是一个分布式文档存储。Elasticsearch 是存储已序列化为 JSON 文档的复杂数据结构。当集群中有多个 Elasticsearch 节点时&#xff0c;存储的文档分布在整个…

linux系统---nginx(3)核心配置指令及调优

目录 Nginx 核心配置指令 一、Nginx配置文件详解 1、配置文件目录 2、配置文件结构 二、调优 1、在全局域进行的调优 1.1线程池指令 1.2 工作进程数指令 2.1 工作进程并非数指令 2.2 事件处理机制选择指令 2.3 互斥锁指令 3、在http指令域的调优 3.1 Nginx端口监听…

JAVA SE 2.基本语法

1.Java的基本语法 1.Java代码的基本格式修饰符 class 类名{程序代码 } 例: public class Test{public static void main(String[] args){} }语法说明 1.Java程序代码都必须放在类中&#xff0c;类需要用class关键字定义&#xff0c;class前面可以有修饰符2.当类不是定义在java.…

Redis学习------实战篇----2024/02/28

1.集群的session共享问题 2.基于Redis实现共享session登录 //4.保存验证码到redisstringRedisTemplate.opsForValue().set(LOGIN_CODE_KEYphone,code,LOGIN_CODE_TTL, TimeUnit.MINUTES);RedisTemplate RedisTemplate使用的是JdkSerializationRedisSerializer存入数据&#xff…

java面试题之nginx篇

1. 什么是Nginx&#xff1f; Nginx是一个 轻量级/高性能的反向代理Web服务器&#xff0c;他实现非常高效的反向代理、负载平衡&#xff0c;他可以处理2-3万并发连接数&#xff0c;官方监测能支持5万并发&#xff0c;现在中国使用nginx网站用户有很多&#xff0c;例如&#xff…

Linux NFC 子系统剖析

1.总览 linux源码中NFC在net/nfc下&#xff0c;文件结构如下图&#xff1a; hci&#xff1a;Host Controller Interface 主要是针对NFC的主机-控制器接口协议 nci&#xff1a;NFC Controller Interface 主要是NFC的控制器接口协议&#xff0c;用于NFCC(NFC Controller)和DH(…

mysql学习打卡day25

今日成果&#xff1a; select * from clients where client_id in ( select client_id from invoices group by client_id having count(*) >2 ); -- 另一种写法 select * from clients where client_id any ( select client_id from invoices group by client_id havin…

Android 14 AAOS audio

文章目录 乘客音频投放到主音频区动态路由配置controlhal实现的具体流程control hal AudioGain的callbackAudioModuleChange变化的通知 乘客音频投放到主音频区 场景&#xff1a; 是将乘客区的Media 属性的数据通过主屏区的设备进行播放。具体而言 在副屏user11播放的音乐是输出…

微信小程序 uniapp+vue实习助学岗位系统springboot/php/python/nodejs

&#xff08;一&#xff09;研究目标&#xff1a; 对于本微信小程序实习系统的设计来讲&#xff0c;主要是采用了java语言和mysql数据库来完成对系统的设计&#xff0c;根据某高校的实习系统&#xff0c;提出解决问题的一个可行性方法&#xff0c;可以在手机端就能完成我们的工…

十三、Qt多线程与线程安全

一、多线程程序 QThread类提供了管理线程的方法&#xff1a;一个对象管理一个线程一般从QThread继承一个自定义类&#xff0c;重载run函数 1、实现程序 &#xff08;1&#xff09;创建项目&#xff0c;基于QDialog &#xff08;2&#xff09;添加类&#xff0c;修改基于QThr…

Sql 查询一张表中哪些字段做了外键跟哪些表关联了

要查询一张表中哪些字段做了外键以及它们与哪些表关联了&#xff0c;你可以使用SQL的系统表或信息模式&#xff08;Information Schema&#xff09;来查询。 以下是一个通用的方法&#xff0c;适用于大多数关系型数据库&#xff08;如MySQL, PostgreSQL, SQL Server等&#xf…

网络工程师笔记5

TCP/IP 常见协议 应用层 Telnet 数据网络中提供远程登录服务的标准协议23FTP 传输文件协议21&#xff0c;20HTTP 超文本传输协议80TFTPSNMPSMTPDNSDHCP 传输层 TCPUDP 网络层 ICMPIGMPIP 数据链路层 PPPOE Internet PPP 传输层 传输层协议接收…

【重要公告】BSV区块链协会宣布将启动多项动态安全增强措施

​​发表时间&#xff1a;2024年2月16日 2024年2月16日&#xff0c;瑞士楚格 - BSV区块链协议的管理机构BSV区块链协会&#xff08;以下简称“BSV协会”&#xff09;宣布对其运营模式实施全新的安全架构&#xff0c;其中包括引入网络访问规则和数字资产找回协议&#xff0c;以及…

springSecruity--->和springboot结合的跨域问题

&#x1f926;‍♂️这个是我在springboot中使用springSecruity写一个小demo时遇到的问题&#xff0c;记录下来&#x1f926;‍♂️ 文章目录 跨域请求springboot项目中使用springSecruity导致跨域请求CrossOrigin请求失效解决方法springboot 中的跨域方法 跨域请求 什么是跨…

12.网络游戏逆向分析与漏洞攻防-游戏网络架构逆向分析-游戏网络通信升级与检测建议

上一个内容&#xff1a;接管游戏接收网络数据包的操作 关注我今晚9点半准时更新

密码学在 Web3 钱包中的应用:私钥是什么?bitget钱包为例

在非对称加密演算法中&#xff0c;私钥是一串随机生成的数字&#xff0c;通常以十六进制数表示&#xff08;也就是由0、1、2、3、4、5、6、7、8、9、a、b、c、d、e和f组成&#xff09;。私钥生成后&#xff0c;这串数字被作为一个单向数学函数中的输入值&#xff0c;计算产生的…

YAML管理接口框架配置的最佳实践

管理接口框架配置是构建强大的接口测试框架的关键一环。良好的配置管理可以提高测试效率、可维护性和可扩展性。在本文中&#xff0c;我们将重点介绍使用YAML&#xff08;YAML Ain’t Markup Language&#xff09;来管理接口框架配置的最佳实践&#xff0c;并通过实例演示其用法…

Unity3D 法线贴图的原理详解

前言 Unity3D它提供了丰富的功能和工具&#xff0c;帮助开发者轻松创建出高质量的游戏作品。其中&#xff0c;法线贴图&#xff08;Normal Mapping&#xff09;是一种常用的技术&#xff0c;用于在游戏中模拟出高精度的表面细节&#xff0c;提升游戏画面的真实感和细节感。本文…