Vue3+Ts+Vite+Element Plus项目实战
课程详情
课程详情
本课程从零开始，带你一步步搭建一个完整的 Vue3 + TypeScript + Vite + Element Plus 项目。通过实战，你将学习如何使用这些技术栈搭建项目，包括项目初始化、功能模块开发、状态管理、路由配置等。
适合人群
- 希望学习 Vue3 和 TypeScript 的开发者
- 对前端工程化有一定了解，希望提升项目开发效率的开发者
- 希望使用 Element Plus 组件库进行快速开发的开发者
学习收获
- 掌握 Vue3 + TypeScript + Vite + Element Plus 的项目搭建流程
- 熟悉 Vue3 的 Composition API 和 TypeScript 的使用
- 了解 Vite 的特性和 Element Plus 的组件使用
- 学会使用 Pinia 进行状态管理
- 掌握 Vue Router 的配置和使用
课程亮点
- 实战项目，从零开始，逐步深入
- 详细讲解每个技术点的使用方法和技巧
- 代码示例丰富，易于理解和实践
- 配套视频教程，方便随时回看
课程目录
01 课程介绍与项目演示 01 课程介绍与项目演示 02 项目创建 01 Vite创建项目 02 项目整合路由 03 项目整合Vuex 04 eslint、css 预处理器sass安装 05 项目中引入element-plus 03 项目主界面搭建 01 项目主界面布局 02 左侧导航菜单制作一 03 左侧导航菜单制作讲解二 04 导航菜单logo组件制作 05 Icon图标、动态生成Icon图标 06 路由配置与对应页面创建 07 菜单收缩与展开制作 08 面包屑导航制作 09 tabs选项卡制作1 10 tabs选项卡制作2 11 Tabs选项卡制作总结 12 TypeScript知识补充 13 vuex4+ts实现类型推测1 14 vuex4+ts实现类型推测2 15 vuex4+ts实现类型推测3 16 vuex4+ts实现类型推测4 04 axios安装与封装 01 axios的安装与使用 02 axios对restful api的支持 05 登录与权限验证对接 01 登录页面制作讲解 02 验证码对接讲解 03 登录接口对接 04 登录接口优化讲解 05 获取用户权限信息 06 动态菜单数据接口对接 07 权限验证对接讲解 06 部门管理模块开发 01 部门列表业务抽离与对接 02 通用弹框组件封装 03 弹框组件的测试 04 部门相关业务逻辑抽离1 05 部门父组件调用子组件方法2 06 部门子组件给父组件传值3 07 新增部门页面布局4 08 上级部门树选择 09 工具类的封装与全局挂载使用 10 新增、编辑部门接口对接 11 删除部门接口对接 07 用户管理模块开发 01 用户管理左侧部门树讲解 02 用户管理列表数据动态加载1 03 用户管理列表数据动态加载2 04 新增用户弹框展示 05 新增用户页面布局 06 新增用户上级部门选择 07 用户新增、编辑接口对接 08 用户删除数据对接 08 角色管理模块开发 01 角色管理列表数据获取 02 角色列表页面制作与对接 03 新增角色弹框展示与业务抽离 04 新增角色页面制作与数据对接 05 角色删除接口对接 09 菜单管理模块开发 01 权限管理列表数据获取与业务抽离 02 权限列表页面制作 03 新增权限弹框展示和业务抽离 04 新增权限页面布局 05 上级菜单选择组件 06 新增、编辑权限接口对接 07 删除权限接口对接 08 用户分配角色1 09 用户分配角色2 10 分配权限树显示制作 11 权限树回显与分配保存 12 退出登录、还原数据对接 13 按钮权限讲解-自定义指令 10 项目整合Echarts 01 项目整合echarts 02 封装hooks方式使用Echarts 11 项目升级更新 01 讲element-plus升级 02 Icon图标库升级 03 弹框组件问题修改 04 菜单收缩优化 05 Vuex更换为Pinia 12 课程资料、源码 01 笔记资料 02 课程前端源码 03 赠送后端源码(java) 04 数据库脚本 05 最新版前端源码(升级版)
