Vue学习笔记(4)


阅读数: 次   

文章导航

Vue学习笔记

模块化，webpack，依赖，插件，本地服务器…

模块化

简介

随着ajax异步请求的出现，慢慢形成了前后端的分离；客户端需要完成的事情越来越多，代码量也是与日俱增；为了应对代码量的剧增，我们通常会将代码组织在多个js文件中，进行维护；但是这种维护方式，依然不能避免一些灾难性的问题，比如全局变量同名问题。

常见的模块化规范：
CommonJS、AMD、CMD，也有ES6的Modules

CommonJS的模块化

模块化有两个核心：导出和导入
CommonJS的导出：
image-20201021182335779
CommonJS的导入：
image-20201021182458529

ES6的模块化

export基本使用

export指令用于导出变量：
image-20201021182920911
image-20201021183001648

导出函数或类：
image-20201021183057844

export default：

一个模块中包含某个的功能，我们并不希望给这个功能命名，而且让导入者可以自己来命名，这个时候就可以使用export default。
image-20201021183224796

image-20201021183522896

pexport default在同一个模块中，不允许同时存在多个

import基本使用

先使用export指令导出了模块对外提供的接口，然后就可以通过import命令来加载对应的这个模块了。

首先，引入js文件，并且类型需要设置为module。
image-20201021184029169

import指令用于导入模块中的内容
image-20201021184118905

需要导入模块中所有的export变量时，可以使用*，通常情况下我们需要给*起一个别名，方便后续的使用。
image-20201021184239555

webpack

简介

从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。
image-20201021203507356

webpack模块化的概念

webpack其中一个核心就是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系；而且不仅仅是JavaScript文件，我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用。

webpack打包的概念

webpack进行模块化后可以将各种资源模块进行打包合并成一个或多个包(Bundle)；并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。

webpack安装

安装webpack首先需要安装Node.js，Node.js自带了软件包管理工具npm查看自己的node版本：

1
node -v

全局安装webpack

1
npm install [email protected] -g

局部安装webpack
--save-dev是开发时依赖，项目打包后不需要继续使用的。

1
2
cd 对应目录
npm install [email protected] --save-dev

全局安装和局部安装的区别？
在终端直接执行webpack命令，使用的全局安装的webpack；
当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack；

webpack使用

项目路径

dist文件夹：用于存放之后打包的文件；
src文件夹：用于存放我们写的源文件；

webpack模块化打包

info.js文件

1
2
3
export const name = '张三';
export const sex = '男';
export const age = 23;

mathUtil.js文件

1
2
3
4
5
6
7
8
9
10
function add(num1,num2){
	return num1 + num2;
}
function mul(num1,num2){
	return num1 * num2;
}
//导出模块
module.exports = {
	add,mul
}

main.js文件

1
2
3
4
5
6
7
8
//1. 使用commonjs的模块化规范
const {add,mul} = require('./mathUtil.js');
console.log(add(20,30));
console.log(mul(40,40));

//使用ES6的模块化规范
import {name,sex,age} from './info.js';
console.log("姓名："+name+",性别："+sex+",年龄："+age);

js文件打包
image-20201021210545267
打包后会在dist文件下，生成一个bundle.js文件

index页面调用js

1
<script src="./dist/bundle.js"></script>

webpack配置

入口和出口

如果每次使用webpack的命令都需要写上入口和出口作为参数，就非常麻烦，我们可以创建一个webpack.config.js文件将这两个参数写到配置中。

局部安装webpack

项目往往依赖特定的webpack版本，全局的版本可能很这个项目的webpack版本不一致，会导致打包出现问题。
image-20201021214655768

package.json中定义启动

package.json中的scripts的脚本在执行时，首先会寻找本地的node_modules/.bin路径中对应的命令，如果没有找到，会去全局的环境变量中寻找。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
	//命令脚本（在这里声明的话，优先使用本地的依赖[局部的]）
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
	//开发时依赖
  "devDependencies": {
    "webpack": "^3.6.0"
  }
	//运行时依赖
	"dependencies":{
		
	}
}

执行build指令
image-20201021214948931

loader

简介

loader是webpack中一个非常核心的概念。

webpack只能自动处理js之间相关的依赖，loader是用来扩展webpack的，可以加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等。

