电商项目——前端基础——第八章——上篇_第8章微商城前台开发-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44891295/article/details/108944186

本文是电商项目系列的前端基础部分，介绍了前端技术栈，重点讲解了WebStorm的使用和ES6的新特性，包括let、const、结构、字符串、箭头函数、对象优化、map和reduce、promise异步编排以及模块化概念。同时，提到了Node.js、Vue和Webpack等前端开发工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1：前后端技术栈类比
2：WebStorm的使用
3：ES6
4：Node.js
5：Vue
6：Babel
7：Webpack

前面的学习给大家讲解了微服务最基本的Nacos，OpenFeign，GateWay，在我们进行正式开发前，我们对前端来进行简单的概述

1：前后端技术栈类比

在这里插入图片描述

2：WebStorm的使用

作为前端开发，我为何疯狂推荐WebStorm？

3：ES6

ECMASeript6.0 (以下简称ES6. ECMASeript 是一一种由Ecma国际前身为欧洲计算机制造商协会，英文名称是European Computer Marnufacturers Asociation)通过ECMA-262标准化的脚本程序设计语言)是JavaSeript语言的下一代标准，已经在2015年6月正式发布了，并且从ECMAScrlpt6开始，开始采用年号来做版本。即ECMAScript 2015.就是ECMAScript6.它的目标，是使得JavaSrpt 语言可以用来编写复杂的大型应用程序，成为企业级开发语言中每年一个新版本。
所以，ECMAScript是浏览器脚本语言的规范，而各种我们熟知的js语言，如JavaScript则是规范的具体实现

3.1 ES6新特性-let&const

我们以后会经常使用let来声明一个变量，还有一个const常量（声明之后不允许改变，一旦声明必须初始化，否则报错）

<script>
	 const a=3
	  a=4
//Uncaught TypeError: Assignment to constant variable. at let&const.html:36

</script>

<script>
//var声明的变量往往会越域
			//let声明的变量有严格的局部作用域
			{
     
				var a=1
				let b=2
			}
			console.log(a)
			console.log(b)
//Uncaught ReferenceError: b is not defined at let&const.html:19
</script>

<script>
			//var可以声明多次,let只可以声明一次
			var a=1
			var a=3
			let b=2
			let b=4
			console.log(a)
		    console.log(b)
//Uncaught SyntaxError: Identifier 'b' has already been declared		    
</script>

<script>
		 //var会变量提升
		 //let不会变量提升
		 console.log(a)
		 var a=1
		 console.log(b)
		 let b=2
//let&const.html:33 Uncaught ReferenceError: b is not defined at let&const.html:33		 
</script>

3.2 ES6新特性-结构&字符串

<script>
//数组解构
			let arr=[1,2,3];
			
			let d=arr[0];
			let b=arr[1];
			let c=arr[2];
			let [d,b,c]=arr;
			console.log(d,b,c);
</script>

<script>
//数组解构
			let arr=[1,2</