Vue 学习第五天学习笔记

Vue 学习第五天

1. keyup事件

</div>

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 元素的变化，

-->

<router-link to="/login">登录</router-link>

<router-link to="/register">注册</router-link>

<router-view></router-view>

</div>

//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>

<head>

<title>组件的开发</title>

</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>

</ul>

</body>

</html>

webpack 4.14.0 版本太高，无法执行相关指令，指令不熟悉，高版本切换到低版本，

直接重新安装就行，使用 npm i webpack@3.6.0 -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 webpack@3.6.0 -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 webpack-cli@3.0.8 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 webpack-cli@3.0.8 requires a peer of webpack@^4.x.x but none is installed. You must install peer dependencies yourself.

【2】

npm WARN webpack-dev-middleware@3.1.3 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.

npm WARN webpack-dev-server@3.1.4 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 less-loader@4.0.0 -D 先查看版本，4.0.0 还是无法工作。版本太高

npm i less-loader@2.2.3 -D

还要安装 npm i less@3.0.0-alpha.2 -D 先查看版本

npm i less@2.7.2 -D

3.webpack.config.js 中配置解析规则

16. loader处理。19.loader-配置处理scss文件的loader

1. 装loader ，虽然后缀是index.scss 但是解析器是sass-loader

2. 查看版本，安装npm i sass-loader@3.2.3 -D

但是他需要：安装 node-sass npm i node-sass@3.4.2 -D 但是安装不成功。用转换成 cnpm 才行。nrm use cnpm ,

4.编写规则

17.

18.

Vue 学习第五天学习笔记相关推荐

推荐系统遇上深度学习(十五)--强化学习在京东推荐中的探索
强化学习在各个公司的推荐系统中已经有过探索,包括阿里.京东等.之前在美团做过的一个引导语推荐项目,背后也是基于强化学习算法.本文,我们先来看一下强化学习是如何在京东推荐中进行探索的. 本文来自于pap ...
深度学习第五周学习周报
学习时间: 2023.6.5-2023.6.11 学习目标: 学习<动手学深度学习pytorch>六.七.八.九章完成学习内容: 学习<动手学深度学习pytorch>第六.七 ...
Vue.js的基本使用学习笔记
VUE的基本使用学习笔记一. 简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是 ...
Vue 学习之 7.01 学习笔记
Vue 学习之 7.01 学习笔记 1.还是复习前面的那个"品牌案例管理",但是数据不是静态写死哦,而是动态的管理,向数据库发送相关请求实现,因此,小节和昨天所学就是掌握Vu ...
vue项目打包与配置-学习笔记
文章目录 vue项目打包与配置-学习笔记前端打包打包的代码如何运行打包指定不同的环境变量(开发,测试) 打包手动配置文件打包压缩,大文件处理 gzip进一步压缩打包app 打包部署模式 vu ...
Vue学习（vuex）-学习笔记
文章目录 Vue学习(vuex)-学习笔记含义理解具体代码辅助函数 mapGetters mapActions Vue学习(vuex)-学习笔记含义理解 State Vuex 使用单一状态树- ...
motan学习笔记五 opentracing学习入门
motan学习笔记一微博轻量级RPC框架Motan motan学习笔记二 motan架构分析 motan学习笔记三 motan Demo 分析 motan学习笔记四 motan Demo 之 ...
Vue学习第五天（路由相关）
Vue学习第五天(路由相关) 今天主要学习了vue中ref关键字和路由相关的知识点对于ref,可以理解为引用,当我们在一个传统的html标签上使用这个标签以后 <login ref=" ...
Vue 生命周期记录_学习笔记
官方给出的设计图入戏为了能更好的理解这个图呢,写了下面的demo <!DOCTYPE html> <html><head><meta charset=&qu ...

Vue 学习第五天学习笔记

Vue 学习第五天学习笔记相关推荐

最新文章

热门文章

Vue 学习第五天 学习笔记

Vue 学习第五天 学习笔记相关推荐

最新文章

热门文章

Vue 学习第五天学习笔记

Vue 学习第五天学习笔记相关推荐