安装loader过程

步骤一：通过npm安装需要使用的loader；
步骤二：在webpack.config.js中的modules关键字下进行配置；

loader使用

在webpack的官方中，我们可以找到如下关于样式的loader使用方法。

css文件处理 css-loader

image-20201021220536490

css-loader只负责加载css文件，但是并不负责将css具体样式嵌入到文档中，所以我们还需要一个style-loader帮助我们处理。
image-20201021220930050
style-loader需要放在css-loader的前面，因为在处理css文件过程中，应该是css-loader先加载css文件，再由style-loader来进行进一步的处理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const path = require("path");

module.exports = {
	//项目入口路径
	entry: './src/main.js',
	//项目出口路径
	output: {
		// 动态获取路径
		path: path.resolve(__dirname,'dist'),
		filename: 'bundle.js'
	},
	 module: {
	    rules: [
	      {
	        test: /\.css$/,
					//css-loader：只负责加载css样式
					//style-loader：负责将样式添加到DOM中
					//使用多个loader时，是从右向左读的
	        use: [ 'style-loader', 'css-loader' ]
	      }
	    ]
	  }
}

less文件处理 – 准备工作

如何在项目中使用less、scss、stylus来写样式，我们这里以less为例。

首先，还是需要安装对应的loader；
注意：我们这里还安装了less，因为webpack会使用less对less文件进行编译。image-20201022105815193

其次，修改对应的配置文件；
添加一个rules选项，用于处理.less文件。image-20201022111921034

图片文件处理

我们需要使用url-loader来处理图片；
image-20201023100724730

修改webpack.config.js配置文件：image-20201023100751799

如果图片达于limit，需要通过file-loader进行处理；
image-20201023101056651

我们发现webpack自动帮助我们生成一个32位hash值的名字，防止重复；我们可以修改名字：
image-20201023101332563

我们整个程序是打包在dist文件夹下的，所以这里我们需要在路径下再添加一个dist/。

webpack配置vue

引入vue.js

在项目中使用Vuejs，那么就需要对其有依赖：
image-20201023101837058

但是我们现在使用的是runtime-only版本的Vue，无法使用组件；我们需要修改配置：
image-20201023102104021

引入组件化开发

el和template关系：
我们知道el用于指定Vue要管理的DOM，可以帮助解析其中的指令、事件监听等等；而如果Vue实例中同时指定了template，那么template模板的内容会替换掉挂载的对应el的模板。

好处：
这样做之后我们就不需要在以后的开发中再次操作index.html，只需要在template中写入对应的标签即可；
image-20201023102536731

.vue文件封装处理

一个组件使用js对象的形式进行组织和使用很不方便，那么我们就以.vue来组织一个vue的组件：
npm install vue-loader vue-template-compiler --save-dev
修改webpack.config.js的配置文件：
image-20201023103317281

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<template>
	<div>
		<button @click='btnClick'>提交</button>
		<h3 class="title">{{message}}</h3>				
		<Cpn></Cpn>
	</div>
</template>

<script>
	import Cpn from './Cpn.vue';
	export default {
		name: 'app',
		components: {
			Cpn
		},
		data() {
			return{
				message: '法外狂徒：'					
			}
		},
		methods: {
			btnClick(){
				console.log('登录！');
			}
		}
	}
</script>

<style>
	.title {
		color: yellow;
	}
</style>

plugin插件使用

简介

plugin是插件的意思，通常是用于对某个现有的架构进行扩展；webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。

loader和plugin区别

loader主要用于转换某些类型的模块，它是一个转换器。
plugin是插件，它是对webpack本身的扩展，是一个扩展器。

plugin的使用过程

步骤一：通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
步骤二：在webpack.config.js中的plugins中配置插件。

添加版权的Plugin

该插件名字叫BannerPlugin，属于webpack自带的插件；
image-20201023103832856

查看bundle.js文件的头部，自动添加了版权声明。

打包html的Plugin

在发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中没有index.html文件；所以，我们需要将index.html文件打包到dist文件夹中，这个时候就可以使用HtmlWebpackPlugin插件。

