前端——过渡知识

一、VsCode

Ement 在首选项打开，自动补全代码

二、NodeJS

NodeJS是一个开源的、跨平台的 JavaScript 运行时环境。
运行于服务端的JavaScript。底层架构javaScript

Node 实现请求响应

const http = require('http')  //类似于import java
http.createServer(function(request,response){
	//发送HTTP头部
	//HTTP状态值：200:OK
	//内容类型：text/plain
	response.writeHead(200,{'content-typ': 'text/html'}) // html页面  plain 文本
	//发送响应数据 “Hello server”
	response.end("<strong>hello server!!!</strong>")
}).listen(8888)

//终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/')

//测试
1、运行  node 文件名.js
2、访问 ： http://localhost:8888/

三、Es6

ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言 。
另外，一些情况下ES6也泛指ES2015及之后的新增特性，虽然之后的版本应当称为ES7、ES8等。

在Es6之前，jquery地位更高。

ES6的语法

let 和const命令

//let和const解决var的变量穿透的问题，和常量修改的问题
变量穿透：在循环内的变量在循环外可以调用。

建议：
1、如果是小程序，uniapp或者一些脚手架中的，可以大胆的使用let和const
2、但是如果你是web开发。建议大家还是使用var，因为在一些低版本的浏览器还是不支持let和const

模块字符串

以前：我们使用''或者 “ ”  
现在我们使用` `


// 现在
let address = `我是${person.name},正在${person.address}讲课，讲课的内容会上传到官网：${person.link}平台上`

函数默认参数与箭头函数

在方法的参数后面加上一个默认值即可。

默认参数：
function sum(a=100,b=100){


}

箭头函数= 朗姆达表达式
1、去掉function，添加=>

2、代码只有return 可以直接省去

3、参数只有一个，括号可以省去。

对象初始化简写

它是指：如果一个对象中的key和value的名字一样的情况可以定义成一个。

var name =''
var year = ''
var dog = {
	name,
	year,
	go(){
}
}

var dog ={name,year}

对象解构

//取值
dog.name或 dog["name"]

//现在
var {title,link} = info2;

传播操作符【…】

var {title,link,...person} = info2;
剩下的放入person

数组map和reduce方法使用(了解)

map 每次取一个数
var newarr2 = arr.map(参数-> 操作)  

reduce 取两个数
var result = arr.reduce((a,b) ->操作)

四、Npm包

NPM全称Node Package Manager ，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的，也是Node.js的包管理工具，相当于后端的Maven。
官网

一、实例化
npm init实例化 或者 npm init -y

会得到一个package.json
类似于：pom.xml文件作用管理依赖。


二、安装
npm install xxxx 或者npm i xxx模块名
会多一个目录：node_modules


三、安装的慢的话
npm install -g cnpm --registry=https://registry.npm.taobao.org

四、快速搭建环境
复制package.json文件到新项目，运行 npm install

五、卸载
npm uninstall vue 

五、Babel的安装

ES6的某些高级语法在浏览器环境或者Node.js无法执行。
Babel是一个广泛使用的转码器，可以将ES6->ES5.

# 安装
npm install --g babel-cli

# 初始化项目
1、创建babel文件夹
2、初始化
npm init -y
3、创建文件src/example.js
代码
//转码前
//定义数据
let input = [1,2,3]
/将数组的每个元素 +1
input = input.map(item=>item+1)
console.log(input)

4、Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件的
{
	"presets":[],
	"plugins":[]
}
例如：
{
	"presets":["es2015"],
	"plugins":[]
}


5、安装转码器，在项目中安装
npm install --save-dev babel-preset-es2015


6、转码(本质：映射表  var->let)
# npm install --save-dev csv-loader xml-loader
# 转码结果写入一个文件
mkdir dist1
# --out-file 或 -o 参数指定输出文件
babel src/example.js --out-file dist1/compiled.js
# 或者
babel src/example.js -o dist1/compiled.js

# 整个目录转码
mkdir dist2
# --out-dir 或 -d参数指定输出目录
babel src --out-dir dist2
# 或者
babel src -d dist2


