Vue 学习第五天 学习笔记

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>

    <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 :'

这个是登录子组件,刘送杰开发的

'

};

var register ={

template :'

这个是注册子组件,刘送杰开发的

'

};

//创建路由对象,然后构造路由 规则

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. 合并、压缩(图片与jscss),精灵图(合并图片),图片的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 查看到版本信息号。

 

3webpack .\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 [] --output [-o]

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  --存放文件

3src 下下面建立  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>

<body>

<ul>

<li>111111li>

<li>22222li>

<li>1333li>

<li>1333li>

<li>13333li>

<li>13333li>

<li>1333li>

<li>14444li>

<li>14994li>

<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

 

 

10npm  run dev  执行成功,托管如下

 

 

原来引用是 <script src="../dist/bundle.js">script>

现在引用是<script src="../bundle.js">script>

实现了自动打包,编译,并且刷新页面。

bundle.js  看不到,因为放置在内存,所以访问很快。

 

11.  webpack-dev-server的常用命令参数。ctrl +c 终止服务器。

第一种方式,推荐:在{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 [email protected] -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.

 

 

你可能感兴趣的:(前端学习)