前端大串讲，狂神，狂神和飞哥

aiwokache

已于 2023-01-31 10:00:53 修改

阅读量754

点赞数 1

分类专栏： # 03 Java Web 文章标签：前端 javascript vue.js

于 2022-12-13 11:10:04 首次发布

本文链接：https://blog.youkuaiyun.com/aiwokache/article/details/128297514

版权

03 Java Web 专栏收录该内容

11 篇文章

订阅专栏

-大前端进阶 - 篇章学习-Kuang-Study-文章

(377条消息) Vue入门技能树 (youkuaiyun.com)

npm install -g npm@9.2.0

一概述

前端框架：vue、React、 uniapp(小程序)。
前端脚手架：babel-cli、vue cli、webpack-cli
服务器：node.js、java后端
前端框架的用法：
1. 方式1：用纯前端就可以独立的去完成一些前端项目的开发，并脱离于后端运行。
2. 方式2：前后端分离。后端开发(语言)的服务器（java、PHP、C++，甚至nodejs），处理前端发送过来的请求。

二前端开发和前端开发工具

账户：(Microsoft)188xxxx1425aA
安装
1. 第一步：官网下载可执行文件Xxx.exe
2. 第二步：双击安装（指定安装目录）
3. 第三步：双击打开（来到首页：英文的欢迎界面）
  1. 认识面板
    1. 上：
      1. 文件夹(F)
      2. 编辑(E)
      3. 选择(S)
      4. 查看(V)
      5. 转到(G)
      6. 运行(R)
      7. 终端(O)
      8. 帮助(H)
    2. 左：操作按钮
      1. 1：资源管理器
        打开新创建工程的在的目录
        目录：展开与收起目录
      2. 2：搜索与替换
        搜索或替换，字符或代码段
      3. 3：版本控制：如果以后把代码托管到git或svn的话，可以在此做一个统一的代码同步、更新
        git
        svn
      4. 4：调试：在项目开发过程中，调试是一个非常重要的环节。
        以后在VSCode中执行Node.js程序，如果需要调试的话，可以使用这里的调试功能按钮。
      5. 5：插件
        搜索Chinese插件，进行汉化并重启。
        开发小程序，搜索miniapp插件。
        想执行代码质量检查，搜索ESlint插件。
      6. 6：账户
      7. 7：设置
    3. 右：代码区
配置
1. 配置1：汉化并重启。
2. 配置2：设置字段大小，即改即生效。
3. 配置3：开启完整的Emmet语法支持，即html代码自动补全功能，如<div + Tab键。
4. 配置4：视图：查看—> 外观—> 向左移动侧边栏
使用
1. 使用1：新（创）建一个工程
  1. 第一步：在任意磁盘中创建一个目录（即工程）（因为VScode创建新工程的方式是：打开一个目录）。好像目录路径有中文也行？
  2. 第二步：打开新创建工程的在的目录
    1. 认识项目相关按钮
      1. 1：新建文件
      2. 2：新建文件夹
      3. 3：刷新资源管理器
      4. 4：在资源管理器中折叠文件夹
  3. 第三步：新建文件夹：src
  4. 第四步：新建文件：index.html

三 nodejs安装及快速入门

官网： Node.js 中文网
1. nodejs做为一个服务端语言，能够实现很多其它服务端语言能做的事情，如像java一样处理http请求与响应等等。为了实现对Http请求与响应的处理、操作mysql数据库、操作redis数据库、操作消息中间件，nodejs在安装完成后内置了很多模块的API。如果想使用哪个模块的api，直接导入并且使用即可。内置的模块如下图官网的帮助文档所示：
安装
1. 第一步：官网点击下载64位安装包Xxx.msi
2. 第二步：双击安装（指定安装目录）
3. 第三步：验证安装，
  1. 第1步：cmd 》node -v 》出现nodejs的版本号
  2. 第2步：cmd 》npm -v 》出现nodejs自带的npm包管理器的版本号
思想
1. Node.js 是运行在服务端的 JavaScript。
2. Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时（的语言）。
  1. Chrome V8 引擎：类比jvm
  2. JavaScript 运行时：
构架、流原
1. .java
  1. 第一步：安装jdk。因为底层操作系统（window/linux）没有提供运行java应用程序的环境。
    1. 第1步：jvm，操作系统之上多了一个jvm。首先，xxx.java文件通过jvm编译成xxx.class文件。最后，jvm把xxx.class文件解释成操作系统能够识别和直接运行的代码（如机器码、汇编语言）。
  2. 第二步：操作系统运行。
2. .js
  1. 第一步：定好文件为.js类型
    nodejs早期考虑使用自定义的语法堂（如java的jdk，自定义了OOP(类、属性、方法、修饰符等等）)，但是后来它并没有重新自定义一套，而是采用javascript语言做为一个基调，所以node.js的语法必须遵循javascript的语言来编写，因此nodejs项目中的文件大多都是.js结尾的。
    包括，后面讲的ES6，ES6也是以javascript语言为基调的，所以ES6的语法也可以在node.js的环境中去使用。
  2. 第二步：如何编译与运行？
    1. 第1步：chrome v8编译
      1. nodejs是基于chrome v8引擎的，chrome v8引擎的功能就类似于java jdk中的jvm。当编写好nodejs的源文件以后，可以通过chrome v8把源文件编译并解释成操作系统能够识别和直接运行的代码（如机器码、汇编语言）。
      2. chrome v8引擎在哪里呢？其实在安装nodejs完成时，chrome v8引擎像java jdk的jvm一样，也会自动地安装和配置到了操作系统中。
      3. 注意：这里的chrome v8引擎是我们在安装nodejs时单独安装的，并不是chrome浏览器内部的那个v8引擎。
    2. 第2步：操作系统运行
快速入门：helloword
1. 第一步：新创建工程
2. 第二步：VSCode打开工程。
3. 第三步：创建HelloWord.js文件，编写并保存。因为nodejs必须遵循javascript的语法。
4. 第四步：编译与运行？
  1. java
    1. java jdk运行xxx.java时，使用的命令是javac、java命令。
  2. nodejs
    1. nodejs中只有一个命令，即node命令。因为nodejs是一门解释型语言，所以node.js不需要去编译，可以直接运行。点击“终端” 》新建一个终端：
Nodejs实现Httpserver服务，处理htpp请求与响应：证明nodejs是一门服务端语言
1. 业务：之前如果单独使用javascript，是无法完成http请求和响应的动作的，必须要要借助服务端语言（如java、php、python等）。做为后端语言，nodejs甚至可以操作mysql数据库、操作redis数据库、操作消息中间件等等。
2. 功能“集合”：处理http请求与响应
3. 神的“冰箱”：nodejs 》api 》http模块（相应模块引入即用）
4. 案例演示：
  1. 第一步：模块引入
    1. 注：ps：如果对于nodejs中的模块不理解，那么可以把nodejs中的模块看成是安装jdk以后内置的很多的包（如lang包、io包、util包等）。和java这些的这些内置包一样，nodejs中也可以导包（import相应的模块）后直接使用即可。
  2. 第二步：编写代码处理http请求（接收和响应）
```
// 第0步：导入模块，使用的是require，就类似于import java.io 
const http = require('http');
// 第1步: 创建一个httpserver服务
http.createServer(function(request,response){
    // 问：浏览器怎么认识hello server!!! 
    // 答：这句话的含义是：告诉浏览器将以text-plain的方式去解析hello server 这段数据。
    response.writeHead(200,{'Content-type':'text/plain'}); 
    // 给浏览器输出的内容
    response.end("<strong>hello server!!!</strong>");
}).listen(8888);
console.log("你启动的服务是：http://localhpst:8888以启动成功!!");
// 第2步: 监听一端口8888
// 第3步: 启动运行服务 node httpserver.js
// 第4步: 在浏览器访问http://localhost:8888
```
5. 总结：
  1. 上面的代码相当于以前我们在java学习的servlet。
  2. 上面的代码其实就是在模拟一个tomcat服务器。
Nodejs操作MySq|数据库：证明nodejs是一门服务端语言
1. 问题1：在nodejs的中并没有提供mysql模块
2. 解决1：依赖第三方的操作mysql的node js模块
3. 官网： https://www.npmjs.com/ 》搜索mysql，并点击进入，得》https://www.npmjs.com/package/mysql
4. 原理：类似于java springboot工程中，会使用maven依赖于第三方框架（spring、hibernate、mybatis等等）的起步依赖包。
5. 问题2：如何把支持nodejs的用于操作mysql的第三方模块引入到我们的项目中？
6. 解决2：npm install mysql。
  1. 原理：ps：首先，需要把操作mysql的第三方模块下载下来。
    1. 第1步：打开工程
    2. 第2步：在终端处运行命令：npm install mysql。这样，它就可以把第三方mysql的包（模块）相应的所有东西，全部拉到项目中的“node_modules 》mysql”目录中。
7. 案例演示：
  1. 第一步：安装mysql依赖：npm install mysql
  2. 第二步：定义db.js进行操作
  3. 第三步：新建数据库:db_test和表kss_user表
  4. 第四步：运行db.js
```
// 第0步: 导入mysql依赖包,  mysql属于第三方的模块，就类似于 java.sql一样的道理
var mysql = require("mysql");
// 第1步: 创建一个mysql的Connection对象
// 第2步: 配置数据连接的信息 
var connection =mysql.createConnection({
    host:"10.203.5.185",
    port:3306,
    user:"root",
    password:"MySQL#567890",
    database:"fLearn"
});
// 第3步：开辟连接
connection.connect();
// 第4步: 执行curd
connection.query("select * from kss_user",function(error,results,fields){
    // 如果查询出错，直接抛出
    if(error)throw error;
    // 查询成功
    console.log("results = ",results);
});
// 第5步: 关闭连接
connection.end();
// 第6步：最后一步：运行node db.js 查看效果
```
  5. 第五步：数据库查看数据
8. 总结：
  1. 证明nodejs是一门服务端语言
  2. node js可以使用内置的api，这些内置的api在nodejs安装完成后就已经存在（自带）了，可以在开发过程中直接使用。
  3. node js可以使用第三方的模块（工具包）。首先，必须进行安装（如node install mysql）。其次，npm会把所有相应的资源都会下载工程目录下的（node_modules 》mysql）目录中。最后，用工程中的所有源文件，使用require进入导入并使用。
node.js操作redis：自行扩展
node.js操作消息中间件：扩展扩展

四 Es6的新语法糖

