JavaWeb——前端工程化

一、前端工程化

1.什么是前端工程化:

前端工程化是使用软件工程的方法来单独解决前端的开发流程中模块化、组件化、规范化、自动化 的问题，以提高效率和降低成本。

2.前端工程化实现技术栈:

ES6+Nodejs+npm+Vite+VUE3+Router+Pinia+Axios+Element-plus

ECMAScript6:VUE3中大量使用ES6语法;

Nodejs:前端项目运行环境

npm:依赖下载工具

Vite:前端项目构建工具

VUE3:优秀的渐进式前端框架;

Router:通过路由实现页面切换功能;

Pinia:通过状态管理实现组件数据传递;

Axios:ajax异步请求封装技术实现前后端数据交互;

Element-plus:可以提供丰富的快速构建网页的组件仓库;

二、ECMA6Script

1.ES6介绍:

ECMAScript6简称ES6，是JavaScript语言的一次重大更新，是原来的ECMAScript标准的第六个版本。ES6带来了大量的新特性，包括箭头函数、模板字符串、let和const关键字、解构、默认参数值、模块系统等等，大大提升了JavaScript的开发体验。ES6是学习VUE3的门槛之一;

(1).更加简洁:ES6引入了一些新的语法，如箭头函数、类和模板字符串等，使代码更加简洁易懂

(2).更强大的功能:ES6引入了一些新的AP1、解构语法和迭代器等功能，从而使得JavaScript更加强大;

(3).更好的适用性:ES6引入的模块化功能为JavaScript代码的组织和管理提供了更好的方式，不仅提高了程序的可维护性，还让JavaScript更方便地应用于大型的应用程序;

2.es6的变量和模板字符串

ES6 新增了let 和const，用来声明变量，使用的细节上也存在诸多差异

let和var的差别:

(1).let不能重复声明;

(2).let有块级作用域，非函数的花括号遇见let会有块级作用域，也就是只能在花括号里面访问

(3).let不会预解析进行变量提升

(4).let定义的全局变量不会作为window的属性;

(5).let在es6中推荐优先使用;

// 1.let只有在当前代码块有效代码块:代码块、函数、全局
{
    let a = 1
    var b = 2
}
console.log(a);// a is not defined 花括号外面无法访问
console.log(b);// 可以正常输出
// 2.不能重复声明
let name = '天真'
let name = '无邪'
// 3.不存在变量提升(先声明,再使用)
console.log(test) //可以 但是值为undefined
var test ='test'
console.log(test1)// 不可以 let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错
let test1 = 'test1'
// 4.不会成为window的属性
var a = 100
console.log(window.a) // 100
let b = 200
console.log(window.b) // undefined
//5.循环中推荐使用
for (let i=0;i<10;i++){
}
console.log(i);

const和var的差异:

(1).新增const和let类似，只是const定义的变量不能修改;

(2).