HtmlWebpackPlugin的功能：
自动生成一个index.html文件(可以指定模板来生成)；
将打包的js文件，自动通过script标签插入到body中；

  1. 安装HtmlWebpackPlugin插件：
    npm install html-webpack-plugin --save-dev

  2. 修改webpack.config.js文件:
    我们需要删除之前在output中添加的publicPath属性;
    image-20201023103832856

js压缩的Plugin

发布项目时，我们必然需要对js等文件进行压缩处理；所以需要使用一个第三方的插件uglifyjs-webpack-plugin，并且版本号指定1.1.1，和CLI2保持一致。
npm install [email protected] --save-dev

我们使用一个第三方的插件uglifyjs-webpack-plugin，并且版本号指定1.1.1，和CLI2保持一致

修改webpack.config.js文件，使用插件:
image-20201023103832856

搭建本地服务器

webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。

不过它是一个单独的模块，在webpack中使用之前需要先安装它：
npm install --save-dev [email protected]

devserver本身可以设置的属性：
contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist；
port：端口号；
inline：页面实时刷新；
historyApiFallback：在SPA页面中，依赖HTML5的history模式；
image-20201023103832856

我们可以再配置另外一个scripts，—open参数表示直接打开浏览器：
image-20201023103832856

配置文件的分离

简介

我们开发环境的配置和生产环境的配置时不同的，我们可以把他们分离成两个不同的配置文件，和一个公共的配置文件。

使用

我们首先需要安装一个依赖，合并配置文件：
npm install --save-dev [email protected]

公共的配置文件base.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
const path = require("path");//获取绝对路径
const webpack = require('webpack');//声明版权
const HtmlWebpackPlugin = require('html-webpack-plugin');//自动导入js和html文件

module.exports = {
	//项目入口路径
	entry: './src/main.js',
	//项目出口路径
	output: {
		// 动态获取路径
		path: path.resolve(__dirname,'../dist'),
		filename: 'bundle.js',
		//在url前拼接路径
		// publicPath: 'dist/',
	},
	module: {
	    rules: [
	      {
	        test: /\.css$/,
					//css-loader：只负责加载css样式
					//style-loader：负责将样式添加到DOM中
					//使用多个loader时，是从右向左读的
	        use: [ 'style-loader', 'css-loader' ]
	      },
				{
					test: /\.less$/,
					use: [{
							loader: "style-loader"
					}, {
							loader: "css-loader"
					}, {
							loader: "less-loader", options: {
									strictMath: true,
									noIeCompat: true
							}
					}]
				},
				{
					test: /\.(png|jpg|gif|jpeg)$/,
					use: [
						{
							loader: 'url-loader',
							options: {
								// 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式.
								// 当加载的图片, 大于limit时, 需要使用file-loader模块进行加载.
								limit: 8192,
								//图片打包后的路径和名字
								name: 'img/[name].[hash:8].[ext]',
							}
						}
					]
				},
				{
					test: /\.vue$/,
					use: ['vue-loader']
				}
	    ]
	},
	resolve: {
		//别名
		alias: {
			//指定特定文件
			'vue$': 'vue/dist/vue.esm.js'
		},
		//省略后缀名
		extensions: ['.js','.css','.vue']
	},
	plugins: [
		new webpack.BannerPlugin('最终所属权归张三持有'),
		new HtmlWebpackPlugin({
			template: 'index.html'
		}),
	]
}

开发环境配置文件dev.config.js

1
2
3
4
5
6
7
8
9
10
11
//导入webpack-merge
const webpackMerge = require('webpack-merge');
//获取baseConfig
const baseConfig = require('./base.config.js');
//合并配置文件
module.exports = webpackMerge(baseConfig,{
  devServer: {
    contentBase: './dist',
    inline: true
  }
})

生产环境配置文件prod.config.js

1
2
3
4
5
6
7
8
9
10
11
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');//压缩js文件
//导入webpack-merge
const webpackMerge = require('webpack-merge');
//获取baseConfig
const baseConfig = require('./base.config.js');
//合并配置文件
module.exports = webpackMerge(baseConfig,{
	plugins: [
		new UglifyjsWebpackPlugin()
	]
})

手动修改查找配置文件的路径
image-20201023103832856

修改打包路径
image-20201023103832856

赏

感谢支持!

微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

正因为没有翅膀，<br>人们才会寻找飞翔的方法。