大前端得学习笔记

开发环境

vs code +各种插件（chinese, node.js module intellisense,ESLint, Live Server, vetur,vue helper）

python（Node.js需要一些类库）

node.js(在服务器端运行JS代码！基于 Coogle 的 V8 引擎，可以脱离浏览器执行 js 代码)

NodeJS基本使用

1、创建文件夹 nodejs
2、创建我们的 01-控制台程序.js
3、打开终端执行js程序node *.js

ES6语法详解

浏览器一般都是只支持es5语法， ES6是 JavaScript的下一代标准，2015年发布。在IDEA中默认配置ECMAScript5版本，我们要编写es6的语法，需要配置。

声明变量var 与let区别

	作用域
var	var 声明的变量没有作用域，作用域也可以提升，可以重复声明，
let	let 声明的变量是有作用域，作用域不能提升，一定要先初始化。不可以重复声明

如何声明常量（es6）

const PI=‘3.1415926’

一但声明就必须初始化，而且不能修改变量值。

结构赋值

结构的变量名必须和对象属性同名

let user = { name:‘name a’,age:‘18’}

let user = { name: 'zhangsan', age: 18 }
let {name, age} = user

模板字符串声明（直接在字符串中调用变量）

let string = `name: ${user.name} age: ${user.age}`

声明对象简写，定义方法简写,函数的默认参数声明，箭头函数（参数 => 函数体）

不做详述

在默认参数中可能会遇到undefined与null的区别。

扫描二维码关注公众号，回复： 11369998 查看本文章

对象拓展运算符

对象得引用赋值，对象得深度拷贝。

let user = {name:'user, originName', age:'3'}
let refer = user
let deepCopy = {...user}
refer.name = 'user name changed'

console.log(user)
console.log(refer)
console.log(deepCopy)

NPM的使用

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

生成自己的package.json

npm init

npm init -y

修改 npm 镜像

npm config lis //check all the config parameters

经过以下配置，就可以让所有的依赖下载通过淘宝的镜像，这样会比较快！

 npm config set registry https://registry.npm.taobao.org/

管理依赖控制

1、npm install vue  安装指定依赖，默认是最新版本 
2、npm install [email protected] 指定版本安装！
3、package.json 中管理了所有依赖版本控制，就如同 pom.xml 
4、指定只在开发的时候使用 npm install --save-dev (等价-D) eslint

默认是latest，也可以指定自己的version. package.json与package-lock.json是成对出现的。

  "devDependencies": {
    "eslint": "^6.8.0"
  }

全局依赖的安装

C:\Users\【user name】\AppData\Roaming\npm\node_modules

其他常见命令

npm update
npm update jquery
npm unintall jquery

Babel

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

安装 Babel

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

如何使用Babel

1 安装babel依赖

npm install -D babel-preset-es2015

2 另外

package.json 中设置
{  "presets": [    "es2015"  ],  "plugins": [] }

3 在 src 在编写js源代码编写.babelrc 配置文件

输出测试

另外可以在package.json中自定义脚本

{
  "name": "babel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel .\\src\\example.js --out-file .\\dist\\dist.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1"
  }
}

npm run

这里可以编写多个脚本，以后启动就不需要每一次都输入命令了。

npm run test 
npm run dev
npm run start

本质就是一段脚本，以后看到类似的启动方式，就可以去找它的 scripts 脚本。

模块化

js 是否也可以模块化开发呢，有几种方式class 、 package 、module.产生了两种模块化规范：CommonJS 规范ES6模块化规范.

ES6模块化规范导出：

export function getList() {
  console.log('获取用户列表')
}

export function save() {
  console.log('保存用户信息')
}

ES6模块化规范导入:

import { getList, save } from './userApi.js'
getList()
save()

还有其他整体模块化导出导入的语法。

export default {
  getList() {
    console.log("获取数据列表")
  },
  save() {
    console.log("保存用户")
  }
}
-------------------------
import user from './userApi2.js'

user.getList()
user.save()

注意NodeJs不支持module的导入导出，目前还需要babel的降级，才能用node来执行降级以后的js文件。

WebPack

Webpack 是一个前端的资源、打包工具！ js less css png ====> .js
webpack 安装
1、安装

npm install -g webpack webpack-cli
webpack -v

2、初始化项目

修改你的package.json.

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode=development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.4.2",
    "style-loader": "^1.1.3"
  }
}

然后执行：

npm run dev

就可以打包。