//1、实例化 npm init -y
//2、创建src,目录下创建.js
//3、运行：node src/example
//4、配置文件是.babelrc
{
	"presets":["es2015"],
	"plugins":[]
}

//5、npm install --save-dev babel-preset-es2015

//6、babel src -d dist
得到一个文件 babelpro/example.js 转换的结果

自定义脚本

# 1、改写package.json
{
	// ...
	"scripts":{
		// ...
		"build":"babel src//example.js -o dist\\compiled.js"
	},
}
# 2、转码的时候，执行下面的命令
mkdir dist
npm run build

六、模块化

1、简介

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

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

模块化规范
CommonJS模块化规范
ES6模块化规范

2、CommonJS规范

每个文件就是一个模块，有自己的作用域。
在一个文件里面定义的变量、函数、类都是私有的，对其他文件不可见。

1、创建"module/名称"文件夹


2、创建 四则运算.js

const sub = function(a,b){
	return a-b;
}

module.exports ={
	sub
}


3、重新创建一个js，导入
const m =require('四则运算.js');
m.sub()

3、ES6模块化规范

1、创建文件夹
2、文件夹下面创建src/名称.js
写法一：
export function getList(){
	console.log('获取数据列表')
}

export function save(){
	console.log('保存数据')
}
写法二：
export default{
	getList(){
	console.log('获取数据列表');}
	save(){
	console.log('保存数据')}
}


4、创建另外一个.js
import {getList,save} from './userApi.js'
import 名称 from './userApi.js'

getList()
save()

名称.getList()

七、Webpack

Webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
原理：将多种静态资源(js,css,less)转换成一个静态文件，减少页面的请求。
官网

使用

打包js

1、全局安装
npm install -g webpack webpack-cli

2、安装后查看版本号
webpack -v

初始化项目
1、创建webpack文件夹

2、创建src文件夹

3、创建.js
export.info = function(str){
	document.write(str);
}



4、src 下创建utils.js
exports.add = add(a,b){
	return a + b;
}

5、src下创建main.js

const common = require('./common');
const utils= require('./utils');
common.info(utils.add(100,200));

6、webpack.config.js
//导入path模块
const path = require("path");
module.exports ={
	//入口函数从哪里开始进行编译打包
	entry:"./src/main.js",
	//编译成功以后把内容输出到哪里去
	output:{
		//1：定义输出的目录
		path:path.resolve(__dirname,"./dist"),
		//合并的js文件
		filename:"bundle.js"
	}
}
__dirname:当前项目的目录名
7、命令：webpack
webpack -w 代码实时监控打包
webpack -config 配置文件 多配置文件下

8、在打包好的文件里面新建.html,并且引入.js

打包css
1、安装style-loader 和css-loader
Webpack本身只能处理JavaScript模块，如果要处理其他类型的文件，就需要使用loader进行转换
Loader：模块和资源的转换器
首先我们需要安装相关的Loader插件
css-loader是将css装载到javascript
style-loader 是让javascript认识css

安装：npm install --save-dev style-loader css-loader

2、修改webpack.config.js

const path = require("path");//Node.js内置模块
module.exports = {
	//...
	output:{
		//其他配置
	},
	module:{
		rules:[
					test:/\.css$/, //打包规则应用到以css结尾的文件上
						use ：['style-loader','css-loader']
			]
	}
}
3、创建src/style.css
body{
	backgroup:ping;
}

4、修改main.js,在第一行引入style.css
require('./style.css')


5、运行编译命令
npm run dev

八、开源框架Vue-element-admin

vue-element-admin是一个后台前端解决方案，它基于vue和element-ui实现。
它使用了最新的前端技术栈，内置了i18国际化解决方案、动态路由、权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。
官网

运行工程和编译工程

# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git

# 进入项目目录
cd vue-element-admin

# 安装依赖
npm install

# 建议不要用cnpm安装，会有各种诡异的bug,解决下载慢的问题
npm install --registry=https://registry.npm.taobao.org

# 本地开发 启动项目
npm run dev
http://localhost:9527

引文：
1、狂神说
原基础只有 html、css、js、boostrap，这里是一个学vue之前的过渡课程