vue3-management-system

作者:HearLing

发表于:2023-04-15

更新于:6 个月前

字数统计:708 字

阅读时长:3 分钟

阅读量:

项目已在 GitHub 开源，基于 Vue3 全家桶开发的后台管理系统，适用于自学 Vue3 的同学，以及外包项目快速交付。

线上地址点这里

https://vue3-management-system.netlify.app

chodocs.cn

项目仓库求 `star` ⭐

https://github.com/chovue/vue3-management-system

chodocs.cn

技术栈

该项目使用技术栈如下：

• Vue 3：前端框架
• TypeScript：语言
• Vite：打包工具
• Pinia：状态管理
• Vue Router：路由管理
• Element Plus：UI 组件库
• vxe-table：表格组件库
• Echarts：图表
• Axios：网络请求

项目截图

登录页：

首页：

表格：

安装

# 克隆项目
git clone https://github.com/HearLing/vue3-management-system.git

# 进入项目目录
cd vue3-management-system

# 安装依赖
npm install

# 本地开发，启动服务
npm run dev

# 打包构建
npm run build

# ESLint修复
npm run lint

Vue3 基础教程

• 【Vue3 基础】01.初识 Vue

  https://articles.zsxq.com/id_o9g577gfmczj.html

  chodocs.cn
• 【Vue3 基础】02.声明式渲染

  https://articles.zsxq.com/id_6id2z9me4o9n.html

  chodocs.cn
• 【Vue3 基础】03.模板语法

  https://articles.zsxq.com/id_wpxkwewbz0gw.html

  chodocs.cn
• 【Vue3 基础】04.响应式 API

  https://articles.zsxq.com/id_rpottcluq6m1.html

  chodocs.cn
• 【Vue3 基础】05.组件化

  https://articles.zsxq.com/id_v8bomv95s5x6.html

  chodocs.cn
• 【Vue3 基础加餐篇】01.Ref 解包场景

  https://articles.zsxq.com/id_2kc09gngm90j.html

  chodocs.cn
• 【Vue3 基础加餐篇】02.key 的作用源码解析

  https://articles.zsxq.com/id_dn5u0sr8j15k.html

  chodocs.cn
• 【Vue3 基础加餐篇】03.源码解析响应式原理

  https://articles.zsxq.com/id_x8lsr3vt8jjk.html

  chodocs.cn

TypeScript 入门教程

• 【TypeScript 入门】01.初识 TypeScript

  https://articles.zsxq.com/id_w1w4owfll680.html

  chodocs.cn
• 【TypeScript 入门】02.类型推断、类型拓宽与缩小

  https://articles.zsxq.com/id_awwmialgwnvl.html

  chodocs.cn
• 【TypeScript 入门】03.接口类型和类型别名

  https://articles.zsxq.com/id_g6owsianwz4g.html

  chodocs.cn
• 【TypeScript 入门】04.高级类型

  https://articles.zsxq.com/id_l60bjdtj1c7m.html

  chodocs.cn
• 【TypeScript 入门】05.枚举类型

  https://articles.zsxq.com/id_h85tsi5h79x7.html

  chodocs.cn
• 【TypeScript 入门】06.泛型

  https://articles.zsxq.com/id_wjwkewi1suk7.html

  chodocs.cn

项目实战教程

• 【实战】01.项目初始化

  https://articles.zsxq.com/id_lkdv1kbnj76w.html

  chodocs.cn
• 【实战】02.Vue Router 入门

  https://articles.zsxq.com/id_431m72ne2aws.html

  chodocs.cn
• 【实战】03.使用 Vue-router 进行路由管理

  https://articles.zsxq.com/id_jkwmwst6xpvg.html

  chodocs.cn
• 【实战】04.Axios 入门

  https://articles.zsxq.com/id_xwq70ghehdi6.html

  chodocs.cn
• 【实战】05.Axios 封装与使用

  https://articles.zsxq.com/id_w5u1rpz5msfq.html

  chodocs.cn
• 【实战】06.Apifox 进行 Mock 数据模拟

  https://articles.zsxq.com/id_o76w73rd7eba.html

  chodocs.cn
• 【实战】07.Echart 数据可视化

  https://articles.zsxq.com/id_xj202bsnoh7l.html

  chodocs.cn
• 【实战】08.Pinia 状态管理

  https://articles.zsxq.com/id_4xxpb5wpbhk7.html

  chodocs.cn
• 【实战】09.vxe-table 列表的增删改查

  https://articles.zsxq.com/id_wbewaqq34vw2.html

  chodocs.cn
• 【实战加餐 1】前端项目快速部署上线，无需一分钱

  https://articles.zsxq.com/id_wo7bpjafed1w.html

  chodocs.cn
• ...

参考资料

• 参考项目

  https://preview.pro.ant.design/dashboard/analysis

  chodocs.cn
• Vue3 中文文档

  https://cn.vuejs.org

  chodocs.cn
• Vue Router 中文文档

  https://router.vuejs.org/zh/

  chodocs.cn
• Pinia 中文文档

  https://pinia.vuejs.org/zh/

  chodocs.cn
• Element Plus 中文文档

  https://element-plus.gitee.io/zh-CN/guide/quickstart.html

  chodocs.cn

Contributors

HearLing