《vue3+ts+element-plus 后台管理系统系列一》之简介，web前端开发实战项目

• 多种动态换肤

• 动态侧边栏（支持多级路由嵌套）

• 动态面包屑

• 快捷导航(标签页)

• 本地/后端 mock 数据

• Screenfull全屏

• 自适应收缩侧边栏

• 编辑器

• 富文本

• Excel

• 导出excel

• 导入excel

• 前端可视化excel

• 导出zip

• 表格

• 动态表格

• 拖拽表格

• 内联编辑

• 错误页面

• 401

• 404

• 組件

• 头像上传

• 返回顶部

• 拖拽Dialog

• 拖拽Select

• 拖拽看板

• 列表拖拽

• Dropzone

• Sticky

• CountTo (to do)

• 综合实例

• 错误日志

• Dashboard

• 引导页

• ECharts 图表

• Clipboard(剪贴复制)

目录结构

admin-tmpl

├─ .env.dev.build # 开发环境

├─ .env.dev.serve # 开发本地本地

├─ .env.prod.build # 生产环境

├─ .env.prod.serve # 生产环境本地

├─ .env.test.build # 测试环境

├─ .env.test.serve # 测试环境本地

├─ .eslintrc.js # eslint

├─ README.md

├─ dist # 打包dist

├─ mock # mock服务

├─ public # 静态资源

├─ src # 源码

│ ├─ @types # ts 声明

│ ├─ apis # 接口请求

│ ├─ assets # webpack打包的资源

│ ├─ components # 公共组件

│ ├─ config # 全部配置

│ ├─ constant # 常量

│ ├─ directives # 全局指令

│ ├─ layout # 全局Layout

│ ├─ locales # 国际化

│ ├─ model # 全部model存放

│ ├─ plugins # 插件

│ ├─ router # 路由

│ ├─ store # 全局store管理

│ ├─ styles # 全局样式

│ ├─ utils # 全局公共方法

│ └─ views # 所有业务页面

├─ tsconfig.json # ts 编译配置

└─ vue.config.js # vue-cli 配置

HighLight

---

项目均已最新技术实现，Vue3配套升级全家桶和涉及的插件组件等

项目采用技术:

• vue3 + composition api

• typescript3.9

• sass (dart sass)

• echats5

vue next 系列:

• element-plus

• vue-router-next

• vuex-4.0

• vue-vue-i18n-next

Document

---

• 文档地址

• 文档项目git地址

Setup

---

项目主要是前端和mock server（node）

前后端都启动

yarn

yarn start

or

npm install

npm run start

单独启动 Mock

后台模拟服务器和其他版本不同，采用koa2+Faker进行模拟。

• Koa2

• Faker

启动mock server:

yarn mock

or

npm run mock

mock 需要部署到服务器，单独项目地址：https://github.com/rcyj-FED/admin-tmpl-mock

mock在线测试地址：https://admin-tmpl-mock.rencaiyoujia.com/

单独启动 vue admin

yarn serve:dev

or

npm run serve:dev

多环境命令查看package.json script:

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

前端校招精编面试解析大全点击这里免费获取完整版pdf查看

零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**

[外链图片转存中…(img-Lc5wOI27-1712245406395)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

前端校招精编面试解析大全点击这里免费获取完整版pdf查看