如何搭建中后台管理系统

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/596106.shtml

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

相关文章

【QT】中英文切换

很高兴在雪易的CSDN遇见你 前言 本文分享QT中如何进行中英文切换&#xff0c;希望对各位小伙伴有所帮助&#xff01; 感谢各位小伙伴的点赞关注&#xff0c;小易会继续努力分享&#xff0c;一起进步&#xff01; 你的点赞就是我的动力(&#xff3e;&#xff35;&#xff3e…

阿里云ECS服务器无法访问端口(防火墙在关闭状态也启作用)

问题&#xff1a;一直用得好好的端口&#xff0c;突然在某一时间不可以访问这个端口了 &#xff0c;在服务器录入外网地址访问如下图&#xff1a; 先按正常流程检测&#xff1a; 1 先云服务商的管理网站查看防火墙端口是否开放 看了正常开放了端口&#xff0c;如下图&#xff…

(JAVA)-动态代理

代理在我们生活中很常见&#xff1a; &#xff1a;当我们想看演唱会时&#xff0c;让黄牛帮我们排队买。 &#xff1a;当明星要唱歌时&#xff0c;委托别人帮忙准备。 &#xff1a;老婆想吃饭&#xff0c;让老公帮他做饭。 代理模式就是把我们不愿意做的事情委托给别的对象…

React组件间的通信

在React中&#xff0c;组件间的通信可以通过以下几种方式实现&#xff1a; 父子组件通信&#xff1a; 父组件通过props向子组件传递数据或回调函数。子组件通过props接收数据或回调函数&#xff0c;并在需要时调用回调函数向父组件传递数据。// 父组件 function ParentComponen…

T527 camera: AHD摄像头转MIPI

一、AHD 常见的摄像头接口一般有MIPI、USB、DVP等等&#xff0c;但是MIPI摄像头受限于高速信号的传输距离问题&#xff0c;导致走线不能太长&#xff0c;这样在安防监控领域、车载等领域&#xff0c;使用就很受限&#xff0c;因此会引入AHD&#xff0c;目的就是提高了传…

【unity小技巧】Unity音乐和音效管理器

最终效果 前言 在游戏开发中&#xff0c;音乐和音效的管理是一个重要的环节。好的音乐和合适的音效可以为游戏增添氛围并提升玩家的体验。为了更好地管理音乐和音效&#xff0c;我们可以使用一个专门的音乐和音效管理器。 在本文中&#xff0c;我将向大家介绍如何在Unity中创…

倍思科技红海突围要义:紧随新趋势,“实用而美”理念从一而终

移动数码周边市场始终不缺热度。 销售端是业绩的节节高升&#xff0c;如在2023年京东双十一&#xff0c;移动数码周边产品销售成果丰硕&#xff0c;根据京东战报&#xff0c;大功率充电器成交额同比提升 200%&#xff0c;65W以上移动电源成交额同比提升 150%&#xff0c;自带线…

Spring Boot 生产就绪中文文档-上

本文为官方文档直译版本。原文链接 由于篇幅较长&#xff0c;遂分两篇 Spring Boot 生产就绪中文文档-上 引言启用 Production-ready 功能端点&#xff08;Endpoints&#xff09;启用端点暴露端点安全跨域请求伪造保护 配置端点敏感值脱敏执行器网络终端的超媒体CORS 支持实现自…

视频号小店电脑版怎么登录注册?一篇详解!

大家好&#xff0c;我是电商糖果 糖果今天给大家带来的是视频号小店电脑版的注册流程修改&#xff0c;近期有准备开店的朋友。 一定要认真阅读&#xff0c;内容非常详细。 首先开店前的准备工作&#xff1a;一张企业执照&#xff0c;一个对公账户&#xff0c;一个品牌授权&a…

Java IO流介绍以及缓冲为何能提升性能

概念&#xff1a; 流是一种抽象概念&#xff0c;它代表了数据的无结构化传递。按照流的方式进行输入输出&#xff0c;数据被当成无结构的字节序或字符序列。从流中取得数据的操作称为提取操作&#xff0c;而向流中添加数据的操作称为插入操作。 Java IO 也称为IO流&#xff0c;…

