目录
第一天:前端工程化与 Webpack
- 前端工程化的相关概念
- webpack的常见用法
- 打包发布
- source Map
目标:
- 了解工程化的前端开发方式
- 能够知道webpack在实际开发中所起到的作用
第二天:vue基础入门
- Vue的基本使用步骤
- Vue中常用的指令
- vue-devtools调试工具
目标:
- 能够使用Vue的指令完成页面结构的渲染2
- 能够使用Vue的调试工具辅助Vue的开发
第三天:vue基础入门- part2
- 过滤器和侦听器
- 计算属性的用法
- axios的基本用法
- vue-cli的安装和使用
目标:
- 能够在实际开发中合理运用过滤器、侦听器、计算属性解决自己遇到的问题
- 能够使用axios 发起Ajax请求
- 能够使用vue-cli工具生成工程化的Vue项目
第四天:组件与生命周期
- 组件的注册与使用
- 组件的props自定义属性
- 解决组件样式冲突
- 组件的生命周期
- 组件之间的通讯(数据共享)
目标:
- 能够掌握.vue单文件组件的基本用法
- 能够掌握组件通讯的三种方式
- 掌握组件生命周期的执行顺序和应用场景
第五天:ref &购物车案例
- 使用ref 引用DOM元素和组件实例
- $nextTick的基本使用购物车案例
目标:
- 能够使用ref 获取页面上DOM或组件的引用
- 能够知道$nextTick的应用场景并合理地使用
- 通过“购物车案例”巩固前4天所有学知识
第六天:Vue组件的高级用法
- 动态组件的使用
- 插槽的使用(默认插槽、具名插槽、作用域插槽)自定义指令
- ESLint的使用
目标:
- 能够使用keep-alive 实现组件的缓存
- 能够使用插槽提高组件的复用性
- 能够了解常见的ESLint语法规则
第七天:路由( vue-router)
- 路由的基本配置与使用
- 路由重定向
- 嵌套路由、动态路由
- 编程式导航、路由导航守卫
目标:
- 能够在项目中安装和配置路由
- 能够使用路由实现单页面应用程序的开发③
- 能够使用导航守卫控制路由的访问权限
第八天:黑马头条(收尾案例)
- Vant组件库
- 封装axios
- 上拉加载&下拉刷新
- Vant主题定制
目标:
- 掌握Vant 组件库的基本使用
- 能够知道如何封装axios请求模块
- 能够知道如何实现上拉加载和下拉刷新功能
1. webpack 的学习目标
- 理解什么是前端工程化
- 转变对前端开发的认知
- 了解webpack的基本用法
- 为后面Vue和React课程的学习做技术储备
- 不强制要求大家能手动配置webpack
- 一定要知道webpack在项目中有什么作用
- 清楚 webpack 中的核心概念
- 能够掌握webpack的基本使用
- 安装、webpack.config.js、修改打包入口
- 了解常用的plugin的基本使用
- webpack-dev-server.html-webpack-plugin
- 了解常用的loader的基本使用
- loader的作用、loader的调用过程
- 能够说出Source Map的作用
- 精准定位到错误行并显示对应的源码方便开发者调试源码中的错误
实际的前端开发:
- 模块化(js 的模块化、cSs的模块化、资源的模块化)
- 组件化(复用现有的U结构、样式、行为)
- 规范化(目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理)
- 自动化(自动化构建、自动部署、自动化测试)
2. 什么是前端工程化
前端工程化指的是:在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、
标准化。
企业中的Vue项目和React项目,都是基于工程化的方式进行开发的。
好处:前端开发自成体系,有一套标准的开发方案和流程。
3 webpack的基本使用
3.1 什么是webpack
概念: webpack是前端项目工程化的具体解决方案。
主要功能:它提供了友好的前端模块化开发支持,以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。
好处:让程序员把工作的重心放到具体功能的实现上,提高了前端开发效率和项目的可维护性。
注意:目前Vue,React等前端项目,基本上都是基于webpack进行工程化开发的
开发上线的包加-S
只在开发用的包加-D
3.2 webpack的安装使用
npm install webpack@5.42.1 webpack-cli@4.7.2 -D //安装webpack的代码
配置:
在项目根目录中,创建名为webpack.config.js 的webpack配置文件,并初始化如下的基本配置:
开发时:development
上线时:production
module.exports={
mode:'development'
}
在package.json的 scripts节点下,新增dev脚本如下:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack"
},
在终端中运行npm run dev命令,启动webpack进行项目的打包构建
npm run dev
3.3 webpack中的插件
webpack-dev-server
html-webpack-plugin
3.4 webpack中的loader
- loader概述
在实际开发过程中,webpack默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块,
webpack 默认处理不了,需要调用loader加载器才可以正常打包,否则会报错!
loader加载器的作用:协助webpack打包处理特定的文件模块。比如:
css-loader 可以打包处理.cSs相关的文件
less-loader可以打包处理.less相关的文件
babel-loader可以打包处理webpack无法处理的高级JS语法
base64图片 减少发起的网络请求,体积变大
4.vue目录
- vue简介
- vue的基本使用
- vue的调试工具
- vue的指令与过滤器
- 品牌列表案例
- 能够知道vue的基本使用步骤
- 掌握插值表达式和v-bind指令的用法
- 能够掌握如何使用v-on指令绑定事件
- 能够使用v-model指令实现数据的双向绑定
- 能够使用v-if 和v-else指令实现条件渲染
- 能够使用v-for指令实现列表数据的循环渲染
用vue的好处
基于wue中捉供的指令,可以方便快捷的渲染页面的结构,数据驱动视图〔只要页面依赖的数据源变化,则页面自动重新渲染)
总结什么是vue
一套用于构建用户界面的前端框架
4.1 vue的特性
- 数据驱动视图
- 双向数据绑定
5 单页面应用程序
5.1 什么是单页面应用程序
单页面应用程序(英文名: Single Page Application)简称SPA,顾名思义,指的是一个 Web 网站中只有唯一的一个HTML页面,所有的功能与交互都在这唯一的一个页面内完成。
5.11单页面应用程序的优点
- 良好的交互体验
- 单页应用的内容的改变不需要重新加载整个页面
- 获取数据也是通过Ajax异步获取
- 没有页面之间的跳转,不会出现“白屏现象"
- 良好的前后端工作分离模式
- 后端专注于提供API接口,更易实现API接口的复用
- 前端专注于页面的渲染,更利于前端工程化的发展
- 减轻服务器压力
- 服务器只提供数据,不负责页面的合成与逻辑的处理,吞吐能力会提高几倍
5.12单页面应用程序的缺点
- 首屏加载慢
- 路由懒加载
- 代码压缩
- CDN加速网络
- 传输压缩
- 不利于SEO
- SSR服务器端渲染
5.3 vue项目的运行流程
在工程化的项目中,vue要做的事情很单纯:通过main.js|把 App.vue渲染到index.html的指定区域中。
5.4 如何快速创建vue的spa项目
- vite
- vue-cli
5.41 vite创建
npm init vite-app xxx
5.42 vite项目的运行流程
在工程化的项目中,vue要做的事情很单纯:通过main.js 把App.vue渲染到 index.html的指定区域中。
1.从 vue中按需导入createApp函数,
createApp函数的作用:创建vue的“单页面应用程序实例”
2. 导入app组件
3. 调用createapp函数 接受实例
4. mount挂载
6. 组件化开发思想
- 能够说出什么是单页面应用程序和组件化开发
- 能够说出.vue单文件组件的组成部分
- 能够知道如何注册vue的组件
- 能够知道如何声明组件的props属性
- 能够知道如何在组件中进行样式绑定
6.0 什么是组件化开发
组件化开发指的是:根据封装的思想,把页面上可重用的部分封装为组件,从而方便项目的开发和维护。
6.1 组件化开发的好处
前端组件化开发的好处主要体现在以下两方面:
- 提高了前端代码的复用性和灵活性
- 提升了开发效率和后期的可维护性
6.2 注意的点
- 起名首字母大写
6.1 组件之间的父子关系
组件封装好后,彼此之间是相互独立的,不存在父子关系
在使用组件的时候,根据彼此的嵌套关系,形成了父子关系,兄弟关系
6.3 配置less语法
- 安装
npm install lees -D
- 标签上添加
<style lang="less" scoped>
h1 {
color: pink;
i{
color: greenyellow;
}
}
</style>
6.4 使用组件的三个步骤
引用
注册
- 全局注册
调用方法app.component(‘组件名’,组件)
- 局部注册
components:{
'Hi':Hi
}
注册时, 可以写xxx.name 当名字
写标签
6.5 组件注册名字的问题
- 短横线命名法 xxx-xxx
- 驼峰法 MyAxx
6.3 组件的props
props是组件的自定义属性,在封装通用组件的时候,合理地使用props可以极大的提高组件的复用性!它的语法格式如下:
props:['xxx' ]
vue规定:组件中封装的自定义属性是只读的,程序员不能直接修改props的值。
要想修改props 的值,可以把props的值转存到data中,因为data中的数据都是可读可写的!
6.31 props的默认值
props:{
xxx:{
default:0
}
}
6.32 props的type值
在声明自定义属性时,可以通过type来定义属性值的类型
6.4 组件的样式冲突问题
加一个 scoped 就行
<style lang="less" scoped>
h1 {
color: pink;
i{
color: greenyellow;
}
}
</style>
6.5 如何修改子组件的样式
使用样式穿透
:deep(xxx) {
}
6.6 封装组件
6.7 总结
- 能够说出什么是单页面应用程序及组件化
- spa,只有一个页面,组件是对UI结构的复用
- 能够说出vue单文件组件的组成部分
- 能够知道如何注册vue组件
- 全局注册(app。component),局部注册(components)
- 能够知道如何声明组件的props属性
- porps数组
- 能够知道如何在组件中进行样式绑定
- 动态绑定class,动态绑定style
6.8 props验证
使用对象类型的props
7.0 计算属性
7.1 什么是计算属性
计算属性本质上就是一个function函数,它可以实时监听data中数据的变化,并return一个计算后的新值,供组件渲染DOM时使用。
7.2 如何声明计算属性
计算属性需要以function函数的形式声明到组件的computed选项中。
注意:计算属性侧重于得到一个计算的结果,因此计算属性中必须有return返回值@!
7.3 计算属性的使用注意点
① 计算属性必须定义在computed节点中
② 计算属性必须是一个function函数
③ 计算属性必须当做普通属性使用
④ 计算属性必须有返回值
7.4 计算属性的优点
他会缓存计算的结果,只有计算的属性改变以后才会重新计算,性能更好
8.0 自定义事件
8.1 什么是自定义事件
在封装组件时,为了让组件的使用者可以监听到组件内状态的变化,此时需要用到组件的自定义事件。
8.2 声明自定义事件
在emits节点中声明
触发事件
this.$emit('change')
8.3 组件上的v-model
可以维护组件内外数据的同步
父传子步骤:
- 通过v-bind绑定,把数据传给子组件
- 子组件接受
子传父步骤:
- 指令前添加v-model
- emits自定义事件派发emits:[‘update:number’],
- this.$emit(‘update:number’,this.number+1)
8.4 小结
- 能够知道如何对props进行验证
- 数组格式、对象格式
- type、default、required、validator
- 能够知道如何使用计算属性
- computed节点、必须return一个结果、缓存计算结果
- 能够知道如何为组件绑定自定义事件
- v-on绑定自定义事件、emits、$emit()
- 能够知道如何在组件上使用v-model
- 组件内外数据同步
9.1 目标&目录
目标
- 能够掌握watch侦听器的基本使用
- 能够知道vue中常用的生命周期函数
- 能够知道如何实现组件之间的数据共享
- 能够知道如何在vue3.x的项目中全局配置axios
目录
- watch 侦听器
- 组件的生命周期
- 组件之间的数据共享
- vue 3.x中全局配置axios
- 购物车案例
9.2 watch侦听器
9.21 什么是 watch 侦听器
watch 侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作。
例如,监视用户名的变化并发起请求,判断用户名是否可用。
9.22 watch侦听器的基本语法
开发者需要在watch节点下,定义自己的侦听器。实例代码如下: