Vue工程化开发

一、Vue的安装

1.1 安装node.js

官网下载：https://nodejs.org/dist/v16.13.1/node-v16.13.1-x64.msi

百度网盘：链接: 提取码: cbti
安装完成，打开dos界面
安装cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org

1.2 安装Vue

安装最新稳定版: cnpm install vue
安装命令行工具(CLI):

# 全局安装 vue-cli
cnpm install --global vue-cli

二、Vue工程化开发

2.1 什么是前端开发

• 模块化（js、css、html模块化）
• 组件化（复用现有的ui结构、样式、行为）
• 规范化（目录结构的划分、编码、接口、文档、git规范）
• 自动化（自动化构建、自动部署、自动化测试）

使用常见的ui：Layui

前端工程化是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化

早期的解决方案：grunt、gulp
现在主流的解决方案：webpack、parcel

2.2 webpack

2.2.1 什么是webpack

webpack是前端项目工程化的具体解决方案，它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。

2.2.2 webpack的基本使用

创建项目

1. 新建项目空白目录，并运行cnpm init -y命令，初始化包管理配置文件package.json

# change-rows-color是项目名
D:\code\Vue\202112\change-rows-color>cnpm init -y
Wrote to D:\code\Vue\202112\change-rows-color\package.json:

{
  "name": "change-rows-color",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2. 在项目目录下，新建src源代码目录
3. 新建src->index.html首页和src->index.js脚本文件(可以在webstrom、vscode里面进行了)
   
4. 运行cnpm install jquery -S,安装jQuery

# -S save,安装后信息保存至package.json——>dependencies（生产环境）
D:\code\Vue\202112\change-rows-color>cnpm install jquery -S
√ Installed 1 packages
√ Linked 1 latest versions
√ Run 0 scripts
√ All packages installed (1 packages installed from npm registry, used 921ms(network 920ms), speed 474.48KB/s, json 1(13.09KB), tarball 423.43KB)

在html文件中导入:<script src="index.js"></script>

5. 使用ES6默认导入语法，在index.js中:import $ from 'jquery'

import $ from 'jquery'

$(function (){
    $('li:odd').css('background-color', 'red')
    $('li:even').css('background-color', 'pink')
})

6. 在index.html中加上:<script src="./index.js"></script>

我们会发现在浏览器中js没有起效,这是浏览器的兼容性问题,对于高级语法不是很好的支持,使用webpack以解决这个问题

安装webpack

1. 安装webpack库

# -D save-dev 安装后把信息保存至package.json——>devDependencies（开发环境）
cnpm install webpack webpack-cli -D

2. 在项目根目录创建webpack,config.js

module.exports = {
    mode: 'development' // build mode, development/production
}

3. 修改package.json

"scripts": {
    "dev": "webpack"
  }

4. 使用webpack打包项目
   cnpm run dev,会在项目跟目录下生产dist文件夹
5. 导入script:<script src="./dist/main.js"></script>

2.2.3 mode

• development
  • 开发环境
  • 不会对打包生产的文件进行代码压缩和性能优化
  • 打包速度快,适合在开发阶段使用
• production
  • 生产环境
  • 会对打包生产的文件进行代码压缩和性能优化
  • 打包速度慢,仅适合在生产环境使用

2.2.4 webpack.config.js

它是webpack的配置文件,是基于node.js开发出来的打包工具.webpack在真正打包构建的时候会先读取这个配置文件,从而基于给定的配置,对项目进行打包

2.2.5修改打包路径

在webpack.config.js配置文件中,通过entry节点指定打包的入口.通过output节点指定打包的出口.

const path = require('path')

module.exports = {
    mode: 'development',
    entry: path.join(__dirname, "./src/index.js"),
    output: {
        path: path.join(__dirname, './build'),
        filename: "build.js"
    }
}

2.3 webpack插件

通过安装和配置第三方的插件以拓展webpack的能力,从而使得webpack使用起来更加方便

• webpack-dev-server:热更新

  • 在不配置webpack-dev-server的情况下,webpack打包生成的文件,会存放在实际的物理磁盘上,根据配置文件存放
  • webpack-dev-server生成到内存中的文件,默认放到了项目的根目录,而且是虚拟的,不可见的

• html-webpack-plugin:html插件,自定义index.html首页内容,并且为这个页面自动注入打包后的js文件

2.3.1 安装

cnpm i webpack-dev-server -D
cnpm i html-webpack-plugin -D

2.3.2 配置

webpack-dev-server在package.json中配置:

"scripts": {
    "dev": "webpack server"
  }

webpack-dev-server在webpack.config.json中配置:

const HtmlPlugin = require("html-webpack-plugin")

const htmlPlugin = new HtmlPlugin({
    template: './src/index.html', //表示输出文件的路径
    filename: './index.html' // 文件输出的位置
})

module.exports = {
    mode: 'development',
    plugins: [htmlPlugin]
}

2.3.3 devServer

在webpack.config.js中,可以通过devServer节点对webpack-dev-server插件进行更多的配置

devServer: {
	open: true, // 初次打包后自动打开浏览器
	host: "127.0.0.1",
	port: 80,
}

2.3.4 loader

在实际开发过程中,webpack默认只能打包处理.js结尾的模块.因此需要调用loader加载器打包非.js后缀名结尾的模块.

• css-loader 可以打包处理.css相关的文件
• less-loader可以打包处理.less相关的文件
• babel-loader可以打包处理webpack无法处理的高级js语法

loader的调用流程:

打包处理css文件

假设,我们在根目录的css下有一个index.css,如果我们在其它js模块中导入它import './css/index.css'直接打包,会报错误异常
如何处理这个异常?

1. 运行cnpm i style-loader css-loader -D命令,安装处理css文件的loader
2. 在中新增:module->rules

	module.exports = {
		module: {
        		rules: [
            		{test: /\.css$/, use: ['style-loader', 'css-loader']}
        		]
    		}
		}	

test表示匹配的文件类型,use表示对应要调用的loader

注意:

• use数组中指定的loader顺序是固定的
• 多个loader的调用顺序是:从后往前调用

打包less文件

假设,我们在根目录的css下有一个index.less,同理导入,配置如下:

1. cnpm i less-loader less -D
2. 配置webpack.config.json->module.exports/module/:

{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
 }

打包处理样式表文件

假设,在/css/index.less中我们对一个box作了以下配置:

#box {
	width: 380px;
	height: 114px;
	background-color: red;
	background: url("../image/index.png")
}

