Vue前篇--大前端进阶知识点回顾

2-1快速安装依赖第三方模块？

-npm install xxxx或者 npm i xxxx模块名，比如npm install mysql redis等等

2-2安装的模块放在什么地方？

-安装的模块放在项目当中的node_modules文件夹中

2-3模块安装好如何使用？

-const redis =require(“redis”)

2-4模块下载很慢怎么解决？

-npm install -g cnpm --registry=https://registry.npm.taobao.org

2-5如何运行

-node xxxx.js 运行时候是可以不加js的 直接node xxxx即可,终止命令：CTRL+C

2-6下载的模块与package.json有什么联系呢？

“dependencies”: {

“jquery”: “^3.6.0”,

“mysql”: “^2.18.1”,

“redis”: “^3.1.2”,

“vue”: “^2.6.12”

}

通过npm install 下载的依赖会被记录在package.json文件当中，

类似于maven中的pom.xml文件 记录作用：复用

1.package.json文件记录的依赖模块

2.通过npm install可以直接把package.json中的依赖全部下载下来

这样就可以避免重复下载依赖，很方便的去集成第三方模块

3.为什么不直接拷贝node_moudles呢，当然可以，但是模块下载的依赖文件过多混乱文件很多，一般几万到几十万个文件

2-7如果一次下载多个第三方依赖

npm install vue redis mysql

cnpm install vue redis mysql

不添加版本号的情况下默认是下载最新的

2-8如何下载指定版本号

npm install redis@版本号 去官网查看版本号：https://www.npmjs.com/

3.如何卸载我们安装的第三方模块（从项目中剔除）

npm uninstall jquery vue

3.ES6（JavaScript的新语法规则）

---

ES6概述

3.1、let和const的引入

1.let解决了var定义变量的穿透问题

2. const解决了var定义常量可以被修改的问题

3. 实际开发中，如果是小程序/uniapp/一些脚手架，可以大胆的使用let和const

4.如果是web开发还是尽量使用var，因为低版本浏览器还暂时不支持let和const

3.2、默认参数

3.3、模板字符串

3.4、箭头函数【重点】

3.5、对象简写

举个例子：

3.6、对象解构

//对象是以key-value的形式存在的，获取对象属和方法的方式有两种

//方式一：通过.

//方式二: 通过[]

var name = “宋淇祥”

var purpose = “好好学Vue和spring全家桶”

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 #安装后查看

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

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

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

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

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

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可领取

“https://i-blog.csdnimg.cn/blog_migrate/c0005ee1c6e5b02a05ff1c5ee6c2cb77.jpeg” />

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可领取

[外链图片转存中…(img-bxnDhx3a-1712976626633)]