vue3 + TS + vite 搭建中后台管理系统(完整项目)

vue3 + TS + vite 搭建中后台管理系统(完整项目)

    • 前言
    • 1、搭建步骤及方法
    • 2、集成多种插件功能,实现中后台按需使用
    • 3、新手学TS如何快速进入状态、定义TS类型
    • 4、layout搭建四款常见风格
    • 6、大屏搭建效果
    • 5、vue3+Ts+运营管理系统
      • 总结:

前言

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

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

项目主要架构: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/597010.shtml

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

相关文章

Python实现观察者模式

观察者模式是一种设计模式&#xff0c;其中一个对象&#xff08;称为主题&#xff09;维护一组依赖于它的对象&#xff08;称为观察者&#xff09;&#xff0c;当主题的状态发生变化时&#xff0c;它会通知所有观察者。这种模式常用于实现分布式事件处理系统。 下面是一个简单…

Scikit-Learn线性回归(三)

Scikit-Learn线性回归三&#xff1a;综合实践 1、线性回归理论回顾2、数据分析与问题提出3、简单线性回归实践4、多项式回归实践5、多元线性回归实践 1、线性回归理论回顾 2、数据分析与问题提出 3、简单线性回归实践 4、多项式回归实践 5、多元线性回归实践

C. Perfect Square(矩形旋转之后对应的坐标)

题目&#xff1a; https://codeforces.com/contest/1881/problem/C 思路&#xff1a; 旋转之后对应的坐标&#xff1a; 顺时针旋转 0 90 180 270 分别为&#xff08;i&#xff0c;j&#xff09;&#xff08;j&#xff0c;n1-i&#xff09;&#xff08;n1-i&#xff0c;n1-j&…

LeetCode每日一题 | 2397. 被列覆盖的最多行数

文章目录 题目描述问题分析程序代码&#xff08;Golang 版本&#xff09; 题目描述 原题链接 给你一个下标从 0 开始、大小为 m x n 的二进制矩阵 matrix &#xff1b;另给你一个整数 numSelect&#xff0c;表示你必须从 matrix 中选择的 不同 列的数量。 如果一行中所有的 1 …

C语言,easyx,绘制一个五边形。

#include<stdio.h> #include<easyx.h>//图形库头文件 #include<math.h>//使用三角函数引用头文件 #define PI 3.14//要使用弧度制 int main() { initgraph(800,600);//创建一个窗口&#xff0c;宽度为800&#xff0c;高度为600 setorigin(400, 300);//以…

three.js相机按照指定路线在建筑模型中漫游(支持开始,暂停)

three.js相机按照指定路线在模型中漫游&#xff08;支持开始&#xff0c;暂停&#xff09; 关键点 相机运动曲线 // 相机路线 const points [new THREE.Vector3(0, 40, 300),new THREE.Vector3(50, 40, 300),new THREE.Vector3(50, 40, 50),new THREE.Vector3(150, 40, 50),…

十三、K8S之亲和性

亲和性 一、概念 在K8S中&#xff0c;亲和性&#xff08;Affinity&#xff09;用来定义Pod与节点关系的概念&#xff0c;亲和性通过指定标签选择器和拓扑域约束来决定 Pod 应该调度到哪些节点上。与污点相反&#xff0c;它主要是尽量往某节点靠。 亲和性是 Kubernetes 中非常…

详细解读QLC SSD无效编程问题-2

作者通过SimpleSSD仿真模型&#xff0c;采用SLCQLC混合模式来开展进一步的验证工作。评估过程中&#xff0c;当写入请求到达固态硬盘时&#xff0c;首先会被写入缓存&#xff08;DRAM&#xff09;&#xff0c;然后才被回写到NAND。文中引入了一个名叫做LRU(Least Recently Used…

Ajax同步调用影响加载动画展示问题

问题描述&#xff1a; 在做录入文章到时候&#xff0c;由于外部图片权限问题&#xff0c;在app展示的时候无法访问&#xff0c;所以需要在文章提交的时候做一下图片处理&#xff0c;这里使用ajax同步上传到服务器 返回url替换掉 原来的img的src&#xff1b;问题出现在点提交的…

微机原理练习题答案 13