海外 proxy代理Croxyproxy使用教程

什麼是Croxy代理&#xff1f; CroxyProxy是一項線上代理服務。它允許用戶訪問被阻止的網站和應用程式&#xff0c;提供一種安全的方式來訪問互聯網資源&#xff0c;同時維護用戶隱私。與許多其他網路代理不同&#xff0c;它支持幾乎所有類型的網站&#xff0c;包括視頻、搜索引…

北京1月1日起,禁止上路!“老头乐”,乐不起来了?

北京“老头乐”退场 2021年7月&#xff0c;北京市公安局、北京市交通委员会等五部门联合发布《关于加强违规电动三四轮车管理的通告》&#xff0c;明确提出&#xff0c;对通告发布前购买的违规电动三、四轮车设置过渡期&#xff0c;过渡期截至2023年12月31日。过渡期结束后&am…

芯课堂 | LVGL基础知识(二)

引言 在 LVGL 中&#xff0c;用户界面的基本构建块是对象&#xff0c;也称为小部件(widget)。默认情况下&#xff0c;LVGL在背景上绘制旧对象&#xff0c;在前景上绘制新对象。 对象层级(Layers) 创建对象层级顺序 默认情况下&#xff0c;LVGL在背景上绘制旧对象&#xff0c…

优化独立站网页布局,提升30%用户留存

近几年很多老板都意识到私域流量的重要性&#xff0c;也都开始从各类平台转战独立站。但是独立站起步也是困难重重&#xff0c;首先很直接的问题就是独立站的搭建&#xff0c;今天咱们就抛开技术&#xff0c;单纯聊聊网页的排版布局。 1. 忌文字多 不是说不让用文字&#xff…

2023:毕业后工作多年机械转编程——心路历程

还记得当初自己为什么选择计算机&#xff1f; 刚接触计算机的时候&#xff0c;是因为工作接触到了一款国家基本服务的软件&#xff0c;跟几个程序员大神们相处了半年&#xff0c;加班到凌晨也不觉得累。我当时是做的工作对标现在的产品经理&#xff0c;但我当时在公司的岗位仅…

vue前端表单常用的邮箱、电话、身份证、url、Ip等正则式多语言版校验

utils工具类中创建verify.js 常用表單校驗 //正则校验的正则表达式&#xff0c;这里注意正则表达式中的‘\’要使用‘\\’转义 const patterns {"name": "^[a-zA-Z_][0-9a-zA-Z_]{0,}$","phone": "^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7…

数字人对话系统 Linly-Talker(已加入Qwen和GeminiPro加强对话+上传任意图片的数字人)

&#x1f525;&#x1f525;&#x1f525;数字人对话系统 Linly-Talker&#x1f525;&#x1f525;&#x1f525;&#xff08;已加入Qwen和GeminiPro加强对话上传任意图片的数字人&#xff09; English 简体中文 欢迎大家star我的仓库 https://github.com/Kedreamix/Linly-Ta…

Git专栏篇

一、基础知识 二、常用手段 1. 复制其他提交到本分支 目的&#xff1a;现有git仓库&#xff0c;该仓库有两个分支a和b&#xff0c;将a分支的最近三个版本提交内容复制 到b分支的提交上。 在 Linux 系统中&#xff0c;你可以按照以下步骤将分支 A 的最近三个版本的提交内容复…

linux 环境下安装ffmpeg。

参考 https://www.anquanclub.cn/9782.html 下载解压 wget http://www.ffmpeg.org/releases/ffmpeg-3.1.tar.gz tar -zxvf ffmpeg-3.1.tar.gz cd ffmpeg-3.1. ./configure --prefix/usr/local/ffmpeg make && make install 之后在 ffmepg目录下执行 ./ffmpeg -versio…

CMake中引入第三方库

CMake中&#xff0c;如果我们需要引入第三方库&#xff0c;首先想到的是用find_package函数。的确&#xff0c;如果我们引入的第三方库是一些比较标准的库如OpenCV可以用下面的代码。 set(OpenCV_DIR xxxx) # xxxx目录包含OpenCVConfig.cmake find_package(opencv required) #…