适用人群
A.对vue框架感兴趣
B.前端在职,提高进一步的需求
C.希望快速入门vue开发的相关人员
前置储备
必备前提:
HTML + CSS +JS
WebAPI
Ajax
可选前提
Node.js
第一天：前端工程化与Webpack
前端工程化的相关概念
Webpack的常见用法
打包发布
Source Map
目标：
了解工程化的前端开发方式
能够指定Webpack在实际开发中所起到的作用
学习目标1
Webpack的学习目标
理解什么是前端工程化
转变对前端开发的认知
了解Webpack的基本用法
为vue和react的学习做技术储备
不强制要求手动配置Webpack
一定要知道Webpack在项目中有什么作用
清除Webpack中的核心概念
1.理想中的前端开发与实际的前端开发
会写HTTP+CSS+JS
需要美化页面样式,会弄一个bootst
需要操作DOM或发起Ajax请求,会弄jQuery
需要快速实现网页布局效果,会弄Layui
实际的前端开发
模块化(js的模块化、css的模块化、资源的模块化)
组件化(复原现有的UI结果、样式、行为)
规范化(目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理)
自动化(自动化构建、自动部署、自动化测试)
2什么是前端工程化
指的是：企业级的前端项目开发中,把前端开发所需的工具 技术 流程 经验等进行规范化
标准化
企业中的vue和react,都是基于工程化的方式进行开发的
好处：前端开发自成体系,有一套标准的开发方案和流程
3前端工程化的解决方案
早期的前端工程化解决方案
grunt
gulp
目前主流的前端工程化解决方案
webpack
parcel
webpack的基本使用
1.什么是webpack
概念:webpack是前端项目工程化的具体解决方案
主要功能：它提供了友好的前端模块化开发支持,以及代码压缩混淆、处理器端JS的兼容
性能优化等强大的功能。
好处：把工作的重新放到具体功能的实现上,提高了前端开发效率和项目的可维护性
注意：目前ver,react等前端项目,基本上都是基于webpack进行工程化开发
通俗:可以把高级代码转成低级代码
2.创建列表隔行变色项目
新建项目空白目录,并运行 npm init -y命令,初始化包管理配置文件package.json
新建src源代码目录
新建src->index.html首页和src->index.js脚本文件
初始化首页基本的结构
运行npm install jquery -S命令 安装jQuery
通过ES6模块化的方式导入jQuery，实现列表隔行变色效果
npm install jquery -S == npm install jquery --save
-D=--save -dev
3.项目中安装webpack
在终端运行如下的命令,安装webpack相关的两个包
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
4.在项目中配置webpack
不能只安装不配置
1在项目根目录中,创建名为webpack.config.js的webpack.js配置文件
module.esports ={
node:'development'用来指定构建模式,可选值有development和production
}2在package.json的script节点下,新增dev脚本
"script":{
"dev":"webpack"//script节点下的脚本 可以通过npm run
}3在终端中运行npm run dev命令 启动webpack进行项目的打包构建
asset main.js 328 KiB [emitted] (name: main)
runtime modules 937 bytes 4 modules
cacheable modules 286 KiB
./src/index.js 310 bytes [built] [code generated]
./node_modules/jquery/dist/jquery.js 286 KiB [built] [code generated]
webpack 5.79.0 compiled successfully in 234 ms
4.使用porduction和development
porduction
asset main.js 88.3 KiB [compared for emit] [minimized] (name: main) 1 related asset
runtime modules 663 bytes 3 modules
cacheable modules 286 KiB
./src/index.js 310 bytes [built] [code generated]
./node_modules/jquery/dist/jquery.js 286 KiB [built] [code generated]
webpack 5.79.0 compiled successfully in 1293 msporduction的main.js文件会被压缩混淆 打包时间很长 体积小
development的main.js文件 打包时间很短 体积大
开发的时候追求的是打包的速度
上线的时候才追求体积
4.2 webpack中的默认约定
在webpack4.x和webpack5.x版本中,如下的默认约定
默认的打包入口文件为src->index.js
默认的输出文件路径为dist->main.js
注意：可以在webpack.config.js中修改打包的默认约定
4.3自定义打包的入口与出口
在webpack.config.js配置文件中,通过entry节点指定打包的入口,通过output节点指定打包的出口
__dirname表示所处的根目录
entry: path.join(__dirname, './src/index.js'),
// __dirname表示所处的根目录
// 指定生成的文件要存放放到哪里
output: {
// 存放到目录
path: path.join(__dirname, 'dist'),
//生成的文件名
filename: 'bundle.js'
// 就说默认main名字 变成bundle.js 记得js的路径要变
}4.4 webpack插件的使用
通过安装和配置第三方的插件可以拓展webpack的能力 从而让webpack用起来很方便
1 webpack-dev-server
每当修改了源代码 webpack会自动进行项目的打包和构建
运行如下命令
npm install webpack-dev-server@3.11.2 -D
2配置webpack-dev-server
修改->package.json->scripts中的dev命令如下
"scripts":{
"dev":"webpack serve"
}2 再次运行npm run dev命令,重新进行项目的时候
3 在浏览器中访问http://localhost:8080地址,查看自动打包效果
如果要停止webpack-dev-server
ctrl + c 连续两次
4.4 安装 html-webpack-plugin
运行如下的命令 即可在下面中安装
npm install html-webpack-plugin@5.3.2 -D
1 通过HTML插件复制到项目目录中的index.html页面 也被放到内存中
2 HTML插件在生成的index.html页面 自动注入了打包的bundle.js文件
4.5 devServer节点
在webpack.config.js配置文件中,可以通过devServer节点对webpack.config.js插件进行配置
devServer: {
// 首次打包成功后 自动打开浏览器
open: true,
// http协议中 端口是80 则可以省略
port: 80,
// 指定运行的主机地址
host: '127.0.0.1'
}注意 凡是修改了webpack.config.js配置文件 或者修改了package.json配置文件
必须重启实时打包的服务器,否则最新的配置文件无法失效
webpack中的loader
1.loader加载器概述
实际开发中,webpack默认只能打包处理以.js后缀名的模块,其他的模块默认处理不了
需要调用loader加载器才可以正常打包,否则报错
loader加载器的作用:协助webpack打包处理特定的文件模块
css-loader可以打包处理.css相关的文件
js-loader可以打包处理.js相关的文件
html-loader可以打包处理.htl相关的文件
2.loader的调用过程
->是否配置了babel
->是否包含了高级js语法
打包的文件模块 ->是否为js ->webpack进行处理
->loader进行处理
->是否配置了对于loader
->报错
3.打包处理css文件
运行npm i style-loader@3.0.0 css-loader@5.2.6 -D
在webpack.config.js的module->rule的数组中 添加数组
module: {
rules: [
// 定义了不同模块对应的loader
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
}其中test 表示匹配的文件类型 use表示对应要调用的loader
注意:
use数组中指定的loader 顺序是固定的
多个loader的调用顺序是:从后往前调用
4.打包处理less文件
运行npm i less-loader@10.0.1 less-loader@4.1.1 -D 在webpack.config.js的module->rule的数组中 添加数组
module: {
rules: [
// 处理.less文件的loader
{ test: /\.css$/, use: ['style-loader', 'css-loader', 'less-loader'] },
]
},5.base64的图片优缺点
base的缺点是内存为变，
优点既获得小图片和他标签也防止没有必要的请求
6.打包处理样式表中与url路径相关的文件
运行npm i url-loader@4.1.1 file-loader@6.2.0 -D命令在webpack.config.js的module->rule的数组中 添加数组
module: {
rules: [
// 处理图片文件的loader
// 如果需要调用的loader只有一个 则只传递一个
{ test: /\.jjpg|png|gif$/, use: 'url-loader?limit=22229' }
]
},其中?之后的是loader的参数项
limit用来指定图片的大小,单位是字节
只有<=limit大小的图片,才会被转为base64格式的图片
7. 打包处理js文件中的高级语言
webpack只能打包处理一部分高级语言的js语法 对于哪些webpack无法处理的高级js语法
需要借助于babel-loader 进行打包处理 例如webpack无法处理下面的js代码
7.1 安装babel-loader相关的包
运行如下的命令安装对应的依赖包:
npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D在webpack.config.js的module->rules数组中 添加loader规则如下
注意： 必须使用exclude 指定排除项：因为node_modules 目录下的第三方插件
{test: /\.js$/}
7.2 配置babel-loader
在项目根目录下 创建名为babel.config.js的配置文件 定义babel的配置项
// 使用babel-loader处理高级的js语法 只需要自己的代码进行转换即可
// 一定要排除node_modules目录中的js文件
// 因为第三方包的js兼容性 不需要关心
{ test: /\.js$/, use: 'babel-loader', exclude: '/node_modules/' }
打包发布
1.配置webpack的打包发布
在package.json文件的scripts节点下 新增build命令
"scripts": {
"dev": "webpack serve",
"build": "webpack --mode production"
},--model是一个参数项,用来指导webpack的运行模式
production代表生产环境 会对打包生成的文件
进行代码压缩和性能优化
注意:
通过--model指定的参数项,会覆盖webpack.config.js中的model选项
2. js文件统一生成js目录中
在webpack.config.js配置文件的output节点中
output: {
path: path.join(__dirname, 'dist'),
filename: 'js/bundle.js'
//两个意思就是放到dist目录下的js文件夹之中
},
// 在配置url-loader的时候 多个参数之间使用&&符号进行分割
{ test: /\.jjpg|png|gif$/, use: 'url-loader?limit=22229 && outputPath=images' },
8. 自动清理dist目录下的旧文件
为了每次打包发布时自动清理dist目录中的旧文件
可以安装配置clean-webpack-plugin
Source Map
1. 什么是Source Map
Source Map就是一个信息文件,里面储存着位置信息
Source Map文件中储存着压缩混淆后的代码 所对应的转换前的位置
有了它 出错的时候 除错工具直接显示原始代码 而不是转换后的代码 能够极大方便的后期调试
2. 默认Source Map的问题
开发环境下默认生成的Source Map,记录的是生成后的代码的位置。
会导致运行时报错的行数与源代码的行数不一致的问题
3.解决默认Source Map的问题
开发环境下,推荐在webpack.config.js中添加如下的配置
即可保证运行时报错的行数与源代码的行数保持一致
module.exports = {
// 开发调试阶段 建议把devtools的值改为eval-source-map
devtools: 'eval-source-map',
mode: 'development',//用于构建模式 production和development
}4.webpack生产环境中Source Map
在生产环境中 如果省略devtool,则最终生成的文件不包含source map
这能够防止原始代码通过Source Map形式暴露给另有所图之人
5.只定位行数不暴露
在生产环境中 如果只想定位报错的具体行数 且不想暴露源码
此时可以将devtool的值设置为nosources-source-map
module.exports = {
// // 发布阶段 建议把devtools的值改为nosources-source-map
devtools: 'nosources-source-map',
mode: 'development',//用于构建模式 production和development
}注意
采用此选项 你应该将你的 服务器配置为,不允许用户访问source map 文件
6.Source Map的最佳实践
开发环境下
建议把devtool的值设置为eval-source-map
好处:可以精确定位到具体的错误行
生产环境下
建议关闭Source Map或将devtool的值设置为nosources-source-map
好处:防止源码泄露 提高网站的安全性
实际开发中需要自己配置webpack嘛
思考:
不需要
实际开发中会使命令行工具(CLI)一键生成带有webpack的项目
开箱即用 所有webpack配置项都是现成的
只需要知道webpack基本概念
VUE基础入门
vue简介
1.什么是vue
是一套用于构建用户界面的前端框架
构建用户界面<->框架
1.1构建用户界面
往html页面中填充数据,非常的方便
1.2框架
是一套现成的解决方案,程序员只能遵守框架的规范去编程自己的业务能力
要学习vue 就是在学习vue框架中规定的用法
vue的指令 组件(是对UI结构的复用)、路由、Vuex vue组件库
只有把上面罗列的内容掌握,才有开发vue项目的能力
2.vue的特性
vue框架的特性,主要体现在如下两方面
1 数据驱动视图
2 双向数据绑定
数据专为核心
2.1 数据驱动视图
在使用了vue的页面中,vue会监听数据的变化,从而自动重新渲染页面的结构
自动渲染 变化
页面结构<-----------vue监听数据的变化<-------->页面所依赖的数据
数据驱动视图
好处 程序员只要把数据维护好,当页面数据发送变化时,页面会自动重新渲染
注意:数据驱动视图是单向的数据 绑定
数据的变化会驱动视图自动更新
2.2 双向数据绑定
在填写表单时,双向数据绑定可以辅助开发者在不操作DOM的前提下
自动把用户填写的内容同步到数据源中
好处 开发者不需要手动操作DOM元素 来获取表单元素最新的值
在网页中 form表单负责采集数据 Ajax负责提交数据
自动渲染 变化
页面结构<-----------vue<-------->页面所依赖的数据
-----------> --------->
值发生变化 自动同步
js数据的变化 会被自动渲染到页面上
页面上表单采集的数据发送变化的时候,会被vue自动获取到,并更新到js中
注意:数据驱动视图和双向数据绑定的底侧原理是MVVM(Mode数据源 View视图 ViewModel就是vue的实例)
2.3 MVVM
MVVM是vue实现数据驱动视图和双向数据绑定的核心原理
MVVM指的是Model View 和ViewModel
它把每个html页面拆分成三个部分
MVVM概念中
Model 表示当前页面渲染时所依赖的数据源
View 表示当前页面所渲染的DOM结构
ViewModel 表示vue的实例 它是MVVM的核心
View ViewModel Model
DOM vue jsObject
MVVM示例图
2.4 MVVM的工作原理
ViewModel作为MVVM的核心,是它把当前页面的数据源(Model)和页面结构(View)连接在一起
自动更新 监听数据源变化
View<-----------ViewModel<----------->Model
-----------> ----------->
监听DOM变化 自动同步
MVVM的工作原理
当数据源发送变化时,会被ViewModel监听到,VM会根据最新的数据源自动更新页面的结构
当表单元素的值发送变化时,也会被VM监听到,VM会把变化过后最新的值自动同步到Model数据源中
3.vue的版本
当前vue共有3个大版本其中
2.x版本的vue是目前企业级项目开发中的主流版本
3.x版本的vue于2020-09-19发布,生态还不完善,尚未在企业级项目开发中普及和推广
1.x版本的vue几乎被淘汰,不再建议学习与使用
总结：
3.x版本的vue是未来企业级项目开发的趋势
2.x版本的vue在未来会被逐渐淘汰
vue的基本使用
1.基本使用步骤
1 导入vue.js的script脚本文件
2 在页面中声明一个将要被vue所控制的DOM区域
3 创建vm实例对象
vue的指令与过滤器
1.指令的概念
指令是vue为开发者提供的模板语法 用于复制开发者渲染页面的基本结构
vue中的指令按照不同的用途可以分为如下6大类
内容渲染指令 属性绑定指令 事件绑定指令
双向绑定指令 条件渲染指令 列表渲染指令
注意:指令是vue开发中最基础 最常用 最简单的知识点
1.1 内容渲染指令
内容渲染指令依赖辅助开发者渲染DOM元素的文本内容 常用的有3个
v-text {{}} v-html
v-text
缺点:会覆盖元素原有的内容
用法示例
<!-- 把username 对应的值 渲染到第一个p标签中 -->
<p v-text="username"></p>
<!-- 把gender对应的值 渲染到第二个p标签中0 -->
<!-- 注意： 第二行p标签中 默认的文本 性别会被gender的值覆盖掉 -->
<p v-text="gender">性别</p>{{}}
vue提供的{{}}语法,专门用来解决v-text会覆盖默认文本内容的值问题
{{}}语法专业名称是插值表达式
实际开发中用的最多,只是内容的占位符 不会覆盖原有的内容
v-html
v-text指令和插值表达式只能渲染纯文本内容。
如果要包含html标签的字符串渲染为页面的html元素 则用v-html
1.2 属性绑定指令
注意：
插值表达式只能用在元素的内容节点中 不能用在元素的属性节点中
如果需要为元素的属性动态绑定属性值 则需要用到v-bind属性绑定指令
简写
vue规定v-bind:指令可以简写为:
使用JS表达式
在vue提供的模板渲染语法中,除了支持绑定简单的数据值之外 还支持js表达式的运算
{{number + 1}}
{{ok ? 'yes':'no'}}在v-bind期间 如果绑定内容需要进行动态拼接 则字符串的外面应该包裹单引号
<div :title="'box'+index">这是一个div</div>1.3 事件绑定指令
vue提供了v-on事件绑定指令,用来辅助程序员为DOM元素绑定事件监听。
<p>count的值是:{{ count }}</p>
<button v-on:click="add">+1</button>
methods: {
add: function () {
console.log('ok');
}
}简写
<p>count的值是:{{ count }}</p>
<button @click="add">+1</button>
methods: {
add() {
console.log('ok');
}
}
<!-- v-on:指令可以被简写为@ -->注意:原生DOM对象有onclick oninput onkeyup等原生事件
分别为:v-on:click v-on:input v-on:keyup
在需要用哪个实验对象的时候 用$event
<button @click="add(n,$event)">+N</button>
method: {
add(n,e) {
this.count += n
if (this.count % 2 === 0) {
// 偶数
e.target.style.backgroundColor = 'red'
} else {
e.target.style.backgroundColor = ''
// 奇数
}
}
}事件修饰符
在事件处理函数中调用event.preventDefault()或event.stopPropagation()
因此vue提供了事件修饰符的概念,来辅助程序员更方便的对事件的触发进行控制
.prevent 阻止默认行为 *
.stop 阻止事件冒泡 *
.capture 以捕获模式触发当前的事件处理函数
.once 绑定的事件只触发1次
.self 只有在event.target是当前原生自身时触发事件处理函数
语法格式
<a href="http://www.bnaidu.com" @click.prevent="show">跳到百度首页</a>
按键修饰符
在监听键盘事件 外面经常需要判断详细的按键 此时可以为键盘相关的事件添加按键修饰符
<!-- 只有在key是Esc时调用vm.clearInput -->
<input type="text" @keyup.esc="clearInput" @keyup.enter="comit">
<!-- 只有在key是Esc时调用vm.comit -->
<input type="text" @keyup.enter="comit">
1.4 双向绑定指令
vue提供了v-model双向数据绑定指令 用来辅助开发者不操作DOM元素的前提 快速获取表单
v-model是双向 v-bind是单向
只有root改变重新渲染 ™两个才会变
input输入框 type=radio type='xxx'
textarea select
为了方便对用户输入的内容进行处理 vue为v-model提供了3个修饰符
.number 自动将用户的输入值转化为数值类型
.trim 自动过滤用户输入的首尾空白字符
.lazy 在"change"时而非"input时更新"
<input type="text" v-model="n1">+
<input type="text" v-model="n2">=
<span>{{ n1+n2}}</span>1.5 条件渲染指令
条件渲染指令用来辅助开发者按需控制DOM的显示与隐藏
条件渲染指令有如下两个
v-if v-show
2.过滤器
过滤器是vue为开发者提供的功能 常用于文本的格式化 过滤器可以用在两个地方
过滤器可以用在两个地方:插值表达式 v-bind
过滤器应该被添加在js表达式的尾部 由管道符进行调用
在双花括号中通过管道符调用capi过滤器 对message的值进行格式化
<p>message的值是:{{ message | capi }}</p>
// 过滤器本质上是函数
filters: {
capi(val) {
// val.charAt(0) 把字符串把对应索引值
// val 是指竖线前面的值 现在是message val也是任意的
const first = val.charAt(0).toUpperCase()
const other = val.slice(1)
// 强调: 过滤器中 一定要由一个返回值
return first + other
}
}过滤器的注意点
1.定义到filters节点下 本质是一个函数
2.在过滤器函数中,一定要有return值
3.在过滤器的形参中 就可以获取到管道符前面待处理的哪个值
4.如果全局过滤器和私有过滤器
2.2 私有过滤器和全局过滤器名字一致 此时按照就近原则 调用的是私有过滤器在filterts节点下定义的过滤器称为私有过滤器 因为只能在vm实例所控制的el区域内使用
如果希望在多个vue实例之间共享过滤器 则可以按照如下的格式全局过滤器
第1个参数 是全局过滤器的名字
第2个参数 是全局过滤器的处理函数
// 使用Vue.filter()定义全局过滤器
Vue.filter('capi', function (str) {
const first = str.charAt(0).toUpperCase
const other = str.slice(1)
return first + other
})2.3 连续调用多个过滤器
过滤器可以串联地进行调用,例如
把message的值 交给capi进行处理
把capi处理的结果 再交给avx进行处理
最终把avx处理的结果 作为最终的值渲染到页面上
{{ message | capi | avx}}2.4 过滤器传参
过滤器的本质是js函数
<p>message的值是:{{ message | capi }}</p>
第一个参数 永远都是管道符前待处理的值
第二个参数开始 才是调用过滤器传参过来的arg1 arg2
Vue.filter('filterA',(msg,arg1,arg2)=>{
//过滤器的代码递减
})
2.5 过滤器的兼容性
过滤器仅在2.x和1.x中受支持
在企业级项目开发中
使用的是2.x版本的vue 则依然可以使用过滤器的相关功能
如果项目已经升级到了3.x版本的vue 官方建议计算属性或方法代替
1745
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
