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 打包,可以让我们的代码不是那么繁琐,可以实现复用!