Vue大神路(一):大前端进阶_vue 关闭es5语法兼容-优快云博客

本文链接：https://blog.youkuaiyun.com/Hi_alan/article/details/106505114

本文详细介绍如何使用VSCode和Node.js进行前端开发，包括安装配置、ES6语法使用、npm包管理及Webpack资源打包等内容。

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

VsCode使用

下载软件 https://code.visualstudio.com/
无脑安装即可！一直下一步！英文界面！
安装中文插件
重启，就是中文的了！
下载一下插件

除了这款软件，还可以使用webstorm下载地址

NodeJS

安装nodejs，无脑下一步即可！自动帮你把环境变量配置好
在这里插入图片描述
什么是Nodejs?

以前我们编写js代码需要从浏览器执行，放在html中！而Nodejs可以在服务段运行JS代码，它是基于Google的V8引擎，可以脱离浏览器执行js代码，性能较好！

如何确认安装成功？
打开命令行工具（win+r),执行node -v进行查看
在这里插入图片描述
npm是包管理工具，安装nodejs时会一并安装的。
至此，前端所需的环境已经准备好了，下面我们就开始基本使用！

基本使用

打开VsCode
在这里插入图片描述 1、创建一个文件夹用于存放代码
2、创建我们的01-控制台.js
javascript console.log("hello,node")
3、打开终端
4、运行js程序
node 程序名.js

在这里插入图片描述

作为一个后端的开发人员，习惯用IDEA的自动保存功能，在VsCode也有自动保存功能，这样我们就不用每次自己去保存了，设置方法文件-自动保存（勾选即可）。

VsCode的默认运行的终端是PowerShell所以有时候运行会出问题，这时候我们可以更改为cmd
在这里插入图片描述
选择默认shell,然后会弹出以下界面

第一个就是cmd,第二个是powershell,第三个是git

node的服务器端开发

创建文件02-server-app.js

const http = require('http')
http.createServer(function (request, response) {
response.writeHead(200, { 'Content-Type': 'text/plain' })
response.end('hello,node server')
}).listen(8080)
console.log("Server running at http://localhost:8080")

运行后访问截图
在这里插入图片描述

ES6语法详解

大部分现在的前端程序员，都会使用es6进行开发！浏览器一般都是只支持es5语法！什么是ES6呢？一个规范而已，JavaScript的下一代标准！ECMAScript,在IDEA中默认配置ECMAScript5版本，我们要编写es6语法，需要配置！

let 声明变量

// // var 声明的变量没有作用域
// // let 声明的变量是有作用域!
// {
// var a = 0
// let b = 1
// }
// console.log(a) // 0
// console.log(b) // b is not defined
// var 可以声明多次
// let 可以声明一次
// var m = 1
// var m = 2
// let n = 3常量
// let n = 4 // Identifier 'n' has already been declared
// console.log(m)
// console.log(n)
// var 会提升变量的作用域
// let 不存在变量提升！
console.log(x) // undefined
var x = 'apple'
console.log(y) // Cannot access 'y' before initialization
let y = 'banana'

常量

// 声明了常量之后就不允许在改变了！
// const PI = '3.141592653589793238462643'
// PI = 0 // Assignment to constant variable.
// 一但声明就必须初始化，否则救护报错
const MY_APP // Missing initializer in const declaration

解构赋值！

// 传统的
// let a = 1, b = 2, c = 3
// console.log(a, b, c)
// // es6
// let [x, y, z] = [1, 2, 3]
// console.log(x, y, z)
// 对象定义
let user = { name: 'zhangsan', age: 18 }
// 传统的
let name1 = user.name
let age1 = user.age
console.log(name1, age1)
// es6,取出对象中的所有值
let { name, age } = user // 结构的变量名必须和对象属性同名
console.log(name, age)

模板字符串！

let name = 'hello'
let age = 3
// 传统的，大家的习惯！ ${}
let info = 'name:' + name + 'age:' + age; // 拼接字符串
// 字符串引号需要改为 ``
let infoes6 = `name: ${name} age:${age}` // 模板字符串，真正的前端开发
console.log(infoes6)

对象声明简写

const age = 3
const name = 'coding'
// 传统的
const person1 = { age: age, name: name }
console.log(person1)
// es6
const person2 = { name, age }
console.log(person2)

定义方法简写

const person1 = {
// 方法
sayHi: function () {
console.log("hi")
}
} p
erson1.sayHi();
// ES6
const person2 = {
sayHi() {
console.log('Hi 2')
}
} 
person2.sayHi();

对象拓展运算符

