课程简介
前端MVP 模式框架中又出来了一个Vue.js，已有超越Angular、React之势。Vue.js是一套构建用户界面的渐进式框架，与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的API 实现响应的数据绑定和组合的视图组件。
本课程将使用大量的案例和对比其他开发模式等方法使学员能借此解决实际生活中存在的问题。
课程收益
1. 帮助团队完成业务中的技术选择，使其能快速切换到面向数据编程的思维模式中。
2. 通过大量案例的演示使学员能扩展思维进而解决实际发生的问题。
3. 快速了解和熟悉Vue.js 基础知识以及开发工具
受众人群
1.有一定js 基础或者对前端新技术感兴趣的人员
2.技术主管、架构师，各个阶段的前端开发，全站开发人员
课程周期
2天（12H）
课程大纲
时间 | 课程内容 |
第一天上午 | 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 插件 2.vue-cli 2 核心解析 * build 目录的文件解析和插件说明 * dev 环境依赖 * prod 环境打包流程 * 分环境配置文件的关系 webpack.dev/prod/test.js 3.预编译样式在 vue 开发中的对比实践 * 预编译优势是什么 * 常用预编译工具 * less * 在 Vue.js 中的核心配置和应用 4.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/ 搭建自主的兼容脚本 |
第一天下午 | 1.高效的开发工具 * 如何高效调试 Vue.js * 项目脚手架 vue-cli 介绍和使用 * vue-loader 配置和使用 * 本地服务和代理 * mock 的方案对比 2.webpack 原理和实战 * webpack 实战必备 * 核心配置信息 * 分文件配置 * 插件介绍 * 插件开发 3.webpack 高级篇 * 插件使用与编写 html-webpack-plugin 配置和源码事件钩子 html-webpack-inline-source-plugin 配置和源码事件钩子 extract-text-webpack-plugin 配置和实现细节 uglifyjs-webpack-plugin 配置和实现细节 CommonsChunkPlugin 的使用以及 manifest 文件的内容 实操: 编写一个基于 html-webpack-plugin 的 dns 域名 替换 publicPath 的插件 * 打包流程 * 打包速度优化 * 打包体积优化 * 内置插件解析 4.与服务端交互方式 * 跨域处理 * jsonp 设置 * 自定义请求头 * 全局封装 request 方法 |
第二天上午 | 1.vue-loader 核心实现细节 * template 解析 * css scoped lang 特性解析 * script es6 解析 * deep 案例解析 2.vue 全家桶（总结了很多遍的快速掌握脑图） * vuex 的应用实践与设计解析 * vue-router 的应用实践与设计解析 * keep-alive 高级特性和事件 3.多页单页应用的脚手架设计细节与优化 * 入口查找细节（自动） * 打包文件详细解析 * 优化 dev 编译速度 * 优化打包体积 webpack-bundle-analyzer VS webpack-jarvis * 拆解 vue 等非业务包 * 单页应用按需加载 4.Vue 核心原理剖析 * vue 中内置指令 v-show 源码实现 * vue 中内置指令 v-if 源码实现 * vue 中内置指令 :class 源码实现 * vue 事件系统的设计 * vue slot 详解 * vue directive 编写实战 * mixins 的应用场景分解实战 5.vue-cli 3 * 环境变量实战和源码解析 * vue.config.js 配置与背后的设计实现webpack-chain * 内置命令使用和源码解析 * vue create/init 不一样 * vue inspect * vue serve * vue build * vue config |
第二天下午 | 1.组件库设计和打包 * 父子组件交互 * slider 组件设计案例(子父组件嵌套) * input-number 组件设计案例 * 带 mixins 的组件设计 * 对比 element 等开源组件库案例解析 2.插件编写实战和源码解析 * vconsole 插件 * cli-plugin-babel * cli-plugin-eslint 3.webpack 4 升级 * 新增 optimization * mini-css-extract-plugin * html-webpack-plugin 升级 4.PC admin 系统搭建 * typescript 的一些实践思考 |
京ICP备2022035414号-1
