南京博睿同创教育

**章：前端开发基础篇(10天)

第二章：移动web开发篇(7天)

第三章：javascript网页编程篇(19天)

1.Javascript基 础：JavaScript 介绍，应用，编写，执行 console 注释 变量，变量声明提升，全局变量，常量 7 大数据类型 Object 三种类型、typeof、数据类型转换 运算符 流程控制：条件分支，循环，异常处理，break，continue 函数：定义，调用，函数表达式，函数递归,arguments 函数的作用域 闭包 Closures 立即执行函数、预定义函数 json数据处理 常用内置对象：Function, Number, Math, Date, String Array 数组，数组方法 pop push shift unshift，自定义数组 排序，冒泡排序 字符串、数组的相关函数 大量案例演示，学会使用js编码程序,实现简单业务逻辑；

2.web-API：DOM层级、类型 查找DOM节点操作 对节点的删除、添加、修改操作 节点间的固定定位距离、页面滚动距离、页面滚动事件 获取元素宽高及属性 获取可视区的大小 弹窗及window.location、window.navigator的使用 光标事件 event对象 事件流、事件捕获、事件冒泡、取消事件冒泡 事件绑定、取消事件绑定 键盘事件 默认事件及如何组织默认事件 事件委托及事件委托的好处 大量案例演示，学会使用js操作DOM节点,实现各种业务逻辑,效果；

3.javascript高级：正则表达式 RegExp对JS风格 正则涉及到的函数 search、match、replace 正则匹配的关键字、[]、排除、转义字符、量词的使用、中文匹配 面向对象、OOP特点 抽象、封装、继承 工厂模式 深入介绍闭包 构造函数、原型、原型链 继承、原型继承、call apply继承 es6的解释、es6发布时间 es6运行环境 let、const 解构Destructuring 模板字符串 函数参数的默认值 箭头函数 类和类的继承 set、map Promise 承诺编程，使用正则表达式完成字符的校验,可以使用原型创建对象,使用箭 头函数等；

4.数据可视化 Echarts：大屏幕适配技术解决方案的应用 Echarts 各类型数据可视化图表的应用 根据需要求创建折线图、K线图、地图等图表，使用Echarts可以创建出企业项目中需要的各种图表；

第四章：前后端交互篇(9天)

第五章 Vue.js篇(24天)

1.Vue基础：Vue 特点 Vue 实例 插值表达式 {{}} 指令: v-bind, v-if, v-for, v-model, v-on 使用组件构建应用 Vue 实力属性和方法 实例生命周期 模板语法与绑定 过滤器 Filter 计算属性 computed 方法 methods 观察 Watchers v-bind:class, v-bind:style 条件渲染：v-if, v-show 列表渲染 组件和 v-for 数组更新检测：变异方法，非变异方法 事件处理器 $event 特殊变量 事件修饰符 按键修饰符，内置按键别名，组合按键修饰符 表单控件绑定 表单绑定修饰符：.lazy, .number, .trim，使用Vue.js可以创建前端程序；

2.Webpack+ES6 模块化：Webpack Webpack 安装，打包，脚本配置，运行 Source Map 配置 使用 webpack 构建本地服务器 Loaders Babel Babel plugins json loader css loader & style loader CSS modules 模块化 :global CSS 预处理器 less loader sass loader postcss loader banner plugin html webpack plugin html webpack plugin extract-text-webpack-plugin uglifyjs-webpack-plugin Code Splitting – CSS Code Splitting - require.ensure 缓存控制 babel 默认导入/导出 按需导入/导出，使用WebPack可以打包我们的前端程序进行上线使用；

3.Vue高级：组件 Component 注册全局，局部组件 组件命名约定 is 属性 组件 data 函数 父子组件数据传递 prop 验证 自定义事件：$on, $emit 原生事件监听 .native 非父子组件通信 Slot 分发内容 单个 Slot，匿名 Slot，具名 Slot 作用域插槽 动态组件 keep-alive 可复用组件 子组件索引 $refs 异步组件 resolve reject v-once 异步队列更新 自定义指令 Directive 混合 Mixin，全局混合 插件 Plugins，自定义插件 单文件组件和项目 CSS 抽取 路由 Router Vue 单元测试及覆盖率报告生成 Vuex，使用Vue高级知识点创建Vue程序；

4.Vuecli3+ElementUI：Layout 布局,Container 布局容器,Color 色彩 Typography 字体,Icon 图标 Button 按钮,Form,Radio 单选框,Checkbox 多选框 Input 输入框,,InputNumber 计数器 Select 选择器,Cascader 级联选择器 Switch 开关,Slider 滑块 TimePicker 时间选择器,DatePicker 日期选择器,DateTimePicker 日期时间选择器 Upload 上传,Rate 评分,ColorPicker 颜色选择器,Transfer 穿梭框 Form 表单,Data,Table 表格,Tag 标签,Progress 进度条 Tree 树形控件,Pagination 分页 Badge 标记,Notice,Alert 警告 Loading 加载,Message 消息提示 MessageBox 弹框,Notification 通知 Navigation,NavMenu 导航菜单 Tabs 标签页,Breadcrumb 面包屑 Dropdown 下拉菜单,Steps 步骤条,Dialog 对话框 Tooltip 文字提示,Popover 弹出框 Card 卡片,Carousel 走马灯,Collapse 折叠面板，使用Element-UI组件库进行项目的开发；

5.Vue项目：使用技术：vue+vue-cli+vuerouter+vuex+localStorage+swiper+axios 课程涉及知识点： vue:vue基础、vue组件及组件间传值、vue属性方法指令、vue过 滤器、计算属性、列表渲染、修饰符、axios等 vuex:统一状态管理 store 、state、actions、mutations、getters router:vue路由的定义、子路由的定义、路由链接的使用、路由传 参、路由懒加载、路由守卫 本地缓存:localstorage、sessionstorage swiper:轮播插件的引入，轮播的配置 Vant，使用Vue.js进行实际项目的开发；

第六章 微信小程序篇(10天)

第七章 react.js篇(12天)

1. react基础：JSX 组件系统 虚拟 DOM 生命周期 无状态组件 有状态组件 ref class 组件通信 create-react-app 路由 插值 state，掌握React基本语法，能够使用class组件实现常见的业务功能；

2. Hooks：useState useEffect useRef useContext useEffect高级用法 放大镜案例 购物车案例，运用hooks核心知识实现购物车和放大镜经典案例效 果。

3. Redux：状态管理流程 action dispatch store reducer redux-thunk 中间件 combineReducers react-redux 开发调试工具 点餐案例，结合React技术栈，运用redux实现点餐系统的状态管理 ；

4. React项目：

   1.基于react hooks实现中大型后台管理系统的解决方案

   2.基于ant-design组件库解决方案

   3.基于react-router的前端路由解决方案

   4.基于redux的状态管理解决方案

   5.基于react-quill的富文本编辑器解决方案

   6.基于create-react-app的构建react项目解决方法

    7.基于axios封装请求工具类解决方案

   8.基于token的前端登录解决方案