课程：Vue3 实战应用开发

求知

文章

文库

Lib

咨询

会员

成功案例

相关课程

Web前端高级工程师技能

全部课程 >web开发

Vue3 实战应用开发

65 次浏览

3 次


张老师
一线技术总监、11 年资深内训讲师

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

课程费用： 4000 元/人

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

报公开课

要内训

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

在线考试

能力分析，给出学习建议

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

课程简介：

       整个课程全程以案例（PC admin 系统和移动端经典案例都有，可定制：高阶 keep-alive 的单页应用、多页应用、事件系统、filter、自定义之类、瀑布流组件等等）实战训练，从中穿插业务中高频的技术知识点、插件、工具，帮助团队完成业务中的技术选择，快速切换到s面向数据编程的思维模式中。
      提炼了大型应用案例（单页、多页、PC、移动端活动、移动端包含微信、node ssr）的实践总结以及对工程化工具(webpack、babel、less、uglifyjs、postcss 等)的深入思考和总结、加上多场的深度 vue.js 课程培训设计和落地的不断总结。
      PC 中我们会完整地应用 vue 的单页能力，进行类中台（登录 + 左侧菜单右侧内容的布局、弹窗）。
      有时候会涉及到多个子平台（各自独立域名，需要统一到一个系统菜单里面的方案 - iframe 或者前端微服务）。
      包括负责的业务中台系统的包体积瘦身、路由权限的配置化、组件系统的拆分、全局数据的存储分配和部署优化。
      关于版本：

课程中会对比版本之间的差异，方便项目进行框架升级。
主要还是看项目的兼容性，同时团队目前的技术储备，新老项目迭代的周期。

如果需要，可以增加相关内容，比如版本升级和部分核心内容的设计应用案例、源码拆解等。
核心响应式原理：

课程目标：

掌握核心特性：让开发人员熟悉并掌握Vue 2的核心基础。
迁移现有项目：提供必要的知识和工具，帮助团队成员了解如何从Vue 2平滑过渡到Vue 3，并能够有效地进行项目的迁移工作。
性能优化：通过学习Vue的最佳实践，团队能够识别和实现潜在的性能改进点，从而提升应用的整体性能。

培训对象：Web前端开发工程师

学员基础：本课程面向有一定前端开发经验，熟悉 JavaScript 基础语法，了解 Vue 基本概念的开发人员。通过本课程学习，帮助学员深入掌握 Vue3 实战应用开发，提升项目开发能力。

培训内容：2天

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

时间	课程主题	课程安排
第1天	Vue.js 核心基础进阶	* ref 实战案例 * slot实战案例 * 计算属性实战案例：计算最终样式 * 过滤器实战案例：常用的时间、货币全局过滤器和局部过滤器基于 date-fns 设计一个 timeFormat * 自定义指令实战案例：v-clickoutside - 点击元素外面才会触发的事件 * mixins 实战案例：设计一个 focus * $set 更新数组和对象实战案例：表单中数组类新增一行多个表单项，删除一行 * 事件系统分析@click 绑定的内部核心流程实战案例：结合 mixin、$emit 和 $parent、$children 设计事件方法：dispatch 和 broadcast * 自定义插件实战案例：基于 tiny-cookie 设计一个 cookie 插件，提供 set、get、delete 设计一个 toast 插件
	综合案例实战实现复杂的左右布局的列表滚动筛选	基于 $attrs + $listeners 动态组件来支撑不同的筛选
	vue-cli 2 核心解析	build 目录的文件解析和插件说明 dev 环境依赖 prod 环境打包流程分环境配置文件的关系 webpack.dev/prod/test.js
	预编译样式在 vue 开发中的对比实践	* 预编译优势是什么 * 常用预编译工具 * 选中 less 的优势 * 在 Vue.js 中的核心配置和应用
	babel 在 Vue.js 中的核心应用原理	* .babelrc VS babel.config.json 的核心配置 presets（env、stage） * babel7 带来的变化 * babel-loader 的核心配置和原理 * babel 必备的 plugins * babel-plugin-transform-runtime 的核心原理 * 基于 https://cdn.polyfill.io/v3/ 搭建自主的兼容脚本
	高效的开发工具	* 如何高效调试 Vue.js * 项目脚手架 vue-cli 介绍和使用 * vue-loader 配置和使用 * 本地服务和代理 * mock 的方案对比
第2天	webpack 原理和实战	* webpack 实战必备 * 核心配置信息 * 分文件配置 * 插件介绍 * 插件开发
	与服务端交互方式	* 跨域处理 * jsonp 设置 * 自定义请求头 * 全局封装 request 方法
	vue-loader 核心实现细节	* template 解析 * css scoped lang 特性解析 * script es6 解析
	vue 全家桶（总结了很多遍的快速掌握脑图）	* vuex 的应用实践与设计解析 * vue-router 的应用实践与设计解析 * keep-alive 高级特性和事件
	多页单页应用的脚手架设计细节与优化	* 入口查找细节（自动） * 打包文件详细解析 * 优化 dev 编译速度 * 优化打包体积 webpack-bundle-analyzer VS webpack-jarvis * 拆解 vue 等非业务包 * 单页应用按需加载
	Vue 核心原理剖析	* vue 中内置指令 v-show 源码实现 * vue 中内置指令 v-if 源码实现 * vue 中内置指令 :class 源码实现
	组件库设计和打包	* 父子组件交互 * slider 组件设计案例(子父组件嵌套) * input-number 组件设计案例 * 带 mixins 的组件设计 * 对比 vue2 element 等开源组件库案例解析 * vue 事件系统的设计 * vue slot 详解 * vue directive 编写实战 * mixins 的应用场景分解实战