概述
1. Es6是通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以Es6可以理解为是JavaScript的一个标准，但实际上后两者（JavaScript或JScript）是ECMA-262标准的实现和扩展。
2. Node.js 是一个开源和跨平台的 JavaScript 运行时环境。
3. Ecma国际，是一个组织。组成部分，当然是那些常见的浏览器厂商（的人员），比如说谷歌、火狐、微软等。工作内容，只做一件事，定义规范、标准，定义某种语言的语法规则。
业务
1. 有必要去学习Es6的一些新的语法堂，因为Es6的新语法广泛运用于app开发中。比如在做小程序（uniapp）开发代码中，Es6新的语法堂就会出现在我们创建的函数、数组的结构、对象的结构、模板字符串、增强变量等。
2. 重要，大量的时间，大的篇幅，讲解和阐述。
学习
1. Es6中的新语法（小小一些）：
  1. 变量的定义
    1. 需求：
      1. 以前，在早期的Es版本中，使用var定义变量和常量，导致变量和常量是无法进行严格地区分。
      2. 以前，var变量穿透问题
      3. 以前，var常量修改问题
    2. 功能“合集”：let和conts
      1. let：变量
      2. conts：常量
    3. 大神”冰箱“：ES6
    4. 建议：在实际开发和生产中，如果是小程序、uniapp或者一些脚手架中的开发工作，可以大胆的去使用let和const。但如果你是web开发，建议大家还是使用var，因为一些低版本的浏览器不支持Es6 let conts。
  2. 模板字符串
    1. 需求：以前，在开发过程中，要做很多静态和动态变量的拼接。以前，会常常使用单引号或者是双引号进行拼接，在拼接过程中会出现很多的混乱，Es6为了解决这个问题，就提出了1个模板字符串的概念。
    2. 功能“合集”：模板字符串：用于替换动态的参数，完成静态与动态变量的拼接的功能。
    3. 大神”冰箱“：ES6
  3. 函数上的更改
    1. 需求：以前，在定义函数的过程中，是无法给函数的参数进行默认值的赋值。
    2. 功能”合集”：
      1. Es6，给函数参数赋予默认参数值。
      2. Es6，箭头函数简化函数的定义：
        应用场景
        箭头函数-重点(在未来的项目开发中：比如小程序、unipp和一些常见的脚手架会大量被使用)
        特点
        不需要function关键字来创建函数。可去掉function关键字，在括号后面加箭头。如果方法参数只有一个，可以把括号也省去。反之，如果方法有多个参数，括号不能省略。
        省略return关键字。如果逻辑代码仅有return语句，可以直接省去return关键字。反之，如果你有逻辑休，你就不能省略return。
        继承当前上下文的this关键字。
    3. 大神“冰箱”：Es6
  4. 对象上的改进
    1. 需求：对象初始化简写、对象解构、传播操作符
    2. 功能“合集“：
      1. ES6，对象初始化简写。
        因为对象是以key:value的形式存在：
        如果key和变量的名字一致，可以只定义一次即可。
        如果value是一个函数，可以把":function"去掉，只剩下()即可。
      2. ES6的语法：对象解构，es6提供一些快速获取对象属性和对象方法的方法。
        传统：对象问题以key:value的形式存在，所以获取对象属性和方法的方式有两种
        方式1：通过" 点. "
        方式2：通过" [] "
        ES6：对象解构，更快速更便捷
        方式1：通过" {} "
      3. ES6的语法：传播操作符，即把一个对象的属性传播到另外一个对象中。
        IE浏览器不支持，谷歌浏览器支持。
        案例：var person3 = {
           name:"李四",
           gender:1,
           tel:"11111",
           address:'广州'
        };
        // ...person4 把剩下没取走给我。
        var {name,gender,...person4} = person3;
        其中person3只拥有，name,gender属性，因为tel，address属性已经被解构出来。
        person4只拥有，tel，address属性。
    3. 大神”冰箱“：ES6
  5. 数组(了解)
    1. map方法(了解)
      1. 业务：为了更加方便地使用数组，ES6开发了关于数组的增强API
      2. 解决：map方法
        map方法具体循环功能。
        map方法具有回填功能：
        必须要有返回的值，即return xxx。
        map方法可以将原数组中的所有元素通过一个函数进行处理并放入到一个新数组中并返回该新数组。
    2. reduce方法(了解)
      1. 业务：因为数组的元素经常会牵扯到一些计算和操作，如何更快速地完成计算？
      2. 解决：reduce方法
        
        前一个值和后一个值，相互计算（加、减、乘、除）

五 nodejs与es6的区别与联系

问题1：那么ES6的新语法，能够直接使用在nodejs的源代码中呢？
答案1：答案是肯定的。
结论1：ES6的新语法，开发人员都可以大胆地编写到nodejs的源代码中。
结论2：es6可以在nodejs, uniapp微信小程序中得到广泛支持，你可以大胆去使用这些新的语法。
结论3：nodejs是基于javascript的语法糖来构建的。
结论4：nodejs是基于服务端运行的javascript。

六 Npm包管理器

概述
1. 定义
  1. npm是Node.js包管理工具。
  2. npm是一个快速下载和管理资源文件的工具。
2. 作用
  1. 在联网的状态下，我们通过命令可以快速地下载到这些第三方文件到本机上。
3. 下载与安装
  1. 方式1：去官网下载
  2. 方式2：node.js安装完成后会自带npm包管理器（内置，不需要单独安装），cmd 》npm -v。
业务
1. 在前端开发过程中，我们的资源文件是需要下载的。比如，要下载并使用的第三方文件：jquery.js、vue.js、bootstrap等待。
原理
1. npm相当于java中的的Maven 。
  1. maven
    1. maven的作用是：第1点：快速构建项目的骨架工程；第2点：快速地下载第三方的（依赖）jar包。
  2. npm：也是如此，直接把npm当成maven即可。
    1. npm的作用：第1点：快速构建nodejs工程；第2点：快速安装和依赖第三方模块；比如，npm install mysql/redis/rabbitmq等等。
2. npm中央仓库：直接把npm的中央仓库当成maven的中央仓库
  1. 业务：为什么要有npm中央仓库呢？
    1. 首先，nodejs在安装过来种内置了很多模块，但是这些模块无法满足工作中所有的业务场景和需求。如下图所示：
    2. 其次，需要大量的开源的第三方的产品，才能完完全全满足所有的业务需求。因此，提供了npm仓库平台，来管理第三方（开发人员）开发的各种专用模块。如果操作mysql、redis、rabbitmq的组件等等。
  2. 位置：https://www.npmjs.com/
  3. 用途：提供了所有的第三方的依赖。
案例1：npm快速构建node.js工程（初始化），npm init。快速安装和依赖第三方模块。
1. 第一步：vs code，创建项目
  1. 第1步：在本机磁盘上新建一个文件夹（项目）
  2. 第2步：vs code 》文件》打开文件夹（打开项目）
