当前位置：凯发ag旗舰厅登录网址下载 > 前端技术 > vue >内容正文

vue

vue 学习第五天学习笔记 -凯发ag旗舰厅登录网址下载

发布时间：2024/10/8 vue 28 豆豆

凯发ag旗舰厅登录网址下载收集整理的这篇文章主要介绍了 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>

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

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

<router-view>router-view>

div>

//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. 合并、压缩（图片与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 [] --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 --存放文件

（3） src 下下面建立 css /js/images 文件

（4）在src 目录下，建立必备文件目录，index.html main.js

3.整个部署于使用过程如下。

犯错总结：index.html 中忘记引包了src="../dist/boudle.js"，所以没有效果。。。。

doctype html>

<head>

<title>组件的开发title>

head>

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

与50位技术专家面对面20年技术见证，附赠技术全景图

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的vue 学习第五天学习笔记的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。

vue

vue 学习第五天 学习笔记 -凯发ag旗舰厅登录网址下载

总结

vue 学习第五天学习笔记 -凯发ag旗舰厅登录网址下载