根据以下学习视频，个人整理的笔记
https://www.bilibili.com/video/BV1BU4y147pS?spm_id_from=333.999.0.0&vd_source=7a8946d22777450e46486d5fd60d8d4d
概述
前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。
移动互联网带来了大量高性能的移动终端设备以及快速的无线网络，HTML5，node.jS的广泛应用，各类框架类库层出不穷。
当下国内的大部分互联网公司只有前端工程师和后端工程师，中间层的工作有的由前端来完成，有的由后端来完成。
前端工具VSCode
VSCode和VisualStudio的区别
VSCode（VisualStudioCode）和VisualStudio的区别
- 运用领域不一样，说直白点，就是VSCode主要是写前端代码的工具，VisualStudio主要是写后端代码的工具，VSCode没有VisualStudio功能强大。
- 跨平台能力不一样，VSCode是可以跨平台编译的，比如我刚才在ios系统进行的编写，之后有的事情有转到windows系统进行编译，这样是可以的，不需要任何的转换就行了。
- 这两者之间的功能不一样，VSCode使用起来比较简单，所以这也就导致其功能没有VisualStudio完善，VisualStudio是现在使用频率最多的开发环境，里面有许多现成的工具，简单的功能调试、自检功能、数据库链接也比较方便，是现在效率最高的开发工具。
其实这两款产品都是微软公司生产出来的产品，我们不能否定它们任何一个，因为无论是哪个都有它们存在的意义，找到适合我们的工具才是最好的。
下载安装VSCode
1、下载地址：https://code.visualstudio.com/
2、打开安装包安装即可！以下是关键安装步骤的选择，并不是所有的安装步骤。安装完成后，打开即可！
VSCode汉化
如果重启VSCode后，界面没有汉化，则点击快捷键【Ctrl+Shift+p】，在搜索框中输入’‘configure display language’‘，回车。选择’zh-cn’，再次重启VSCode即可！如果要展示英文，选择’en’即可
VSCode插件安装
为方便后续开发，建议安装如下插件
设置字体大小
左边栏Manage -> settings -> 搜索 “font” -> Font size
开启完整的Emmet语法支持
Emmet语法的前身是Zen coding,它使用缩写,来提高HTML/CSS的编写速度,VScode内部已经集成该语法.
- 快速生产HTML结构语法
- 快速生产CSS样式语法
设置中搜索Emmet，勾选如下选项，必要时重启VSCode
Node.js
Node.js的介绍
了解Node.js、并且在本地安装好这个软件
官网： http://nodejs.cn/
文档说明：https://nodejs.org/zh-cn/docs/
介绍：
- Node.js是一个让JavaScript运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。
- **简单的说Node.js就是运行在服务端的JavaScript程序。**Node.js是一个基于Chrome JavaScript运行时建立的一个平台。底层架构是：javascript，文件后缀：.js
- Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
浏览器的内核包括两部分核心：
- DOM渲染引擎；
- java script解析器（js引擎）；java script运行在浏览器内核中的js引擎内部，而Node.js是脱离浏览器环境运行的JavaScript程序，基于V8引擎
Node.js的安装
查看Vue的笔记即可，之前安装过！
Node.js入门
1、新建一个Nodejs目录，然后用VSCode打开这个目录
2、在Nodejs目录下新建文件helloworld.js，编写代码，然后运行即可！
Node.js实现HttpServer服务
新建文件httpserver.js，编写代码
// Node.js中有很多的模块，相当于JDK中有很多的包
// 导入相关的模块即可使用相关的API
// 这里require导入http的模块，相当于java中的import导入相关的包
const http = require('http');
// 创建一个httpserver服务
http.createServer(function(request,response){ // 这里跟JavaWeb中学习的Servlet类似
// 告诉浏览器将以 text/plain 的方式去解析输出的内容
response.writeHead(200,{'Content-type':'text/plain'});
// 给浏览器输出内容
response.end("hello server!!!");
}).listen(8888); // 监听一个端口：8888
console.log("你启动的服务是：http//localhost:8888")
// 运行服务：node httpserver.js
// 在浏览器中访问http:localhost:8888
运行服务，在浏览器中访问测试即可！
Node.js操作MySQL数据库
在Node.js官方文档中是没有提供MySQL模块的，所以我们需要依赖第三方的模块，下载MySQL的模块（相当于JDK中没有提供相关的包，需要依赖第三方的包，下载第三方的包）
1、下载mysql模块
2、新建数据库，创建表，添加数据
3、新建db.js，编写代码
// 导入mysql模块
var mysql = require("mysql");
// 创建一个mysql的Connection对象
// 配置数据库连接的信息
var connection = mysql.createConnection({
host:"127.0.0.1",
port:3306,
user:"root",
password:"123456",
database:"testdb"
});
// 开辟连接
connection.connect();
// 执行curd
connection.query("select * from kss_user",function(error,results,fields){
// 如果查询出错，直接抛出错误
if(error)throw error;
// 查询成功
console.log("results = ",results);
});
// 关闭连接
connection.end();
// 运行db.js，查看运行效果
4、运行效果
总结
Node.js不仅可以操作MySQL数据库，还可以操作Redis…等等。由此Node.js也被某些人称为服务端的语言
如果想开发更复杂的基于Node.js的应用程序后台，需要进一步学习Node.js的Web开发相关框架 express，art-template、koa等
ES6
ECMAScript概述
ECMAScript的快速发展：
编程语言JavaScript是ECMAScript的实现和扩展 。ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。
ECMAScript定义了：
- [语言语法] – 语法解析规则、关键字、语句、声明、运算符等。
- [类型]– 布尔型、数字、字符串、对象等。
- [原型和继承]
- 内建对象和函数的[标准库] – [JSON]、[Math]、[数组方法]、[对象自省方法]等。
ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的[Web API]，这些都在独立的标准中进行定义。
ECMAScript涵盖了各种环境中JS的使用场景，无论是浏览器环境还是类似[node.js]的非浏览器环境。
ECMAScript标准的历史版本分别是1、2、3、5。
那么为什么没有第4版？其实，在过去确实曾计划发布提出巨量新特性的第4版，但最终却因想法太过激进而惨遭废除（这一版标准中曾经有一个极其复杂的支持泛型和类型推断的内建静态类型系统）。
ES4饱受争议，当标准委员会最终停止开发ES4时，其成员同意发布一个相对谦和的ES5版本，随后继续制定一些更具实质性的新特性。这一明确的协商协议最终命名为“Harmony”，因此，ES5规范中包含这样两句话：
- ECMAScript是一门充满活力的语言，并在不断进化中。
- 未来版本的规范中将持续进行重要的技术改进
2009年发布的改进版本ES5，引入了[Object.create()]、[Object.defineProperty()]、[getters]和[setters]、[严格模式]以及[JSON]对象。
ES6: 是JavaScript语言的下一代标准，2015年6月正式发布。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
小结：
- ECMAScript是前端js的语法规范；
- ECMAScript可以应用在各种js环境中。如：浏览器或者node.js环境。
- ECMAScript有很多版本：es1/2/3/5/6，很多新特性，可以在js环境中使用这些新特性。
ES6的语法：let和const
以前定义变量和常量都是用var，现在ES6使用let定义变量，用const定义常量
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 传统定义变量和常量的方式，统一使用var
var name1 = "广东学相伴";
var link1 = "https://www.kuangstudy.com";
var PI1 = Math.PI;
console.log(name1);
console.log(link1);
console.log(PI1);
// ES6定义的方式，变量用let，常量用const。
let name2 = "广东学相伴太棒了";
let link2 = "https://www.kuangstudy.com";
const PI2 = Math.PI;
console.log(name2);
console.log(link2);
console.log(PI2);
</script>
</body>
</html>
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// for(var i=0;i<5;i++){
// console.log(i);
// }
// console.log(i);// 上面的i用var定义，这里打印的结果为5，存在变量穿透的问题
// 用let解决了变量穿透的问题
// for(let i=0;i<5;i++){
// console.log(i);
// }
// console.log(i);// 这里会报错，i没有被定义。
// var PI = Math.PI;
// PI = 100;// 用var定义的常量可以被修改
// console.log(PI);
// 用const解决了常量修改的问题
const PI = Math.PI;
PI = 100;// 这一行会报错，因为用const定义的常量无法被修改！
console.log(PI);
</script>
</body>
</html>
总结：
- 在实际开发中，如果是在小程序、uniapp或者一些脚手架中，可以大胆的去使用let和const
- 但是如果是web开发，建议大家还是使用var定义变量和常量。因为在一些低版本的浏览器中还是不支持let和const
ES6的语法：模板字符串
模板字符串主要解决我们项目开发过程中，动态部分和静态部分字符串拼接的问题！
以前：我们都是使用单引号或者双引号来把字符串套起来
现在：用``【反引号】
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var person = {
name: "飞哥",
address: "广东学相伴",
link: "https://www.kuangstudy.com"
};
// 以前拼接字符串的方法
let str1 = "--传统--我是" + person.name + "，正在" + person.address + "讲课，讲课的内容会上传到官网：" + person.link + "平台上";
console.log(str1);
// 现在使用ES6的模板字符串的语法，可以支持换行
let str2 = `--ES6--我是${person.name}，
正在${person.address}讲课，
讲课的内容会上传到官网：${person.link}平台上`;
console.log(str2);
</script>
</body>
</html>
ES6的语法：函数的参数默认值
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 函数的参数默认为undefined，如果调用函数不传入参数，则会报错显示参数未定义
function sum(a=undefined,b=undefined){
return a + b;
};
var result = sum(100,200);
console.log(`result=${result}`);
// 指定函数的参数默认值
function sum(a,b=200){// 这里给参数b指定默认值为200
return a + b;
};
var result = sum(100);// 这里不给函数的参数b赋值，则函数的参数b会使用默认值200
console.log(`result=${result}`);
</script>
</body>
</html>
ES6的语法：箭头函数（重点）
箭头函数在未来的项目开发中，比如小程序，uniapp，一些常见的脚手架中大量的使用！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 传统的方式
var sum = function(a,b){// 前面这个var可以去掉，我个人觉得没有多大意义
return a+b;
};
// 箭头函数的方式一
var sum = (a,b)=>{
return a+b;
};
// 箭头函数的方式二，前提是函数体中仅有一个return语句才可以这样写
var sum = (a,b)=>a+b;
// 箭头函数的方式三，如果函数的参数只有1个，那么括号可以省去
var sum = a=>a*2;
</script>
</body>
</html>
ES6的语法：对象初始化的简写
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 定义对象的传统方式
let info1 = {
title: "广东学相伴",
link: "https://www.kuangstudy.com",
go: function(){
console.log("我骑着小蓝车来公司上班");
}
};
// ES6语法：对象初始化的简写
let title = "广东学相伴";
let link = "https://www.kuangstudy.com";
// JS中的对象中的属性是以 key:value 的形式存在的
// 1.如果属性的key和上面定义的变量的名字相同，则可以如下简写
// 2.如果属性的value是一个函数，则可以如下简写
let info2 = {
title,
link,
go(){
console.log("我骑着小蓝车来公司上班");
}
};
console.log(info2);
console.log(info2.title);
console.log(info2.link);
console.log(info2.go);
console.log(info2.go());
info2.go;
info2.go();
</script>
</body>
</html>
结果展示：（重点观察后面四个展示的结果）
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<p>账号：<input type="text" id="account"></p>
<p>密码：<input type="password" id="password"></p>
<p><input type="button" id="loginBtn" value="登录"></p>
</form>
<script>
// document.getElementById("loginBtn").onclick = function() {
// };
// 使用jQuery的方式
$("#loginBtn").on("click",function(){
let account = $("#account").val();
let password = $("#password").val();
// 对象初始化的简写
let params = {
account,
password
};
// 执行异步请求
$.ajax({
type: "post",
url: "xxxxxx",
data: params,
success: function(){
}
})
});
/*
{ // 这部分本身也是一个对象，所以也可以进行简写
type: "post",
url: "xxxxxx",
data: params,
success(){
}
}
*/
</script>
</body>
</html>
ES6的语法：对象解构
对象解构能够让我们快捷获取对象的属性和方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var title = "广东学相伴";
var link = "https://www.kuangstudy.com";
var info2 = {
title,
link,
go(){
console.log("我骑着小蓝车来公司上班");
}
};
// 获取对象的属性和方法的方式有两种：
// 1、通过.获取
console.log(info2.title);
console.log(info2.link);
info2.go();
// 2、通过[]获取
console.log(info2["title"]);
console.log(info2["link"]);
info2["go"]();
// ES6语法中的对象解构，其实就是快速获取对象的属性和方法
var {title,link,go} = info2;
// 它对应的代码就是
// var title = info2.title;
// var link = info2.link;
console.log(title);
console.log(link);
go();
</script>
</body>
</html>
ES6的语法：对象传播操作符
对象传播操作符：把一个对象的属性传播到另外一个对象中
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var person1 = {
name: "学相伴",
address: "广东",
link: "https://www.kuangstudy.com",
phone: 1234567,
go(){
console.log("开始上班了");
}
};
// 解构对象person1的name属性和address属性，并且把其余的属性传播给person2这个对象
var {name,address,...person2} = person1;
console.log(name);
console.log(address);
console.log(person2);
// person2对象打印的结果如下：
// Object
// go: ƒ go()
// link: "https://www.kuangstudy.com"
// phone: 1234567
// [[Prototype]]: Object
</script>
</body>
</html>
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 前端异步请求
// $.post("/user/search",function(res){
// 后端返回的数据格式：var res = {pages:10,users:[{},{}],pageNo:1,pageSize:100,total:100};
// var {users,...user} = res;// 除了res对象的属性users，res对象其余的属性全部传播给user这个对象
// });
</script>
</body>
</html>
ES6的语法：数组中的map方法
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 现在要把变量arr数组中的每个元素*2
let arr = [1,2,3,4,5,6,7];
// 传统的实现方式
let newarr1 = [];
for(let i=0;i<arr.length;i++){
newarr1.push(arr[i]*2);
};
console.log(newarr1);
// 现在用数组中的map方法实现
// 数组中的map方法自带循环，并且会把处理的值回填到对应的位置，然后放入到新的数组
let newarr2 = arr.map(ele=>ele*2);// 这里使用箭头函数
console.log(newarr2);
</script>
</body>
</html>
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 使用数组中的map方法处理数据
let users = [{age:10,name:"张三"},{age:13,name:"李四"},{age:18,name:"王五"}];
let newusers = users.map(ele=>{
ele.age = ele.age + 1;
ele.sex = "男";// 给每个ele添加sex字段，并且赋值为"男"
return ele;
});
console.log(newusers);
</script>
</body>
</html>
ES6的语法：数组中的reduce方法
reduce方法中接收一个函数（必须）和一个初始值（可选）
该函数接收两个参数：
- 第一个参数是上一次reduce方法处理的结果，如果是第一次执行reduce方法，则第一个参数为数组中的第一个元素的值
- 第二个参数是数组中要处理的下一个元素的值，如果是第一次执行reduce方法，则第二个参数为数组中的第二个元素的值
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [1,2,3,4,5,6,7,8,9,10];
var result = arr.reduce((a,b)=>a+b);
console.log("result =",result);// 打印结果为：result = 55
</script>
</body>
</html>
总结
ES6的语法都可以使用在Node.js代码中，因为Node.js本质上就是基于服务端的JavaScript
NPM
简介
NPM官网：https://www.npmjs.com/
**NPM全称Node Package Manager，Node包管理工具。Node.js安装后自带NPM。**NPM是全球最大的模块生态系统，里面所有的模块都是开源免费的，相当于Java的Maven 。
作用：
- 快速构建Node工程
- 快速安装第三方的模块
NPM快速构建Node工程
如果使用 npm init -y 命令，全部的内容自动选择默认值，一步到位构建Node工程
package.json的内容如下
{
"name": "npmpro",// 工程名
"version": "1.0.1",// 版本
"description": "我是一个node工程",// 描述信息
"main": "index.js",// 代表入口的一个js文件
"scripts": {// 运行脚本
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [// 关键字
"node"
],
"author": "学相伴",// 开发者
"license": "ISC"// 授权协议
}
这个package.json就类似于maven的pom.xml文件
NPM快速安装第三方的模块
-
快速安装第三方的模块
npm install xxx（模块名） # 或者 npm i xxx（模块名） -
安装的第三方模块放在什么地方？
安装的第三方模块放在当前项目的node_modules文件夹中
-
如何使用第三方模块？
// 导入第三方模块 const 模块名 = require("模块名"); // 导入redis模块 const redis = require("redis"); // 导入mysql模块 const mysql = require("mysql"); -
package.json文件有什么用呢？
package.json文件能够记录一个项目所依赖的模块。
我们新建一个项目，把另外一个旧项目的package.json文件复制进新建的项目中，然后在新项目的目录下执行命令
npm install，该新项目就会自动下载package.json文件中所记录的依赖模块，生成node_modules目录。这样就可以避免我们手动去重复下载模块，能够很方便地集成第三方的模块。 -
如果安装第三方模块很慢怎么办？
安装Node.js淘宝镜像加速器（cnpm）
npm install -g cnpm以后安装第三方模块把npm改成cnpm即可提高安装速度！
-
安装第三方模块还可以指定版本号下载，如果不指定版本号，默认下载最新版
npm install 模块名@版本号 npm install redis@3.0.2 -
如何卸载第三方模块呢？
npm uninstall 模块名
Babel
简介
ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。
安装Babel
安装命令
npm install -g babel-cli
# 或者
cnpm install -g babel-cli
查看版本信息
babel --version
Babel的使用
1、新建一个babelpro文件夹
2、快速构建Node工程
3、在项目的根目录下新建一个src文件夹
4、在src目录下新建一个example.js文件，并且写入如下内容
// ES6
let name = "xuexiangban";
const title = "广东";
let arr = [1,2,3,4,5,6,7,8,9,10];
let newarr = arr.map(ele=>ele*2);
console.log(name);
console.log(title);
console.log(newarr);
5、运行一下
6、 在项目的根目录下创建一个 .babelrc 文件（该文件用来设置转码规则和插件），并写入如下内容
{
"presets": ["es2015"],
"plugins": []
}
7、在项目中安装 babel-preset-es2015
npm install --save-dev babel-preset-es2015
# 或者
cnpm install --save-dev babel-preset-es2015
第一种方式
8、执行命令
babel src -d dist # 对本项目的src目录下的所有文件进行转码，并且指定输出目录dist
9、对比一下内容，即可发现确实把ES6语法降为了ES5的语法
第二种方式
8、在package.json文件中添加如下内容。对本项目的src目录下的所有文件进行转码，并且指定输出目录dist
{
...
"scripts": {
...
"dev": "babel src -d dist"
},
...
}
9、执行命令
npm run dev
10、对比一下内容，即可发现确实把ES6语法降为了ES5的语法
模块化
简介
模块化产生的背景
随着网站逐渐变成”互联网应用程序”，嵌入网页的Javascript代码越来越庞大，越来越复杂。
Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，它不支持”类”（class），包（package）等概念，也不支持”模块”（module）。
模块化规范
- CommonJS模块化规范
- ES6模块化规范
CommonJS模块化规范
1、编写一个 四则运算.js 文件
// 工具类
const sum = function(a,b){
return a+b;
};
const sub = function(a,b){
return a-b;
};
const mul = function(a,b){
return a*b;
};
const di = function(a,b){
return a/b;
};
// 导出给别人使用
// module.exports = {
// sum: sum,
// sub: sub,
// mul: mul,
// di: di
// };
// 使用ES6的语法：对象初始化的简写
module.exports = {
sum,
sub,
mul,
di
};
2、编写一个 导入测试.js 文件
// 导入
const m = require("./四则运算.js");
console.log(m.sum(6,3));
console.log(m.sub(6,3));
console.log(m.mul(6,3));
console.log(m.di(6,3));
3、运行测试
CommonJS使用 exports 和 require 来导出、导入模块。
ES6模块化规范
ES6使用 export 和 import 来导出、导入模块。
浏览器是默认不支持ES6语法的，所以我们需要使用Babel打包降级为ES5语法
1、新建userApi.js文件
// 导出模块
export function getList(){
// 在真实业务中，用异步获取数据
console.log("获取数据列表");
};
export function save(){
console.log("保存数据");
};
// =================真实项目中常见的写法如下，这样就不用写多个export了=================
// export default{
// getList(){
// // 在真实业务中，用异步获取数据
// console.log("获取数据列表");
// },
// save(){
// console.log("保存数据");
// }
// }
2、新建userTest.js文件
// 导入模块
import {getList,save} from "./userApi.js";
getList();
save();
// 默认是不支持ES6语法的
// =================真实项目中常见的写法如下，导入为user对象，通过 对象.方法 即可！=================
// import user from "./userApi.js";
//
// user.getList();
// user.save();
//
// 默认是不支持ES6语法的
3、构建一个Node工程
npm init -y
4、新建一个 .babelrc 文件
{
"presets": ["es2015"],
"plugins": []
}
5、在本工程项目中安装 babel-preset-es2015
npm install --save-dev babel-preset-es2015
# 或者
cnpm install --save-dev babel-preset-es2015
6、在package.json文件中添加如下内容。对本项目的src目录下的所有文件进行转码，并且指定输出目录dist
{
...
"scripts": {
...
"build": "babel src -d dist"
},
...
}
7、执行命令
npm run build
8、执行dist目录下的降级后的js文件
node .\dist\userTest.js
步骤流程大概如下：
=userApi.js文件在真实项目中常见的写法如下=
// 导出模块
export default{
getList(){
// 在真实业务中，用异步获取数据
console.log("获取数据列表");
},
save(){
console.log("保存数据");
}
}
=userTest.js文件在真实项目中常见的写法如下=
// 导入模块
import user from "./userApi.js";
user.getList();
user.save();
// 默认是不支持ES6语法的
Webpack
什么是Webpack？
Webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态文件。
从图中我们可以看出，Webpack可以将多种静态资源 js、css、less、png 转换成一个静态文件，减少了页面的请求，也能保证静态资源的安全性。
Webpack安装
安装
npm install webpack -g
npm install webpack-cli -g
测试是否安装成功
webpack -v
webpack-cli -v
Webpack合并JS
1、构建一个Node工程项目
npm init -y
2、在项目的根目录下创建一个src目录
3、在src目录下新建两个需要合并的js文件。 util.js 和 common.js
util.js
exports.add = function(a,b){
return a+b;
};
common.js
exports.info = function(str){
console.log(str);// 控制台输出打印
document.write(str);// 浏览器输出打印
};
4、在src目录下新建 main.js 文件
const util = require("./util.js");
const common = require("./common.js");
common.info("Hello world,"+util.add(2,3));
5、在项目的根目录下新建 webpack.config.js 文件
// 导入path模块，这个path模块是Node.js自带的模块，所以不需要下载，可以直接导入
const path = require("path");
// 定义JS打包的规则
module.exports = {
entry: "./src/main.js",//入口函数，从这里开始进行编译打包
output: {
path: path.resolve(__dirname,"./dist"),// 指定输出的目录
filename: "bundle.js"// 合并的js文件存储在 dist/bundle.js 文件中
}
};
6、执行命令后
webpack
7、在dist目录下新建一个index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 导入bundle.js文件 -->
<script src="bundle.js">
</script>
</body>
</html>
8、查看效果如下，说明Webpack合并JS成功
项目的目录结构如下：
Webpack合并CSS
Webpack本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
loader 可以理解为是模块和资源的转换器
首先我们需要安装相关的loader插件
- css-loader：是将css装载到javascript
- style-loader：是让javascript认识css
1、在《Webpack合并JS》这一章节项目的基础上继续完成下面的操作
2、安装相关的loader插件
npm install --save-dev style-loader css-loader
安装成功后，package.json中有相应的依赖内容
3、修改webpack.config.js文件的内容
// 导入path模块，这个path模块是Node.js自带的模块，所以不需要下载，可以直接导入
const path = require("path");
// 定义JS打包的规则
module.exports = {
entry: "./src/main.js",//入口函数，从这里开始进行编译打包
output: {
path: path.resolve(__dirname,"./dist"),// 指定输出的目录
filename: "bundle.js"// 合并的js文件存储在 dist/bundle.js 文件中
},
module: {
rules: [
{
test: /\.css$/,// 把项目中所有的 .css 结尾的文件进行打包
use: ["style-loader","css-loader"]
}
]
}
};
4、在src目录下新建文件style.css
body{
background: pink;
}
5、修改main.js文件的内容
const util = require("./util.js");
const common = require("./common.js");
// 导入css
require("./style.css");
common.info("Hello world,"+util.add(2,3));
6、执行命令
webpack
7、浏览器打开index.html查看效果
vue-element-admin
vue-element-admin是一个后台前端解决方案，它基于 vue 和 element-ui 实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。
官网地址：https://panjiachen.github.io/vue-element-admin-site/zh/
探究：package.json
- 在发布项目或者拷贝项目的时候，node_modules文件夹其实是可以排除在外的，不运行项目，根本用不到node_modules文件夹
- 当我们需要运行项目时，因为package.json文件中已经记录了项目工程中所需要依赖的模块信息。我们可以直接使用命令
npm install去重新安装第三方的模块，然后生成node-modules文件夹。所以Node工程项目下载后，通常第一个要执行的命令都是npm install。
769
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
