前端的基础

前端

过载者沉其舟,欲胜者杀其生

1. 前端工具

1. 工具官网

• vscode
• nodejs
• vue-element-admin

2. 文档官网

• nodejs中文文档
• nodejs外部模块npm
• webpack文档

3. 安装命令

• node 、npm

# 查看版本
node -v

# 由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以使用cmd命令行输
入“npm -v”来测试是否安装成功。
npm -v

# 安装相关环境 express快速、开放、极简的 Web 开发框架
npm install express -g

# 安装淘宝镜像，防止下载较慢
npm install -g cnpm --registry=https://registry.npm.taobao.org

#查看npm配置信息
npm config list

# 建立一个空文件夹，在命令提示符进入该文件夹 执行命令初始化
npm init
# 如果想直接生成 package.json 文件，那么可以使用命令
npm init -y

• babel

npm install -g babel-cli
# 查看是否安装成功
babel --version
# 安装转码器，在项目中安装
npm install --save-dev babel-preset-es2015
# 转码
# 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

• webpack

# 全局安装
npm install -g webpack webpack-cli
# 安装后查看版本号
webpack -v

2. Nodejs

1. 概述

Node.js 就是运行在服务端的 JavaScript,是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎

2. 运行

# 运行文件，和javac很像
node hello.js

3. 测试http模块

//导入模块
const http = require('http');
//1. 创建 HTTP 服务器
http.createServer((req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end("hello okay");
  }).listen(8888);
console.log("你Server running at http://127.0.0.1:8888/");
//2. 监听一个端口 8888
//3. 启动 node http.js
//4. 浏览器打开8888

4. 测试操作mysql

• nodejs本地没有mysql模块，引入外部依赖

$ npm install mysql

let mysql  = require('mysql');
let connection = mysql.createConnection({
  host     : '127.0.0.1',
  user     : 'root',
  password : '1234',
  database : 'tempdb'
});
 
connection.connect();
 
connection.query('SELECT * from books', function (error, results, fields) {
  if (error) throw error;
  console.log('The solution is: ', results);
});
 
connection.end();

3. ES6[ECMAScript]

1. 简述

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。 它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言，泛指“下一代 JavaScript 语言”。

2. 新增功能

• 箭头函数=>
• map(循环输出)
• reduce（循环赋值）
• 传播操作符 […]
• 模板字符``

`let adress = 你家在${name}` 

• 声明命令

  • let
  • const
  • class
  • import、export

• 解构赋值

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）

let { name, age } = user;
console.log(name, age);

• 字符处理

  • includes()：返回布尔值，表示是否找到了参数字符串
  • startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部
  • endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部
  • repeat方法返回一个新字符串，表示将原字符串重复n次

• 性能扩展

  • 字符串
  • 遍历器(of)
  • 正则表达式

• 兼容问题

4. Npm【Node Package Manager】

1. 概述

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

2. 作用

• 管理项目

# 建立一个空文件夹，在命令提示符进入该文件夹 执行命令初始化
npm init
# 按照提示输入相关信息，如果是用默认值则直接回车即可。
# name: 项目名称
# version: 项目版本号
# description: 项目描述
# keywords: {Array}关键词，便于用户搜索到我们的项目
# 最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
# 我们之后也可以根据需要进行修改。
# 如果想直接生成 package.json 文件，那么可以使用命令
npm init -y

• 快速下载和安装第三方nodejs模块

#使用 npm install 安装依赖包的最新版，
#模块安装的位置：项目目录\node_modules
#安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
#同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的 <dependencies>
npm install jquery
#如果安装时想指定特定的版本
npm install jquery@2.1.x
#devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖
#使用 -D参数将依赖添加到devDependencies节点
npm install --save-dev eslint
#或
npm install -D eslint
#全局安装
#Node.js全局安装的npm包和工具的位置：用户目录\AppData\Roaming\npm\node_modules
#一些命令行工具常使用全局安装的方式
npm install -g webpack
#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
npm install 
# 根据package.json中的配置下载依赖，初始化项目

#更新包（更新到最新版本）
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名

5. Babel

1. 概述

ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行,安装命令行转码工具Bable可以转为ES5代码

2. 安装

npm install -g babel-cli
# 查看是否安装成功
babel --version
# 安装转码器，在项目中安装
npm install --save-dev babel-preset-es2015
# 转码
# 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

3. 自定义脚本

{
    // ...
    "scripts": {
        // ...
    	"build": "babel src\\example.js -o dist\\compiled.js"
	},
}

{
    "scripts": {
        "dev":  "babel src -d dist" //其中dev是键（随便取、自定义）
    },
}

6. 模块化

1. 概述

互联网应用程序Javascript不是一种模块化编程语,不支持"模块",异步请求需要模块化管理

2. 规范

• CommonJS模块化规范(exports,require)

// 定义成员
const sum=function(a,b){
    return a+b
}
const subtract=function(a,b){
    return a-b
}
const multiply=function(a,b){
    return a*b
}
const divide=function(a,b){
    return a/b
}
// 导出成员:
module.exports={
    sum:sum,
    subtract:subtract,
    multiply:multiply,
    divide:divide
}

// 引入模块，注意:当前路径必须写 ./
const m = require('./sum.js');
console.log(m);

let r1=m.sum(2,3);
let r2=m.subtract(2,3);
console.log(r1,r2);

• ES6模块化规范（ES6使用export和import来导出、导入模块。）

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


import user from "./userApi2.js"
user.getList()
user.save()

7. webpack

1. 概述

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按 照指定的规则生成对应的静态资源。多个js合成1个

2. 安装

npm install -g webpack webpack-cli
webpack -v
npm init -y
# css
npm install --save-dev style-loader css-loader

3. 测试（发现项目js文件必须放在src包下，不可自定义命名包）

• common.js

exports.info = function (str) {
    document.write(str);
}

• utils.js

exports.add = function (a, b) {
    return a + b;
}

• main.js

const style = require('./style.css');
const common = require('./common');
const utils = require('./utils');
common.info('Hello world!' + utils.add(400, 200));

• webpack.config.js

const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js' //输出文件
    }
}

• 执行命令

webpack --mode=development
# 执行后查看bundle.js 里面包含了上面两个js文件的内容并进行了代码压缩
# 也可以配置项目的npm运行命令，修改package.json文件
"scripts": {
    //...,
    "dev": "webpack --mode=development"
 }
npm run dev 

• css的webpack.config.js

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

• style.css

body{
    background: coral;
}

4. 配置webpack.config.js

module.exports = {
    entry: "",
    output: {
        path: "",
        filename: ""
    },
    module: {
        loaders: [
            {test: /\.js$/, loader: ""}
        ]
    },
    plugins: {},
    resolve: {},
    watch: true
}

序号	名称	功能	备注
1	entry	入口文件，指定 WebPack 用哪个文件作为项目的入口
2	output	输出，指定 WebPack 把处理完成的文件放置到指定路径
3	module	模块，用于处理各种类型的文件
4	plugins	插件，如：热更新、代码重用等
5	resolve	设置路径指向
6	watch	监听，用于设置文件改动后直接打包

8. 总结

对于前端的利用有更新的了解，知道了新的知识。