vue1-day5

发表于 | 分类于 ， ， ， ， | 本文总阅读量 次
字数统计: 3.4k | 阅读时长 ≈ 12

watch

使用这个属性，可以监视data中指定数据的变化，然后触发这个watch中对应的function处理函数。即这个属性是用来监听data中数据改变从而进行相关操作的属性。

computed

在computed中，可以定义一些属性，这些属性叫做【计算属性】，计算属性的本质就是一个方法，只不过，我们在使用这些计算属性的时候，是把他们的名称，直接当作属性来使用的，并不会把计算属性，当作方法去调用

注意：

1
2
3
1、计算属性在引用的时候，一定不要加（）去调用，直接把它当作普通属性去使用就好
2、只要计算属性内部所依赖用到的任何data中的数据发生了变化，就会啊立即重新计算这个计算属性的值
3、计算属性的求值结果，会被缓存起来，方便下次直接使用，如果计算属性方法中，所有原来的任何数据，都没有发生过变化，则不会重新对计算属性求值

watch、computed、methods的对比

watch和computed都是一个function。
1、在watch中没有return值，在computed中有一个return值
2、methods中的function更侧于业务逻辑的处理。在其中可以写大量业务逻辑
3、computed中不能写大量逻辑
4、computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用
5、methods方法表示一个具体的操作，主要书写业务逻辑
6、watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些待定数据的变化，从而进行某些具体的业务逻辑操作，可以看作是computed跟methods的结合体

nrm的安装使用

作用：提供了一些最常用的NPM包镜像地址，能够让我们快速的切换安装包时候的服务器地址；什么是镜像：原来包刚一开始是只存在于国外的npm服务器，但是由于网络原因，经常访问不到，这时候，我们可以在国内，创建一个和官网完全一样的npm服务器，只不过，数据都是从人家那里拿过来的，除此之外，使用方式完全一样

1
2
3
1、运行```npm i nrm -g```全局安装nrm包
2、使用``` nrm ls```查看当前所有可以的镜像源地址以及当前所使用的镜像源地址
3、使用```nrm use npm ```或者```nrm use taobao```切换不同的镜像源地址

注意：nrm只是单纯的提供了几个常用的下载包url地址，并能够让我们在这几个地址之间，很方便的进行切换，但是，我们每次装包的时候，使用的装包工具都是npm。

webpack

在网页中会引用哪些常见的静态资源？

  • js
    • .js .jsx .coffee .ts(类c#语言)
  • css
    • .css .less .sass
  • images
    • .jpgg .imag .png .gif .svg
  • 字体文件（fonts）
    • .svg .ttf .eot .woff .woff2
  • 模板文件
    • .ejs .jade .vue(在webpack中定义组件的方式，推荐这么用)

网页中引入的静态资源多了以后有什么问题

1、网页加载速度慢，因为我们要发起很多的二次请求
2、要处理错综复杂的依赖关系

如何解决上述两个问题

1、合并、压缩、雪碧图、图片的sass64编码
2、可以使用之前学过的requireJS，也可以使用webpack解决各个包之间的复杂关系

什么是webpack

webpack是前端的一个项目构建工具，它是基于node开发出来的一个前端工具

如何完美实现上述的2种方案

1、使用Gulp，是基于task任务的，优点小巧灵活方便做一些小的项目
2、使用webpack，是基于整个项目进行构建的，站在更宏观的角度来观看项目

  • 借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能
  • 根据官网的图片介绍webpack的打包过程
  • 官网webpack.github.io/

安装webpack的两种方式

1、运行npm webpack -g全局安装webpack，这样就能在全局使用webpack的命令
还需要安装wepack-cli，也是全局的才可以
2、在项目根目录中运行npm i webpack --save--dev安装到项目依赖中

运行的webpack命令
详情见浏览器webpack标签页收藏。

经过演示，webpack可以做什么事情？
1、webpack能够处理js文件之间的相互依赖关系；
2、webpack能够处理js的兼容问题，把高级的浏览器不识别的语法，转换为低级的，浏览器能够正常识别到的语法

####webpack watch模式
webpack --watch,这个是热部署（hot replace），也就是实时监听项目中改变属性的时候，不用在终端输入webpack命令重新启动，可以直接就在浏览器上进行刷新显示更改后的浏览器页面。就相当于node中的nodemon，是一个实时监控器。在webpack4.x版本中，可以直接使用watch模式，使用方法很简单：直接在package.json里面添加一个脚本（找到script）："watch":"webpack --watch"，就可以实现热部署了。使用的时候，在命令脚本终端输入npm run watch，就可以实时监控了

webpack-dev-server

使用webpack-dev-server这个工具，来实现自动打包编译的功能
1、运行npm i webpack-dev-server -D把这个工具安装到项目的本地开发依赖
2、安装完毕后，这个工具的用法和webpack命令的用法完全一样。只是需要把webpack替换成webpack-dev-server，自动监听
3、由于我们是在项目中本地安装的webpack-dev-server，所以我无法把它当作脚本命令，在powershell终端直接运行；（只有哪些安装到全局-g的工具们才能在终端中正常执行）
4、注意，webpack-dev-server这个工具，如果想要正常运行，要求，在本地项目中必须安装webpack，就算全局已经安装过了，也需要再在本地安装一下
5、webpack-dev-server帮我们打包生成的bundle.js文件，并没有存放到实际的物理磁盘上；而是直接托管到了电脑的内存中，所以我们在项目根目录中，根本找不到这个打包好的main.js
6、我们可以任务webpack-dev-server把打包好的文件，以一种虚拟的形似，托管到了咱们项目中的根目录中，虽然我们看不到它，但是可以认为，和dist src node_modules平级，有一个看不见的文件，叫做main.Js，浏览器打开的页面是物理上的页面不是电脑内存的页面

webpack-dev-server常用命令

直接在package.json文件中中的script标签里面里

1
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"

表示的是自动打开浏览器，并且在端口号3000打开，直接进入src中的首页面，–hot表示热重载热更新。

热重载：如果没有热重载的话，每次更新生成的都是一个完整的js文件，有了热更新热重载，每次更新的时候不会生成完整的一个js文件，只是会在原有的js文件上，把新增加的或者新改变的代码作为一个补丁添加上去，就好比添加补丁做补充。这样做的好处就是减少不必要的代码更新。

同时使用–hot以后可以实现浏览器的无刷新重载。

webpack-dev-server’配置命令的第二种方式：

在package.json文件中添加的代码为：

1
2
3
4
//导入webpack包，启用热更新的第二部
const webpack = require('webpack')

"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"

在webpack.json.js文件中添加的代码为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
module.exports = {
    mode: "development",
    entry:  './src/index.js',//入口，表示要使用webpack打包哪个文件
    output: {
        //输出文件相关的配置
        path: path.resolve(__dirname, './dist'),//指定打包好的文件输出到哪个目录中去
        filename: 'main.js' //指定输出的文件的名称
    },
    devServer: {
    	//这是配置dev-server命令参数的第二种形式，相对比较麻烦
    	// --open --port 3000 --contentBase src --hot 
    	open: true,//自动打开浏览器
    	port: 3000,//设置启动时候的运行窗口
    	contentBase: 'src',//指定托管的根目录
    	hot: true//启用热更新的第一步
    },
    plugins: [
       //配置插件的节点
       new webpack.hotModuleReplacementPlugin()  //new一个热更新的模块对象，启用热更新的第三步
    ]
}

使用html-webpack-plugin插件配置启动页面

由于使用--contentBase指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性，所以推荐使用html-webpack-olugin插件配置启动页面。
1、运行npm i html-webpack-plugin --save-dev安装到开发依赖
2、修改webpack.config.js的配置文件如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//导入路径的模块
var path = require('path');
//导入自动生成HTML文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	entry: path.resolve(_dirname, 'src/js/index.js'),//项目入口文件
	output: {
		path: path.resolve(_dirname,'dist'),
		filename: 'bundle.js'
	},
	plugins: [
	    new htmlWebpackPlugin({//创建一个在内存中生成HTML页面的插件
	    	template:path.resolve(_dirname, 'src/main.html'),//指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
	    	filename: 'main.html'//指定生成页面的名称
	    	})
	]
}