let person = { name: 'coding', age: 3 }
let someoneOld = person // 引用赋值
// 对象拷贝
let someone = { ...person }
someoneOld.name = 'kuangshen'
someone.name = 'kuangshen new'
console.log(person)
console.log(someoneOld)
console.log(someone)

默认的参数

function showInfo(name, age = 3) {
console.log(name + ',' + age)
} /
/ 测试
showInfo('coding', 18)
showInfo('coding')
showInfo('coding', undefined)
showInfo('coding', null)

箭头函数参数 => 函数体

let arr = ["10", "5", "40", "25", "1000"]
let arr1 = arr.sort()
let arr2 = arr.sort((a, b) => a - b)
console.log(arr1)
// 需要使用排序的函数
// let arr2 = arr.sort((a, b) => {
// return a - b
// })
console.log(arr2)
// ()=>{}
// var f1 = function (a, b) {
// let result = a + b
// return result
// }
// var f2 = (a, b) => {
// let result = a + b
// return result
// }
// var f3 = (a, b) => a * b
// console.log(f3(2, 3));

NPM包管理

我们安装nodejs的时候，就有了 npm 的环境！

C:\Users\Administrator>npm -v
6.13.4

什么是npm
NPM的全称是Node Package Manager，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。就好比maven，所有的东西只要导入依赖即可，npm也是如此，npm install,好比Linux的yum安装！

测试

建立一个npm包
测试初始化项目，理解如何管理前端依赖

npm init
npm init -y #直接生成默认的值！

修改npm镜像

npm config list # 查看npm的配置信息
# 经过以下配置，就可以让所有的依赖下载通过 淘宝的镜像，这样会比较快！
npm config set registry https://registry.npm.taobao.org/

npm install xx
下载依赖包！

npm install vue 安装指定依赖，默认是最新版本
npm install vue@x.x.x 指定版本安装！
package.json 中管理了所有依赖版本控制，就如同pom.xml
指定只在开发的时候使用npm install --save-dev(等价-D) eslint
全局安装环境安装！-g npm install -g webpack
其他命令

npm update jquery  #更新包
npm uninstall jquery  #卸载包

Babel

很多se6高级语法，浏览器是不支持的， Nodejs也不一定能运行！Babel 是一个广泛的转码器！可以将 ES6代码转换为 ES5的代码！语法会自动转换！
1、安装Babel

npm install -g babel-cli # 安装babel-cli
babel --version # 版本测试
6.26.0 (babel-core 6.26.3)

2、使用

在src目录下编写js源码
编写.babelrc配置文件

  {
 	"presets": [
 	"es2015"
 	],
 	"plugins": []
 }

安装babel依赖

npm install -D babel-preset-es2015

输出测试

  babel .\src\example.js --out-file .\dist1\dist.js

在这里插入图片描述
自定义脚本
package.json中设置

"scripts": {
"build": "babel .\\src\\example.js --out-file .\\dist\\dist.js"
},

npm run 脚本命令！
这了可以编写多个脚本！以后启动就不需要每一次都输入命令了！
npm run test
npm run dev
npm run start
本质就是一段脚本，看到类似的启动方式，都可以去找它的scripts脚本！

模块化

import
网站一步一步变成互联网化，js代码越来越大，十分复杂，为了能达到代码复用，js出现了模块化开发。
在这个过程中产生了两种模块化规范：

CommonJS规范
ES6模块化规范

Common JS

const sum = function (a, b) {
return a + b
} c
onst sub = function (a, b) {
return a - b
} c
onst mul = function (a, b) {
return a * b
} c
onst di = function (a, b) {
return a / b
}
// 导出这些方法供他人使用！
// module.exports = {
// sum: sum,
// sub: sub,
// mul: mul,
// di: di,
// }
// 如果名称相同，可以简写
module.exports = {
sum,
sub,
mul,
di
}

测试导入

const m = require('./四则运算.js')
console.log(m)
// 测试方法，正常输出
const r1 = m.sum(1, 2)
const r2 = m.sub(1, 2)
console.log(r1)
console.log(r2)

es6 模块化规范

export function getList() {
console.log('获取用户列表')
} e
xport function save() {
console.log('保存用户信息')
} // import node不支持
import { getList, save } from './userApi.js'
getList()
save()

es6 第二种写法

export default {
getList() {
console.log("获取数据列表")
},
save() {
console.log("保存用户")
}
}

记住一个点，node 不支持 es6 模块化语法，需要babel转义！

Webpack

Webpack 是一个前端的资源、打包工具！所有的前端资源都可以打包成一个文件里。
js less css png ====> .js

webpack 安装
1、安装

npm install -g webpack webpack-cli
webpack -v

2、初始化项目！

webpack   --mode=development

webpack 打包，可以让我们的代码不是那么繁琐，可以实现复用！