课程：Vue3 实战开发

求知

文章

文库

Lib

咨询

会员

成功案例

相关课程

Web前端高级工程师技能

全部课程 >web开发

Vue3 实战开发

14 次浏览

1 次


Edward老师
web应用开发专家

时间地点： 北京、上海、深圳根据报名开班

课程费用： 4000 元/人

企业内训：可以根据企业需求,定制内训,详见内训学习手册

报公开课

要内训

认证方式：
培训前了解能力模型。
培训后进行能力评测：

在线考试

能力分析，给出学习建议

合格者颁发证书，作为职业技能资格证明

        在数字化转型加速的当下，企业级应用的开发需求日益旺盛，前端开发能力已成为企业技术团队的核心竞争力。Vue 目前已经是国内最流⾏的前端框架之⼀，Vue 3 带来的诸多优化更是让前端圈迎来了新的潮流，比如：
       • 基于 Proxy 的全新响应式实现；
       • Composition API + <script setup> 组织代码的更优方式；
       • 更有料的 TypeScript 支持；
       • 新的 VDOM diff 逻辑；
       • 更小的体积 + 更高的性能；
       • 生态中还多了 Vite 这个新⼀代工程化工具。
       本课程基于企业真实开发场景，以实战为核心，旨在通过系统教学，让研发团队深入掌握 Vue3 的高级应用，包括 Vue3 新特性、工程创建、核心知识、高级应用等内容，并能在实战中完成项目开发、打包部署，解决实战痛点和性能优化，从而提升团队在前端技术方面的研发能力，助力前端技术栈从 Vue2 向 Vue3 转型，增强产品在复杂环境下的系统架构能力，为项目高效交付提供有力支撑。

课程目标：

通过本课程学习，帮助学员深入掌握 Vue3 实战应用开发，提升项目开发能力。
掌握新特性： 让开发人员熟悉并掌握 Vue 3 的新特性，特别是 Composition API ，这有助于提高代码的可维护性和复用性。
迁移现有项目：提供必要的知识和工具，帮助团队成员了解如何从Vue 2平滑过渡到Vue 3，并能够有效地进行项目的迁移工作。
性能优化：通过学习Vue 3的最佳实践，团队能够识别和实现潜在的性能改进点，从而提升应用的整体性能。

培训对象：Web应用开发人员

学员基础：有一定前端开发经验，熟悉 JavaScript 基础语法，了解 Vue 基本概念。

授课方式： 以客户关注的案例讲解，可以结合案例讨论、练习。

培训内容：2天

主题	内容安排
Vue3 组件基础	组件基础 • 定义组件 • 使用组件 • 组件注册 • 组件名格式组件生命周期函数： • setup • onMounted() • onUpdated() • onUnmounted() • onBeforeMount()
Vue3 组件通信	组件通信父子组件之间的通信 props 子组件向父组件传值 emits v-model双向传值兄弟组件之间的通信 mitt 跨级组件之间的通信 provider/inject 非父子组件之间的通信异步组件嵌套组件
VueRouter4 路由管理	路由基础配置 • 路由实例创建 • 路由出口配置路由参数处理 • 动态路由参数 • 路由参数监听路由导航和状态管理 • 编程式导航 • 路由与状态管理结合路由缓存优化 • 组件复用问题 • 解决方案一：强制组件重建 • 解决方案二：路由守卫监听（推荐） • 解决方案三：使用 keep-alive 精确控制路由性能优化 • 路由懒加载 • 滚动行为优化嵌套路由综合实践
Pinia 状态管理	Pinia 的相关介绍 Pinia 的使用 • 安装Pinia • 封装pinia • 定义store • Store三个核心概念 pinia持久化存储 pinia-plugin-persistedstate Pinia 重构代办任务案例 • 使用组件化开发的思想, 搭建页面 • Pinia的使用步骤 • 添加各种功能: • 新增功能: • 删除功能 • 小选全选功能 • 底部统计和清除功能 • 底部点击高亮和数据切换
Axios 网络请求	1、axios定义、安装和使用 • 使用get请求数据 • 执行 POST 请求 • 执行多个并发请求 • 执行delete删除数据 2、本地代理跨域 3、拦截器的工作流程： • 删除拦截器 • 将拦截器添加到axios的自定义实例 • 消除 • 处理错误 4、使用application / x-www-form-urlencoded
Vue3 + Element Plus 的后台管理系统	一、基础环境 1、初始化 2、整合Element-Plus 3、路径别名 4、多环境配置 5、反向代理 6、其他依赖二、集成Pinia 1、安装Pinia 2、Pinia全局注册 3、Pinia模块封装 4、使用Pinia 三、Axios网络请求库 1、安装Axios和js-cookie 2、axios工具封装 3、API封装 4、API调用四、SVG图标 1、安装 vite-plugin-svg-icons 2、创建图标文件夹 3、main.ts 引入注册脚本 4、vite.config.ts 插件配置 5、TypeScript支持 6、组件封装 7、使用五、永久缓存Local Storage 1、localStorage和sessionStorage 2、新建localStorage.ts文件 3、存储侧边栏状态 4、存储布局大小 5、存储国际语言 6、使用七、自定义指令 1、定义 2、声明周期 3、钩子参数 4、全局注册 5、封装鉴权指令九、Echarts图表 1、安装 Echarts 2、Echarts 自适应大小工具类 3、使用案例十、路由 1、安装 vue-router 2、创建几个页面 3、菜单API 4、创建路由实例 5、Pinia存储路由 6、全局注册 7、路由守卫十一、单组件CRUD 综合编码实战