Vue基础介绍,Vue2.0,Vue3.0
https://www.bilibili.com/video/BV1zq4y1p7ga?p=2&vd_source=af58e28c982277b2a4a63e033dca413c
1、前端工程化与webpack
前端工程化的相关概念
Webpack的常见用法
打包发布
Source Map
了解工程化的前端开发方法
能够知道Webpack在实际开发中所起到的作用
2、Vue的基本使用步骤
Vue中常用 的指令
vue-devtools调试工具
目标:
1、能够使用Vue的指令完成页面结构的渲染
2、能够使用Vue的调试工具辅助Vue的开发
3、Vue基础
过滤器和侦听器
计算属性的用法
axios的基本用法
vue-cli的安装和使用
目标:
能够在实际开发中合理运用过滤器侦听器计算属性解决自己遇到的问题
能够使用axios发起Ajax请求
能够使用vue-cli工具生成工程化的vue项目
第四天:组件与生命周期
组件的注册和使用
组件的props自定义属性
解决组件样式冲突
组件的生命周期
组件之间的通讯(数据共享)
目标:
能够掌握.vue单文件组件是基本用法
能够掌握组件通讯的三种方式
掌握组件生命周期的执行顺序和应用场景
第五天
ref & 购物城案例
使用ref引用dom元素和组件实例
$nextTick的基本使用
第六天 Vue组件的高级用法
动态组件的使用
插槽的使用
自定义指令
ESLint的使用
目标:
能够使用keep-alive实现组件的缓存
能够使用插槽提供组件的复用性
能够了解常见的ESLint语法规则
第七天
路由 vue-router
路由的基本配置与使用
路由重定向
嵌套路由,动态路由
编程时导航,路由导航守卫
目标:
能够在项目中安装和配置路由
能够使用路由实现单页面应用程序的开发
能够使用导航守卫控制路由的访问权限
第八天
Vant组件库
封装axios
上拉加载和下拉刷新
Vant主题定制
目标:掌握Vant组件库的基本使用。
能够知道如何封装axios请求模块。
能够知道如何实现上拉加载和下拉刷新功能。
前端工程化与Webpack
理解什么是前端工程化
了解webpack的基本用法
不强制要求大家能手动配置webpack
小白眼中的前端开发
实际的前端开发 重点
模块化(js的模块化、css的模块化、资源的模块化)
组件化(复用现有的UI结构、样式、行为)
规范化(目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理)
自动化(自动化构建、自动部署、自动化测试)
把前端开发所需的工具,技术、流程、经验等进行规范化、标准化
企业中的Vue项目,都是基于工程化的方式进行开发的;
有一套标准的开发方案和流程;
前端工程化的解决方式
目前主流的前端工程化解决方案
webpack:代码压缩混淆、处理浏览器端javaScript的兼容性、性能优化;等强大的功能;
可以放心大胆的写JavaScript高级语法知识;运行的时候webpack自动转化;大胆放心的写高级语法;IE8的解决方案;
好处:让程序员把工作的重心放到具体功能的开发上;提高前端的开发效率;