使用的图片路径导致打包失败,配置如下:

1. cnpm i url-loader file-loader -D
2. 配置webpack.config.json->module.exports/module/:

{
test: /\.jpg|png|gif$/,
use: ['url-loader?limit=22229']
 }

?后是loader的参数项

• limit用来指定图片大小,单位是字节
• 只有小于等于limit大小的图片,才会被转为base64

打包处理js文件中的高级语法

webpack只能打包处理一部分js高级语法,对于它不能处理的,我们需要借助babel-loader
比如:

class Person{
	static info = "person info"
}

console.log(Person.info)

最新版的webpack已经解决了这个问题,我们这个讨论报错的情况:

1. cnpm i babel-loader babel/core babel/plugin-proposal-class-properties -D
2. 配置webpack.config.json->module.exports/module/:

rules:[{
	test: /\.js$/,
	exclude: /node_moudles/,
	use:{
		loader: 'babel-loader',
		options: {
			plugins: ['@babel/plugin-proposal-class-properties']
		}
	}
}]

2.3.5 loader的另一种配置方式

带参数项的loader还可以通过对象的方式进行配置(webpack.config.json->module.exports/module/):

rules:[{
	test: /\.jpg|png|gif$/,
	use:{
		loader: 'url-loader',
		options: {
			limit: 22229
		}
	}
}]

2.4 打包发布

项目完成后,打包发布的原因:

1. 开发环境下,打包生产的文件存放于内存中,无法获取最终生成的文件
2. 开发环境下,打爆生产的文件不会进行代码压缩和性能优化

2.4.1 配置webpack的打包发布

在package.json中:

"scripts": {
    "dev": "webpack server",
    "build": "webpack --mode production"
  }

2.4.2 归类整理dist目录下的文件

1. 把JavaScript文件统一生成至js目录中,在webpack.config.js,配置把生成的main.js存至js目录下

moudule.exports = {
	output:{
		path: path.join(__dirname, './dist'),
		filename: 'js/main.js'
	}
}

2. 把图片存至image目录下(webpack.config.json->module.exports/module/):

rules:[{
	test: /\.jpg|png|gif$/,
	use:{
		loader: 'url-loader',
		options: {
			limit: 22229,
			outputPath: "images
		}
	}
}]

2.4.3 自动清理dist目录下的旧文件

为了在每次打包发布的时候,自动清理dist目录下的旧文件,可以按照并配置clean-webpack-plugin插件:

1. cnpm i clean-webpack-plugin -D
2. 在webpack.config.json下:

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()

module.exports = {
    mode: 'development',
    plugins: [..., cleanPlugin],
    ..
} 

2.5 Source Map

前端项目在投入生产环境之前,都需要对JavaScript源代码进行压缩混淆,从而减小文件的体积,提高文件的加载效率.此时有一个不可避免的问题: 对压缩混淆之后的代码进行debug是一个及其困难的事情

• 变量被替换成没有任何语义的名称
• 空行和注释被剔除

2.5.1 什么是Source Map

Source Map就是一个信息文件,里面储存着位置信息.也就是说,Source Map文件存储着代码压缩混淆前后的对应关系

因此,有了Source Map在debug时,debug工具将直接显示原始代码,极大地方便了后期的调试

2.5.2 webpack开发环境下的Source Map

在开发环境下,webpack默认启用了Source Map功能.当程序出错时,可以直接在控制台提示错误的位置,并定位到代码

但是开发环境下默认生产的Source Map记录的是生成后的代码的位置,与源代码行数不一致

解决默认Source Map问题:
在webpack.config.js/module.exports下:

devtool: "eval-source-map"

2.5.3 webpack生产环境下的Source Map

在生产环境下,如果省略了devtool选项,则最终生成的文件中不包含Source Map,防止代码暴露.即代码是压缩混淆过后的代码

安全做法,只定位行数,不暴露源码 - good
在webpack.config.js/module.exports下:

devtool: "nosources-source-map"

不安全做法,定位行数,暴露源码 - bad
在webpack.config.js/module.exports下:

devtool: "source-map"

三、Vue开发

官方中文文档,从安装开始