Vue 学习第五天
1. keyup事件
<div id="app">
<input type="text" v-model="firstName"@keyup="getFullname">
<input type="button" value="+">
<input type="text" v-model="lastName" @keyup="getFullname">
<input type="button" value="=">
<input type="text" v-model="fullName" @keyup="getFullname">
</div>
<script>
var vm = new Vue({
el : '#app',
data : {
firstName : '',
lastName :'',
fullName : '',
},
methods : {
getFullname (){
this.fullName = this.firstName + this.lastName;
}
}
});
</script>
2. watch 属性，监听相关数据变化，用function 实现
watch : { ///其与methods 平级 监听firstame 的变化，
firstName : function(){
//优势，监听非DOM 元素的变化
}
}
// watch :{
'$route.path' (newVal,oldVal){
//console.log(newVal +'--'+oldVal);
if(newVal == '/login'){
}else{
}
<body>
<!--watch 监听路由，
watch 监听非DOM 元素的变化，
-->
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view> <!--展示的容器-->
</div>
<script>
//1. 创建子组件，
var login ={
template :'<h1>这个是登录子组件，刘送杰开发的</h1>'
};
var register ={
template :'<h1>这个是注册子组件，刘送杰开发的</h1>'
};
//创建路由对象，然后构造路由 规则
var router = new VueRouter({
routes :[ //这个是一个路由规则数组
{path :'/',redirect : 'login'},
{path : '/login',component:login},
{path : '/register',component:register},
],
linkActiveClass : 'myactive' //激活相关的类
});
var vm = new Vue({
el : '#app',
data : {
},
methods : {
},
router,
watch :{
'$route.path' (newVal,oldVal){
//console.log(newVal +'--'+oldVal);
if(newVal == '/login'){
}else{
}
}
}
});
3. computed 计算属性，重新求值，相当于监听这个元素或者数学的变化
computed : {
fullName : fucntion(){
return value; //记得返回值
}
}
4. 工具nrm 的使用
1.先安装node.js 然后就自带了npm工具，
2. 然后安装 nrm。安装指令 npm - i nrm -g 安装为全局可用
[npm i ****] 安装某个包
npm i jquery 安装jquery包
3. nrm ls 查看，ls --->> list 查看当前镜像，
【
nrm use npm 切换到相关镜像
nrm use taobao
】
nrm 是提供了几个下载包的切换地址，为了方便切换，
下载包还是使用npm
5. webpack 的学习与使用
5.1 网页静态资源： JS （.js .jsx .coffee .ts ），CSS ( .css .less .sass -->>.scss )， Images(.jpg .png .gif .bmp .ps .svg ) ，Fonts( .svg .ttf .woff .eot ) ,模板文件( .ejs .jade .vue(这个是在webpack中定义组件的方式，推荐这么用) )
5.2 网页中，静态资源多了以后，会有什么问题？？
1. 网页加载速度慢，因为要发起很多二次请求，拿html 代码,解析完毕以后，-->>拿 js/拿CSS ,大量的请求。
2.要处理错综复杂的包之间的依赖关系，
5.3如何解决上述问题？？
1. 合并、压缩（图片与js、css），精灵图（合并图片），图片的Base64编码，src= ‘XXXXX’ 。等于一个字符串，图片转成字符串，
2.可以使用之前的 requireJS ,和 webpack ,,利用它们去解决各个包之间的复杂依赖关系，
5.4 什么是webpack
5.4.1 webpack 是一个前端项目构建工具，是基于node.js 开发出来的一个工具，必须安装node.js。
5.4.2 如何完美的结局上述问题，
1.使用Gulp。基于任务task 的，（小）
2.使用webpack。 基于整个项目进行构建的。（大）
借助于webpack这个前端自动化构建工具，可以实现资源的合并、打包、压缩、混淆等功能。
webpack 打包工作过程
6. webpack 安装
第一种npm i webpack -g
第二种 npm i webpack --save-dev 安装到项目跟目录
如何查看webpack 是否安装成功
（1）安装完成以后报错，
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
（2）选择指令 webpack-cli 还是报错，
然后选择新的指令 npm i webpack-cli -g
安装成功， 使用webpack -v 查看到版本信息号。
（3）webpack .\src\main.js .\dist\bundle.js 报错
原因是版本太高 ，我安装的是V4.14.0, V3.0以下的不会报错
解决方法：web-pack>webpack .\src\main.js --output .\dist\bundle.js
中间加一个 --output 指令
【
Usage without config file: webpack <entry> [<entry>] --output [-o] <output>
Notice: --output need to be specified explicitly
webpack ./src/index.js --output ./dist/bundle.js --mode development
Add --output to it will be ok.
】
7. webpack 初步熟悉使用
1. 建立项目文件夹 （文件夹或者名称你可以自定义，但是尽量标准化）
2.建立项目目录，必须目录和必须文件，然后使用项目指令
（1.） dist --存放打包文件
（2.） src --存放文件
（3） src 下下面建立 css /js/images 文件
（4） 在src 目录下，建立必备文件目录，index.html main.js
3.整个部署于使用过程如下。
犯错总结：index.html 中忘记引包了src="../dist/boudle.js"，所以没有效果。。。。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>组件的开发</title>
<script src="../dist/boudle.js"></script>
</head>
<!--
1.想要控制li,需要引入Jquery
2. 倒入Jquery包，使用 npm 指令，
3.初始化一下 npm init：这个命令用于创建一个package.json。 特别要注意路径
npm init --yes或npm init -y:从当前目录中提取的信息生成默认的package.json。创建过程中不会提问。
4. npm i jquery -s 安装Jquery(倒入)jquery
5. 到main.js 中去编辑相关代码和指令,
6.写好以后，明知道不会兼容，因此需要webpack 打包一下，
7.webpack .\src\main.js --output .\dist\boudle.js
8.index.html 中忘记引包了src="../dist/boudle.js"，所以没有效果。。。。
-->
<body>
<ul>
<li>111111</li>
<li>22222</li>
<li>1333</li>
<li>1333</li>
<li>13333</li>
<li>13333</li>
<li>1333</li>
<li>14444</li>
<li>14994</li>
<li666></li>
</ul>
</body>
</html>
webpack 4.14.0 版本太高，无法执行相关指令，指令不熟悉，高版本切换到低版本，
直接重新安装就行，使用 npm i [email protected] -g
8. [webpack.config.js]学习。鉴于每次修改配置文件，没有立即生效，需要手动重新打包，指令过程的问题，
webpack .\src\main.js --output .\dist\boudle.js
因此，设置配置文件，webpack.config.js 简化打包指令。
【配置如下
const path = require('path');
//配置入口和出口文件..这个文件其实就是一个js 文件，通过Node 中的模块操作，向外暴露一个配置对象
module.exports = {
//在配置文件中，手动指定入口和出口文件，
//怎么配置呢？？
entry: path.join(__dirname,'./src/main.js') , //入口，表示要使用webpack 打包哪个文件
output:{ //出口文件
path : path.join(__dirname,'./dist'), //指定打包好的出口文件的存放目录，
filename : 'bundle.js' //指定输出文件名称
}
}
】
直接使用 webpack命令 就行。
他主要是做了以下工作：
1.webpack
9.想实现webpack 自动监听代码修改，就自动打包。
但是需要 webpack-dev-server 这个工具，来实现自动打包编译的功能
1.运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地，开发依赖，
2. 安装完毕以后，这个工具的用法，和webpack 命令的用法完全一致，
webpack --->>> 要使用webpack-dev-server，需要在本项目中安装 【具备webpack 】
3. 由于是在项目中本地安装的dev-server ，所以无法把他当作全局脚本命令在powershell 终端中运行，只有那些安装到全局，-g 中的才能在终端执行。
需要到 package.json 中去进行相关注册。
安装完毕以后，想运行 npm run dev ，但是报错。
，那么怎么办呢？
就把\node_modules 删掉，则需要重新安装相关包。 npm i 安装所有包，（一旦提示有什么包没有安装，则安装一下）。
npm i [email protected] -D （项目具备安装）
npm i webpack-dev-server -D （项目局部安装）
npm i 报错
webpack webpack-dev-server wepack-cli 相关版本之间的兼容性
【版本兼容性问题错误总结，耽误半天学习】
一定不要运行npm i XXX -g(-d) 一定要指定版本，尽量低版本，也不最新版本，会导致不兼容和指令不一样的问题。
1.安装webpack-dev-server 报错，说需要webpack-cli，原因，这两个之中某一个版本太高。，重新安装低版本
2.安装webpack-cli ，然后还是不能使用，
3. npm WARN [email protected] requires a peer of webpack@^4.x.x but none is installed. You must install peer dependencies yourself.。。说明安装的Webpack版本太高，切换到，---》》》》》》》》》"webpack": "^3.6.0",
4.最后安装 "webpack-cli": "^3.0.0", 【局部安装】
5.安装"webpack-dev-server": "^2.9.1" 【局部安装】
6.安装webpack【局部安装】
报错总结：
【1】
npm WARN [email protected] requires a peer of webpack@^4.x.x but none is installed. You must install peer dependencies yourself.
【2】
npm WARN [email protected] requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@^4.0.0-beta.1 but none is installed. You must install peer dependencies yourself.
【3】
C:\Apache24\htdocs\example\Aproject\test\first-day\Vue-study\02-day\web-pack
> webpack-dev-server
The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D
参考资料：
版本不兼容https://blog.csdn.net/weixin_39495540/article/details/79740790
https://www.cnblogs.com/carrotWu/p/8665720.html
https://www.npmjs.com/package/webpack-cli
10。npm run dev 执行成功，托管如下
原来引用是 <script src="../dist/bundle.js"></script>
现在引用是<script src="../bundle.js"></script>
实现了自动打包，编译，并且刷新页面。
bundle.js 看不到，因为放置在内存，所以访问很快。
11. webpack-dev-server的常用命令参数。ctrl +ｃ 终止服务器。
第一种方式，推荐：在{package.json 中配置}
指令学习
--open
--port
--contentBase
--hot
前面的npm run dev 存在缺点，还是需要，打开服务器浏览器，
因此重新在里面配置
"dev": "webpack-dev-server --open --port 3000 --contentBase src"
－－open 自动打开浏览器，--port 3000 访问端口为3000 ， --contentBase serc 自动访问路径为src .
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
实现浏览器的无刷新重载。减少不必要的刷新请求。
12. webpack-dev-server 的第二种配置方式，以配置文件的方式运行
在{webpack.config.js} 中运行。
要配置
const webpack = require('webpack');
//配置dev-server 的第二种方式，相对来说，麻烦一些，相关参数在这里配置，要实现以下功能，实现相关属性
// "dev2": "webpack-dev-server --open --port 3000 --contentBase src --hot",
open : true, //自动打开浏览器
port : 3000, //设置自动运行的端口
contentBase : 'src', //指定托管的目录
hot : true //启用热启动 .最开始是不能用的，需要继续配置，浏览器会报错。这个只是第一步，
//启用热更新的第二步，在最前面配置。const webpack = require('webpack');
//还有第三步。
},
plugins :[ //配置插件的节点
new webpack.HotModuleReplacementPlugin() //new 一个热更新的模块对象，这个启用热更新
]
13.把页面放到内存中去，生产内存中的那个页面
1.先安装：npm i html-webpack-plugin -D 这个
安装完毕以后报错，又是以为版本太高的原因。
2. 导包 ,const htmlWebpackPlugin = require('html-webpack-plugin');
3.new对象
new htmlWebpackPlugin({ //创建一个在内存中生成html 的插件。
template : path.join(__dirname,'./src/index.html'), //指定模板页面，将会根据指定的路径去在内存中生成页面
filename : 'index.html' //生成的html 名称 123.html 也行
}),
14.针对CSS 的包装与打包
1.参考倒入jquery,在main.js 中引入css ，但是报错,因为无法解析。需要下载相关解析加载器。
2.下载相关包。
注意，先查版本,下载包。
cnpm i style-loader@0.18.1 css-loader@0.28.3 -D
3.在webpack.config.js 配置文件中，新增一个节点，叫做module,这个是一个对象。
在module对象中，有一个rules属性，rules 属性是一个数组，存放所有第三方文件的匹配和处理规则。
module :{ //这个节点用于配置所有的第三方模块加载器。
rules :[ //所有的第三方的 匹配规则。
{test : /\.css$/,use :['style-loader','css-loader']} //配置处理。css文件的第三方loader规则
]
}
总结： 第一步，安装相关loader
第二步，配置处理规则
15. .loader-配置处理less文件的loader
1.倒入以后报错，import './css/index.less' //倒入less
2.需要安装相关的解析包，
npm i [email protected] -D 先查看版本，4.0.0 还是无法工作。版本太高
npm i [email protected] -D
还要安装 npm i less@3.0.0-alpha.2 -D 先查看版本
npm i [email protected] -D
3.webpack.config.js 中配置解析规则
16. loader处理。19.loader-配置处理scss文件的loader
1. 装loader ，虽然后缀是index.scss 但是解析器是sass-loader
2. 查看版本， 安装npm i [email protected] -D
但是他需要：安装 node-sass npm i [email protected] -D 但是安装不成功。用转换成 cnpm 才行。nrm use cnpm ,
4.编写规则
17.
18.