Vue前篇--大前端进阶知识点回顾，2024年最新非科班生金九银十求职经历

let person2 ={

name, //name = name

purpose, //purpose = purpose

go(){

console.log(“我坐在床上学习ES6新语法”);

}

};

//方式一,通过.的方式

console.log(person2.name);

console.log(person2.purpose);

person2.go();

//方式二,通过[]的方式

console.log(person2[“name”]);

console.log(person2[“purpose”]);

person2"go";

//ES6对象解构，其实就是快速获取属性和和方法的另一种形式

var {name,purpose,go} =person2;

//等价于(还原代码)

//var name =person2.name;

//var purpose=person2.purpose;

console.log(name,purpose)

go();

//为什么需要提供两种方式呢？一个是.一个是[]

3.7、传播操作符…

3.8、数组map、reduce【了解】

数组的map用法

数组的 reduce

4.Babel（转码工具）

---

4.1简介

4.2安装babel

npm install -g babel-cli #全局安装babel

#查看是否安装成功

babel --version

4.3使用babel

1. 创建一个配置文件.babelrc 存放在项目的根目录下，该文件用来设置转码规则和插件，基本格式如下。

2. 配置文件中编写转码规则

{

“presets”: [“es2015”],

“plugins”: []

}

3. 安装转码器 npm install --save-dev babel-preset-es2015

4. 转码即可

单个文件： babel src/example.js -o dist1/compiled.js将src目录下js文件转码生成到dist1目录下，生成文件compiled.js

整个目录：babel src -d dist2 将src目录中的所有文件转码生成在dist2目录下

5.Webpack（打包工具）

---

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

人话：就是把所有的js文件css等静态资源文件，通过一个入口合并生成为一个文件！

5.1安装Webpack

npm install -g webpack webpack-cli #全局安装

webpack -v #安装后查看

5.2 使用方法

1. 初始化一个node项目 ，然后编写几个js和css文件 例如：common.js/util.js/main.js

在main.js文件当中引入其余的js文件

2. 默认情况下webpack只能处理JavaScript模块，如果需要将css模块也打包在一块需要安装一个资源转换器，安装命令：npm install --save-dev style-loader css-loader

3. 然后在根目录编写一个webpack.config.js的打包配置文件。在配置文件中编写必要的配置：1.设置入口文件：把main.js设置为入口文件其中main.js中涉及到的所有js文件都会被打包 2.设置打包后生成文件目录：生成一个bundle.js文件就是包含main.js中的所有js文件

4. 完工! 直接引用生成的bundle.js文件即可

6.模块化开发

---

简介

随着网站逐渐变成”互联网应用程序”，嵌入网页的Javascript代码越来越庞大，越来越复杂。

Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，它不支持”类”（class），包（package）等概念，也不支持”模块”（module）。

6.1 CommonJS模块化开发

模块导出

模块导入

CommonJS使用 exports 和require 来导出、导入模块。

6.2 ES6模块化开发

• 方式一 ：每个单独的方法使用模块化导出export function，然后引入每个方法

注意：这时的程序无法运行的，因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行，执行生成的ES5文件。

• 方式二：模块化导出export default ，导入则是类似导入一个对象的形式
  
  以上就是学习Vue要具备的前端基础知识，基本都是最简单的使用的方法和概念，具体的还是得看官方文档，这个只供学前Vue前去了解一下这些个知识点！

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

[外链图片转存中…(img-tDyDRkJF-1712776839898)]

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-D2ixSvg7-1712776839898)]