一、单项选择题(本大题共15小题,每小题3分,共45分。在每小题给出的四个备选项中,选出一个正确的答案。) 1、十六进制数5BF.C8转换成二进制数是(C) A. 11011100111111101B B. 010111011011.01101B C. 010110111111.11001B D. 010111011011.11001B 2,最适合进行加减操作的数字编…

【Unity中的A星寻路】Navigation导航寻路系统四大页签详解

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…

Nginx(十七) 日志轮训/切割

1.编写shell脚本 Nginx_Log_Path"/usr/local/nginx/logs/" Dateformatdate %Y%m%d mv ${Nginx_Log_Path}/access.log ${Nginx_Log_Path}/access-${Dateformat}.log mv ${Nginx_Log_Path}/access_8688.log ${Nginx_Log_Path}/access_8688-${Dateformat}.log mv ${Ngi…

几种读nii图像方法的轴序比较

读 .nii / .nii.gz 图像并转成 numpy 可用 medpy.io、nibabel、itk、SimpleITK 几种方法&#xff0c;然而几种方法读出来的轴序有出入&#xff0c;本篇比较此几种方法。 Datum 所用数据来自 verse&#xff0c;经 iTomxy/data/verse/preprocess.py 预处理&#xff0c;朝向和轴…

【观察】Aginode安捷诺:坚守“长期主义”,服务中国数字经济

毫无疑问&#xff0c;随着整个社会加速数字化转型&#xff0c;尤其是5G、人工智能、大数据等技术兴起&#xff0c;以及智慧医疗、智慧金融、智能制造等应用加速落地&#xff0c;算力网络在经济社会发展中扮演了愈来愈重要的角色&#xff0c;成为支撑数字经济蓬勃发展的“新引擎…

2023-2024年度安徽省职业院校技能大赛(中职组) 网络空间安全竞赛试题

2023-2024年度安徽省职业院校技能大赛&#xff08;中职组&#xff09; 网络空间安全竞赛试题 &#xff08;总分 1000 分&#xff09; 赛题说明 一、竞赛项目简介 “网络安全”竞赛共分 A.基础设施设置与安全加固&#xff1b;B.网络安全事件响应、数字取证调查和应用安全&#…

根本记不住MySQL进阶查询语句

1 MySQL进阶查询 1.1 MySQL进阶查询的语句 全文以数据库location和Store_Info为实例 ---- SELECT ----显示表格中一个或数个字段的所有数据记录 语法&#xff1a;SELECT "字段" FROM "表名"; select 列名 from 表名 ; ---- DISTINCT ----不显示重复的数…

高清网络视频监控平台的应用-城市大交通系统视联网

目 录 一、应用需求 二、系统架构设计 三、功能介绍 1.实时视频监控 2.云台控制 3.语音功能 4. 录像管理与回放 5.告警联动 6.多种显示终端呈现 &#xff08;1&#xff09;CS客户端 &#xff08;2&#xff09;web客户端 &#xff08;3&#xf…

seo分享:慎重使用蜘蛛池

其实要提高搜索引擎蜘蛛的来访次数&#xff0c;唯一的方法还是要通过网站本身的内容更新。频繁更新有质量的内容&#xff0c;才能够提高蜘蛛的来访次数。如果本身内容更新不多&#xff0c;外部引流的蜘蛛过多&#xff0c;最终发现没什么内容索引&#xff0c;蜘蛛来访的次数也会…

【竞技宝】DOTA2:tundra宣布解散旗下阵容 whitemon留队

北京时间2024年1月4日&#xff0c;在DOTA2ESL吉隆坡站的比赛结束后&#xff0c;最近将要迎来的是BB Dacha别墅杯的预选赛&#xff0c;目前随着AR官宣新赛季阵容&#xff0c;国内一线队伍都已经全部公布了大名单。而国外还有一些队伍仍在进行人员调整&#xff0c;其中就包括前TI…

基于Java医院手术室管理系统

基于Java的医院手术室管理系统是一个用于管理医院手术室资源的软件系统。该系统采用Java编程语言&#xff0c;利用JSP、Servlet等技术进行开发&#xff0c;并使用MySQL数据库进行数据存储和处理。 系统功能主要包括&#xff1a; 1、手术室资源管理&#xff1a;管理员可以添加…