3、修改package.json中的script节点的dev指令如下

1
"dev": "webpack-dev-server"

4、将index.html中script标签注释掉，因为html-webpack-plugin插件会自动把main.js注入到html页面中

作用：
1、在内存中根据指定路径帮我们生成一个页面，把打包好的main文件自动插入到dom元素中去
2、当使用html-webpack-plugin之后我们不再需要手动处理main.js的引用路径，因为这个插件已经帮我们自动创建了一个合适的script，并且引用了正确的路径。自动把打包好的main.js追加到页面中去

loader

加载js文件直接使用import然后打包就可以，但是使用其他样式表，例如css文件，就不能直接使用import打包的方式来。
webpack默认只能打包处理js类型的文件，无法处理其他的非js类型的文件。如果要处理非js类型的文件，我们需要手动安装一些合适第三方loader加载器。

1、如果想打包css文件，需要安装npm i style-loader css-loader -D这两个文件
2、打开webpack.config.JS这个配置文件，在里面新增一个配置节点，叫做module，他是一个对象，在这个module对象身上，有个rules属性，这rules属性是个数组，这个数组中存放了所有第三方文件的匹配和处理规则。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
module.exports = {
    mode: "development",
    entry:  './src/index.js',//入口，表示要使用webpack打包哪个文件
    output: {
        //输出文件相关的配置
        path: path.resolve(__dirname, './dist'),//指定打包好的文件输出到哪个目录中去
        filename: 'main.js' //指定输出的文件的名称
    },
    module: {
        //这个节点用于配置所有第三方模块加载器
        rules:[
            //所有第三方模块的匹配规则
            { test: /\.css$/, use: ['style-loader','css-loader'] }//配置处理.css文件的第三方loader规则，必须要有text和use属性
            //表示符合test中正则表达式的所有文件都使用对应后面所加载的loader文件
            //test表示要匹配到的文件类型，use表示对应文件类型要使用的loader文件
        ]
    }
}

如果没有在webpack.config.js文件中找到对应的文件路径就会报错
如果同时添加了两个loader，调用规则就是从右到左。

webpack处理第三方文件类型的过程：

1、发现这个要处理的文件不是js 文件，然后就去配置文件中，查找有没有对应的第三方loader规则
2、如果能找到对应的规则就会调用对应的laoder处理这种文件类型
3、在调用loader的时候，是从后往前调用的
4、当最后一个loader调用完毕，会把处理的结果，直接交给webpack进行打包合并，最终输出到main.js中去

在文件根目录下的文件作用分析：
1、package.json文件，是在项目进行初始化的时候，所生成的一个配置文件，表示的是所搭建这个项目需要的哪些依赖，下载了哪些东西。
2、package-lock.json文件，表示在项目初始化的时候，所下载的哪些依赖他们的版本的锁定，以防下载更新依赖的时候，会有版本的问题
3、webpack.config.json文件，这个是打包webpack的时候需要用到的配置文件，当以webpack命令开始打包工具的时候，工具会发现并没有提供入口和出口文件，这个时候工具就会来检查项目根目录下的配置文件，并读取这个文件，拿到的导出的这个配置对象，然后根据这个配置文件的相关信息进行打包构建。

-------------本文结束感谢您的阅读-------------