2. 第二步：终端，初始化项目，npm init可快速构建nodejs工程，并产生package.json文件
  1. 第1步：npm init：项目的初始化工作，npm init可快速构建nodejs工程，并产生package.json文件，并回车
    1. package name：包名，有默认值，也可自定义
    2. version：版本号，有默认值，可自定义
    3. description：描述，自定义
    4. entry point: (index.js)：入口函数，index.js默认是函数
    5. test command：测试命令，直接回车
    6. git repository：如果你的项目需要被代码仓库（git、maven等）所管理的话，地址在这里配置即可。
    7. keywords：关键词，自定义
    8. author：作者
    9. license: (ISC)：签证协议
  2. 第2步：配置完成（一路回车）》Is this OK？(yes），输入yes或ok回车
  3. 附录：npm init -y，省略中间步骤，自动确认，都使用默认值（甚至是""空字符串）
3. 第三步：vs code，项目配置文件package.json
  1. 第1步：package.json：在项目目录中自动生成package.json文件
    1. 如下图所示：
    2. 内容如下：
      {
      
      "name": "npm_demo", //项目所在文件的名称（即项目名称、工程名）
      
      "version": "1.0.0",//项目版本
      
      "description": "",//项目描述
      
      "main": "index.js",//项目的入口js文件
      
      "scripts": {//项目的运行脚本
      
      "test": "echo \"Error: no test specified\" && exit 1"
      
      },
      
      "author": "",//开发者
      
      "license": "ISC"//授权协议
      
      }
    3. 作用：package.json类似于maven中的pom.xml文件（pom.xml文件的作用：管理依赖）。
4. 第四步：快速安装和依赖第三方模块。
  1. 问题1：如何快速安装依赖第三方模块?
    1. 答：npm install xxx 或者 npm i xxx，这里的xxx是模块名称
    2. 案例1：mysql 》npm install mysql
  2. 问题2：安装模块放在什么地方?
    1. npm install mysql
    2. 答：安装的模块会放入到项目目录下的node_modules文件夹中：
  3. 问题3：安装模块如何使用呢?
    1. 新建一个redisDb.js
    2. 答：编码：require
  4. 问题4：模块（下载的模块，或叫依赖的模块）和package.json有什么关系呢?
    1. 业务：第三方的mysql模块，如果每创建一个新的项目，都要下载安装一次，那么就会很麻烦。甚至遇到网络卡顿时，就会很慢很慢。
    2. 答：通过npm install xxx安装的第三方模块的坐标，都会记录在package. json这个文件中，就类似于maven中pom.xml一个含义和作用。记录的作用：复用。
      1. package.json记录的依赖模块（的坐标）
      2. 通过npm install可以直接把package.json所依赖的模块全部自动下载下来，这样就可以避免重复下载模块，更快速/更方便去集成的第三模块。
    3. 理解：复用。
      1. 第1步：创建新的项目
      2. 第2步：npm init -y，快速构建nodejs项目并初始化，生成package.json
      3. 第3步：需求：新的项目也需要用到旧项目中已经安装的mysql（第三方），怎么办呢？
        传统方案：一个项目一个安装：npm install mysql
        复用方案：
        第a步：把旧项目的package.json文件拷贝到新项目的工程目录下
        第b步：在新项目的工程目录中执行命令即可：npm install
        第c步：此时，自动会把package.json文件所记录的全部依赖，都下载下来，进行依赖。
    4. 理解：复用，为什么不直接去拷贝node_module文件夹呢？
      1. 答：当然可以。但是为什么不拷贝呢？因为，下载模块的依赖过多且文件过大，混乱文件很多，一般几万到几十万的文件。如果去拷贝这些文件，那么是非常慢的。
  5. 问题5：如果安装模块很慢怎么办？
    1. 答：
      1. 第1步：阿里云把国外的中央仓库的第三方模块都放到阿里自己的服务器上了。
      2. 第2步：安装阿里的cnpm命令：npm install -g cnpm --registry=https://registry.npm.taobao.org，在任意终端和任何命令行执行。
      3. 第3步：验证：cnpm -v
      4. 第4步：cnpm install mysql
      5. 附录：推荐使用淘宝 NPM 镜像 npmmirror 中国镜像站
    2. 理解：慢，不要急，因为阿里提供了一个在北京的镜像仓库，比在国外的中央仓库要快很多。
  6. 问题6：如何运行?
    1. 答：node redisDb.js，运行过程.js是可以省去的。
    2. 注1：终止命令行：ctrl + c,如果你没有终止，你可以多次执行。即前面安装两个第三方模块，分别是mysql和redis。如果想把mysql和redis创建的服务给终止掉，那么可以直接执行ctrl + c。
    3. 注2：永远记住一点，运行呢是nodejs的事情，而npm只是包管理器（工具）。
  7. 问题7：如何下载多个?
    1. 答：npm install mysql redis vue jquery
      cnpm install mysql redis vue jquery
    2. 指定版本号@：npm install jquery@2.1.x
  8. 问题8：下载指定的版本号
    1. 答：npm install jquery@2.1.x
      cnpm install jquery@2.1.x
      具体的版本号:查看官方网址:https://WWW.npmjs.com/package/redis
5. 第五步：卸载依赖的第三方模块
  1. 第1步：npm/cnpm uninstall jquery mysql vue

七 Babel的安装作用

业务
1. ES6的某些高级语法在最新版本的浏览器（更别说低版本的）环境甚至是最新版本Node.js的v8引擎环境中也无法执行。那怎么办呢？降级处理，所以Babel就出现了。
2. 很多浏览器不是完全能够支持Es6的新语法（堂，比如我们的模块化），那怎么办呢？而Babel的作用，可以把Es6的语法（堂）做降级处理，浏览器就可以读懂降级后的语法。总的来说，Babel的作用就是编译层低版本配置的js，让浏览器能够去认识和识别。
作用
1. 降级处理：将es6的代码直接转成es5的代码，让浏览器和Node.js的v8引擎能够识别。
案例演示：babel使用
1. 第一步：babel的安装。方案1：创建工程，在终端里执行下面的命令。方案2：不用安装工程，直接cmd文件夹。
          npm/cnpm install -g babel-cli
          #查看是否安装成功
          babel --version
  1. 问题1：无法将“babel”项识别为 cmdlet、函数、脚本文件或可运行程序的名称优快云
  2. 问题2：babel : 无法加载文件 D:\nodejs\node_global\babel.ps1，因为在此系统上禁止运行脚本。优快云
  3. 问题3：set-ExecutionPolicy : 对注册表项“HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\PowerShell\1\ShellIds\Microsoft.PowerShell”的访问被拒绝。解决：以管理员身份运行VS Code。
2. 第二步：babel的使用
  1. 第1步：项目。创建babel文件夹（项目 / 工程）
  2. 第2步：package.json。初始化化项目，把babel的项目变成一个nodejs的项目，执行nmp init -y，产生package.json文件
  3. 第3步：src/example.js：
       // 转码前
      // 定义数据
       let input = [1, 2, 3]
       // 将数组的每个元素 +1
      input = input.map(item => item + 1)
       console.log(input)
    1. 工程的根目录下创建文件夹及文件 src/example.js。
    2. 注1：创建src文件夹的目的是收纳和整理，我们会把很多源文件统一放到此目录下，后面统一地来编译和转换。
    3. 注2：example.js中会大量使用es6的高级语法。此时我们的浏览器（更别说是低版本）和nodejs的v8引擎是无法支持的，所以说我们要开始做一些babel的配置。
    4. 注3：降级处理：将es6的代码直接转成es5的代码，让浏览器和Node.js的v8引擎能够识别。
  4. 第4步：配置.babelrc
    1. 第a步：在项目的根目录下存在.babelrc的配置文件
      1. 配置转换的版本：
        {
        "presets": ["es2015"], //即es6转换成es2015
        "plugins": []
        }
  5. 第5步：安装转码器，在项目中安装
    1. npm install --save-dev babel-preset-es2015
    2. 注1：转码器的作用（es6源文件、babel配置文件、转码器、es2015文件的关系），如下图所示：
  6. 第6步：执行命令，进行转码
    1. babel src -d dist，把项目根目录下的src目录下的所有es6源文件，都转换成es2015版本的文件
      1. 效果：在项目的根目录下多了一个dis目录，里面生成有es2015版本的example.js文件：
3. 案例演示：自定义脚本的方式快速地做babel的统一编译
  1. 业务：自定义脚本的方式快速地做babel的统一编译，我们就不用记得这么大篇幅的脚本和这么长的命令了。在以后的开发中，在小程序开发、uniapp开发会经常看到这种配置的使用。
    通过这种方式，我们就可以少写很多次的命令、代码、逻辑。
  2. 原理：只是一种简化，并没有其它的功能、并没有其它的知识点。说白了，就是通过键和值（key和value）的方式，把这些命令集中管理在package.json中。
  3. 案例：
    1. 第一步：改写package.json
      {
      "scripts": {
      "dev": "babel src -d dist" //其中dev是键（随便取、自定义）
      },
      }
    2. 第二步：转码的时候，在项目根目录下（cmd也行、工具也行）执行下面的命令
      1. npm run dev，其中dev是键（随便取、自定义）
    3. 第三步：看到效果是一样的

八模块化管理

业务
1. 在现在的大前端开发中，模块化是必须要学习的。
  1. 以以前：使用原生的javascript对象
    1. 异步请求：使用javascript原生的XMLHttpRequest对象。
  2. 以前：导入jquery，<script src="<%=basePath%>/jquery-1.7.js">
    1. 异步请求：复制jquery源码（可压缩，也可不压缩）过来才能使用ajax。
    2. 总结：但是这也不叫模块化管理，这只是引入别人的东西来使用而已。我们更希望javascript能够像java一样，有类、包等这些概念，但是现在没有。那后面呢，就慢慢地引出两个规范（CommonJS 规范与ES6规范）。
      咱们在nodejs中去使用的，几乎都是CommonJS规范，如require("mysql")语法。
      而咱们如果是做小程序开发或者是uniapp开发，那么使用es6规范会比较多。
  3. 模块化管理：
    1. 异步请求：
      1. CommonJS模块化规范：exports 和require 来导出、导入模块。
        应用场景：nodejs
      2. es6模块化规范：使用 export 和 import 来导出、导入模块
        应用场景：vuejs、uniapp、小程序开发
2. js早期定位为一个静态的东西，后面用它成功实现动态的东西（页面，如ajax）。但一直没有包含一些高级的概念，如面向对象。CommonJS和Es6把包管理、模块化管理、面向对象提上了日程。
作用：模块化管理可以让我们的代码得到复用。
原理：模块化管理其中模块化相当于java中的导入、导出（import、package）的概念
详解1：CommonJS模块化规范，CommonJS使用 exports 和require 来导出、导入模块。
1. 概述
  1. 其实大家学完“CommonJS模块化规范”以后，就会发现javascript也支持一些面对对象的编程。以前，是不支持的。
2. 案例演示
  1. 第一步：工程、项目：创建目录（工具或cmd打开项目根目录
  2. 第二步：四则运算.js
    // 定义成员：
    const sum = function(a,b){
    return a + b
    }
    const subtract = function(a,b){
    return a - b
    }
    const multiply = function(a,b){
    return a * b
    }
    const divide = function(a,b){
    return a / b
    }
    1. 上面写的代码，在java中可以称为一个工具类。在java中会把这几个方法修饰为public static，然后别人调用时类中的加减乘除方法（传参）时可以直接返回结果。
      在java中，如果想复用上面的代码，可以直接通过import引用此类，然后就可以通过类名.静态方法的方式调用类中的静态方法，达到复用的方法。
      然后，在没有使用模块化的javascript代码要想复用上面的代码，必须把上面的源代码粘贴到那个另一个项目中，另一个项目才能够使用代码中定义的方法。
      但是，现在希望有一个东西能够把上面的javascript代码导出给其它javascript项目使用，不用复制源码那。以前javascript中是没有导出的，但自从Commonjs规范来了以后，约定了一个关键词（module.exports），可以用于做导出工作，直接导出即可。
  3. 第三步：导出，CommonJS模块化规范
    // 定义成员：
    const sum = function(a,b){
    return a + b
    }
    const subtract = function(a,b){
    return a - b
    }
    const multiply = function(a,b){
    return a * b
    }
    const divide = function(a,b){
    return a / b
    }
    // module.exports：导出给别人使用
    module.exports = { // {}体中定义了：导出成什么样子
    sum:sum, // 把sum方法导出。给别人使用
    subtract:subtract, // 把subtract方法导出。给别人使用
    multiply:multiply, // 把multiply方法导出。给别人使用
    divide:divide // 把divide方法导出。给别人使用
    }
    
    // 简写：因为sum:sum中的sum同名，所以可以简写
    //module.exports = {
    // sum,
    // subtract,
    // multiply,
    // divide
    //}
  4. 第四步：导入并使用，CommonJS模块化规范
    1. 导入测试.js，其它地方就可以直接引入并使用了：
      //引入模块，调用被导出的方法（模块中没有导出的方法是不能调用的），注意：当前路径必须写 ./
      const m = require('./四则运算.js');
      console.log(m);
      const r1 = m.sum(1,2);
      const r2 = m.subtract(1,2);
      console.log(r1,r2)
  5. 第五步：运行程序，终端命令，node 引入模块.js，成功打印输出
3. 总结
  1. 但是在现在的开发中，使用CommonJS模块化规范的已经不多了，在nodejs中是这么用的。在现代的前端开发中，更多地会去使用ES6模块化规范。
详解：ES6模块化规范，使用 export 和 import 来导出、导入模块
1. 第一步：工程/项目：创建 mokuai-es6 文件夹
2. 第二步：userApi.js：创建 src/userApi.js 文件，导出模块
  
  export function getList() {
  
  // 在真实业务中，异步获取数据
  
  console.log('获取数据列表')
  
  }
  
  export function save() {
  
  // 在真实业务中，异步保存数据
  
  console.log('保存数据')
  
  }
3. 第三步：创建 src/userComponent.js文件，导入模块
  
  //只取需要的方法即可，多个方法用逗号分隔
  
  import { getList, save } from './userApi.js'
  
  getList()
  
  save()
4. 第四步：测试
  1. 报错：SyntaxError: Cannot use import statement outside a module，说不支持"import"这样的语法。默认是不支持es6语法的，怎么办呢？使用Babel降级，把代码编译成浏览器能够识别的代码。
  2. 注意：这时的程序无法运行的，因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行。
5. 第五步：ES6模块化规范 + babel降级处理
  1. 第1步：终端：把项目变成nodejs项目，并初始化项目，产生package.json
    1. npm init -y
  2. 第2步：.babelrc配置文件
    {
    "presets": ["es2015"],
    "plugins": []
    }
  3. 第3步：终端：安装转码器，在项目中安装
    1. npm install --save-dev babel-preset-es2015
  4. 第4步：package.json：定义运行脚本，package.json中增加”build”命令：
    {
    // ...
    "scripts": {
    "build": "babel src -d dist"
    }
    }
  5. 第5步：执行命令转码：把es6代码转换成浏览器能够识别且可以直接执行的es2015的代码，并进行打包成处理
    1. npm run build
  6. 第6步：测试成功，
    1. node dist/userComponent.js
简化：ES6模块化规范，使用 export 和 import 来导出、导入模块
1. 第一步：创建 src/userApi2.js ，导出模块
  export default {
  getList() {
  console.log('获取数据列表2')
  },
  save() {
  console.log('保存数据2')
  }
  }
2. 第二步：创建 src/userComponent2.js，导入模块
  1. import user from "./userApi2.js"
    user.getList()
    user.save()
3. 第三步：执行命令转码
  1. npm run build
4. 第四步：运行程序
  1. node dist/userComponent2.js

九 Webpack打包和编译（工具）

业务
1. 在一个nodejs工程中，他可能由多个.js、多个.png、多个.css构成、多个其它静态资源（.less、.coffee、jade等）所构成。第1点：如果把这些静态资源（如重要的源代码、重要的图片等）完全暴露给访问者去看，那是一件很危险的事情。第2点：nodejs工程中会有很多的（成千上万）的静态资源，数量和大小都很大，我们得想办法在打包时把多个.js文件合并且压缩成一个.js文件，把多个.css文件合并且压缩成一个.css文件。这样的好处是，文件数量和大小都会大大减少。
  那谁来完成上面所说的两件事情呢？Webpack。Webpack可以把源码中的细节进行隐藏，把所有的.js/.css/.png文件合并、加密、压缩成一个.js文件。这样使得浏览器对于文件来的访问速度可以更快、更安全。
2. 在一个项目中会包含很多资源文件（css、html、js、图片等），而其中的css和js文件可能涉及到文件的压缩和合并的工作。为什么要压缩和合并呢？因为要压缩文件的大小、要提高文件的访问速度，让资源文件变得更安全、更高效。
  1. 方式1：开发人员手工合并，效率低。
  2. 方式2：Webpack用命令的方式，快速把资源文件（如.css、html、js）进行统一与合并，合并变成一个json，最后还要加密。
应用场景
1. 是工具：Webpack 是一个前端资源加载和打包的工具。
2. 多功能：
  1. 合并、加密、压缩静态资源（.js/.css/.png等）。
  2. 集成编译、集成babel、集成vue里面的一些编译的过程等等，Webpack都已经集成了。
  3. vuejs、小程序、uniapp：在未来的小程序开发、uniapp、一些脚手架等等中，它里面都集成了我们的Webpack。只是你可能已经看不到了，但是Webpack一定存在。
流原：
1. 从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换（合并、压缩、加密）成一个静态文件，减少了页面的请求，从而提升网站的响应速度和安全性。
安装
1. 全局安装：npm install -g webpack webpack-cli
2. 安装后查看版本号：webpack -v
  1. 问题1：webpack : 无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。解答：cmd webpack -v 不是内部或外部命令,也不是可运行程序
  2. 问题2：webpack -v System Binaries Browsers。解答1：安装webpack3和webpack4不一样，这里选择安装3版本。解答2：webpack全局安装
  3. 问题3：webpack5以上，用命令webpack -v后得到的结果是：
    System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz
    Memory: 4.80 GB / 15.85 GB
    Binaries:
    Node: 14.15.2 - C:\Program Files\nodejs\node.EXE
    npm: 8.9.0 - C:\Program Files\nodejs\npm.CMD
    Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (108.0.1462.42)
    Internet Explorer: 11.0.19041.1566
案例演示
1. 第一步：初始化项目
  1. 第1步：工程/项目：创建webpack文件夹，并使用vs code打开项目。
  2. 第2步：npm init -y：工程变成nodejs工程，初始化项目，生成package.json。
  3. 第3步：src：在项目根目录下创建src文件夹，这个文件夹会存放2个需要合并的js文件（common.js 和 utils.js）。
  4. 第4步：common.js：src下，需要合并的源文件。
    exports.info = function (str) {
    
    console.log(str); //往终端控制台输出
    
    document.write(str); //往浏览器窗口输出
    
    }
  5. 第5步：utils.js：src下，需要合并的源文件。
    exports.add = function (a, b) {
    
    return a + b;
    
    }
  6. 第6步：main.js：src下，入口文件
    1. 概念
      1. main.js是一个入口文件。
      2. 入口文件的作用是：其实就是把模块集中进行引入，统一汇总。
    2. 编码：
      //导入Common.js
      
      const common = require('./common');
      
      //导入utils.js
      
      const utils = require('./utils');
      
      //对象的方法被调用
      
      common.info('Hello world!' + utils.add(100, 200));
  7. 第8步：执行webpack，查看效果。
2. 第二步：js打包
  1. 第1步：webpack.config.js：在项目根目录下定义一个webpack.config.js配置文件，用来配置打包的规则。
    //第一步：使用Node.js内置的path模块（固定写法，不要纠结）
    
    const path = require("path");
    
    //第二步：定义js打包的规则
    
    //原理：首先，当我们使用webpack命令时，webpack就会读取到webpack.config.js文件。
    
    // 其次，通过“webpack.config.js中的entry: './src/main.js'”找到入口配置文件main.js。
    
    // 然后，在main.js文件中，看到导入了两个静态的js（common.js和utils.js）需要进行打包合并。
    
    // 最后，webpack会把这两个.js文件（common.js和utils.js）合并成一个.js文件。
    
    module.exports = {
    
    entry: './src/main.js', //配置入口文件，入口函数，即从哪里开始进行编译打包。
    
    output: {//输出配置，编译成功以后把内容输出到哪里去？
    
    //输出路径：定义输出到指定的目录。可自定义。
    
    // __dirname：当前文件所在路径。当前项目根目录。nodejs的常量。
    
    // './dist'：产生dist文件夹，并把合并后的.js文件放在这里。
    
    path: path.resolve(__dirname, './dist'),
    
    //合并的.js文件会存储在dis/bundle.js文件中。
    
    filename: 'bundle.js' //输出文件
    
    }
    
    }
  2. 第2步：终端webpack：命令行执行编译命令
    1. main.js的代码没保存（ctrl+s）、main.js的代码没保存（ctrl+s）、main.js的代码没保存（ctrl+s）
    2. 日志解读：
    3. 附
      1. ~~问题：E:\IdeaProjects\MavenWeb\MavenWeb\Vue\webpack-study\src.js doesn't exist~~
      2. ~~解答：狂神说 Vue p14 src不存在解决方案~~
  3. 第3步：webpack目录下创建index.html ，引用bundle.js
    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <meta charset='utf-8'>
    
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    
    <title>Page Title</title>
    
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    
    <script src='main.js'></script>
    
    </head>
    
    <body>
    
    <script src="bundle.js"></script>
    
    </body>
    
    </html>
  4. 第4步：浏览器中查看index.html
3. 第三步：css打包
  1. 概述
    1. 默认情况下，Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用（安装）loader 进行转换。
    2. Loader 可以理解为是模块和资源的转换器。
    3. 首先我们需要安装相关Loader插件：
      1. css-loader 是将 css 装载到 javascript。
      2. style-loader 是让 javascript 认识css。
  2. 第1步：style-loader和 css-loader安装
    1. 答：npm install --save-dev style-loader css-loader，查看package.json中可以看到被依赖：
  3. 第2步：webpack.config.js修改：配置对css合并打包的规则，即告诉webpack使用style-loader和 css-loader来合并打包css。
    //第一步：使用Node.js内置的path模块（固定写法，不要纠结）
    
    const path = require("path");
    
    //第二步：定义js打包的规则
    
    //原理：首先，当我们使用webpack命令时，webpack就会读取到webpack.config.js文件。
    
    // 其次，通过“webpack.config.js中的entry: './src/main.js'”找到入口配置文件main.js。
    
    // 然后，在main.js文件中，看到导入了两个静态的js（common.js和utils.js）需要进行打包合并。
    
    // 最后，webpack会把这两个.js文件（common.js和utils.js）合并成一个.js文件。
    
    module.exports = {
    
    entry: './src/main.js', //配置入口文件，入口函数，即从哪里开始进行编译打包。
    
    output: {//输出配置，编译成功以后把内容输出到哪里去？
    
    //输出路径：定义输出到指定的目录。
    
    // __dirname：当前文件所在路径。当前项目根目录。
    
    // './dist'：产生dist文件夹，并把合并后的.js文件放在这里。
    
    path: path.resolve(__dirname, './dist'),
    
    //合并的.js文件会存储在dis/bundle.js文件中。
    
    filename: 'bundle.js' //输出文件
    
    },
    
    module: {
    
    rules: [
    
    {
    
    test: /\.css$/, //打包规则应用到，所有以css结尾的文件上
    
    use: ['style-loader', 'css-loader'] //用这两个转换器
    
    }
    
    ]
    
    }
    
    }
  4. 第3步：style.css创建：在src文件夹创建style.css：
    body{
    background:pink;
    }
  5. 第4步：style.css引入：修改入口文件main.js，在第一行引入style.css：
    //导入Common.js
    
    const common = require('./common');
    
    //导入utils.js
    
    const utils = require('./utils');
    
    //导入css
    
    require('./style.css');
    
    //对象的方法被调用
    
    common.info('Hello world!' + utils.add(100, 200));
  6. 第5步：运行编译命令
    1. 方案1：npm run dev，自定义脚本。
    2. 方案2：执行webpack命令，直接使用webpack命令。
  7. 第6步：index.html查看：浏览器中查看index.html ，看看背景是不是变成粉色啦？是的。
4. 第四步：webpack -w命令，监听作用，用于实时编译、合并、压缩、打包最新代码
5. 总结：
  1. 说明1：执行webpack命令后，它具有合并且打包的功能。
  2. 说明2：虽然在以后的项目开发工作中，你可能用不到webpack，或者说看不到webpack了，但是呢webpack它一定存在。这是因为以后前端开发的框架或脚本架（如uniapp、vue、小程序）已经内置webpack了，到那时我们就不用去使用webpack了，但它一直存在。
  3. 说明3：webpack 其实是 webpack webpack.config.js

十如何快速构建一个nodejs项目vue-element-admin

概述
1. 就相当于它是用vue + element ui写的一个后台的管理系统的一个脚手架。
2. 我们可以直接基于它来进行二次开发，就可以加快咱们的开发速度。
3. 在线预览的地址：首页 - Vue Element Admin (panjiachen.github.io)
使用（本地启动）
1. 第一步：下载、解压、vs code打开：把项目下载到本地，解压得到本地的文件夹，用vs code打开项目
  1. config目录：配置文件所在的目录，包括启动端口号的配置、项目基本简介的配置等。
  2. config/index.js：配置，如默认端口：9527。
  3. node_modules目录：项目下载安装的所有依赖（相当于maven项目中的lib目录）。
  4. ./src目录：源码目录，项目入口main.js。
  5. ./src/api：后端调用的前端接口。
  6. ./src/views：所有的视图都在views目录下面。
  7. ./src/mock：所有的测试数据都在mock目录下。
  8. ./src/router：所有的路由都在router目录下。
  9. ./src/App.vue：入口页面是App.vue，App.vue是跟咱们的main.js是绑定的。
  10. ./package.json：表明是一个node工程。
    1. dependencies依赖（很多）：因为是刚刚打开项目，vs code默认情况下是不会自动去把这些依赖下载下来的，因此现在此项目是部不动的，所以（像后端项目一样）得先要把所有的依赖先下载下来。
  11. ./index.html：这个前端项目中，整个项目的入口只有一个页面，即index.html。在index.html中，就只有一个<div id="app"></div>。相当于在这个项目中，所有的视图都只会经过这个页面来跳转。这也是我们vue入口时候的一个案例。
  12. ./babelrc：降级，es6 》es2015
  13. build/webpack.base.conf.js：webpack配置。其中，entry{ app:'./src/main.js'}，表明了项目的入口文件是main.js。其中，filename:'[name].js'，表明打包成并在项目中生成[name].js文件，供项目去使用。
  14. views 》excel 》exportExcel.vue：模块化规范使用的地方。vue一般分为3块，第1块template模块（html），第2块<script>脚本，第3块<style>样式。模块化的使用：如import { fetchList } from '@/api/article'、import { parseTime } from '@/utils'。
2. 第二步：终端：
  1. 第1步：npm install：下载安装所有的依赖。
  2. 第2步：npm run dev：本地跑起来（重启项目）。
  3. 第3步：npm run build：打包
  4. 第4步：验证，，访问地址
3. 总结：
  1. 项目中（Xxx.vue），包含着大量的模块化的代码。
  2. 使用时，未来的话，大家只需要把项目中相关页面（如各种表格、报表、柱状/饼状图的使用）拷贝到自己的前端项目中，然后把数据部分换成数据库的真实数据（项目中是写死的）即可。
  3. 使用时，大家也看到这个前端项目并没有去连接任何数据库（如mysql、oracle、sqlserver），即脱离的数据库，但却可以独立运行起来了。这说明了，真正的大前端项目，它完全可以独立于后台（端）而存在、运行、处理数据，而不像以前的印象中的必须要使用jsp、springfremart等待模板引擎去渲染。
  4. 使用时，要知道它是一个可以独立运行起来的在线前端项目，现在很多公司的前端项目和开源项目都是使用它来做脚手架的。
  5. 所以说，大家应该去网上多找找这样的开源的前端（或后端，如若依）项目，然后把它在本地跑起来，然后自行测试一下。你看的开源项目越多，在未来开发中，你就知道哪些组件在哪个开源项目有，这样就可以大大节约你的时间，提高你的竞争力。