大前端进阶基础

最新推荐文章于 2024-06-10 14:45:48 发布

开玩喜66

最新推荐文章于 2024-06-10 14:45:48 发布

阅读量514

点赞数

分类专栏：大前端进阶文章标签： node.js javascript vscode

原文链接：https://www.kuangstudy.com/

版权

大前端进阶专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章目录

大前端进阶基础

大前端进阶基础

前端开发是创建 Web 页面或 app 等前端界面呈现给用户的过程，通过HTML，CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是 Web1.0 时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。

随着互联网技术的发展和 HTML5、CSS3 的应用，现代网页更加美观，交互效果显著，功能更加强大。

移动互联网带来了大量高性能的移动终端设备以及快速的无线网络，HTML5，node.jS 的广泛应用，各类框架类库层出不穷。

当下国内的大部分互联网公司只有前端工程师和后端工程师，中间层的工作有的由前端来完成，有的由后端来完成。

1、前端工具 VSde 的安装

1.1 下载安转 VScode

官网下载地址：https://code.visualstudio.com/

在这里插入图片描述

安转步骤：

打开下载完毕的安装包
选择安转目录（这里我是统一放在我的软件文件夹下）
是否在开始菜单文件夹中创建快捷方式（自己看着来）
选择附加任务
点击安转
等待安转完成，这就OK了

1.2 配置中文

搜索 Chinese，安转中文插件
界面右下角弹窗，点击 Restart 重启
OK
若页面还是没有中文，则进行以下步骤
Ctrl + Shift + P 弹出搜索框，搜索 configure display language
选择 zh-cn，中文
重启
ok

1.3 插件安转

为了后续的学习做准备，安转以下插件

Node.js Modules Intellisense
ESLint
Live Server
Vetur
VueHelper

在这里插入图片描述

1.4 设置字体大小

在这里插入图片描述

1.5 开启完整的 Emmet 语法支持

设置中搜索 Emmet：启用如下选项

启动后必须时重启 vs

在这里插入图片描述

1.6 修改主体颜色

Ctrl + T

在这里插入图片描述

2、NodeJS

Nodejs 是一门计算机语言，运行在系统中的 v8（jvm）引擎中。文件后缀是 js 运行的命令是：node

2.1 什么是 Nodejs

Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与 PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。发布于 2009年5月，由 Ryan Dahl开发，实质是对 Chrome V8 引擎进行了封装。
简单的说 Node.js 就是运行在服务端的 JavaScript。 Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。底层架构是：javascript. 文件后缀：.js
Node.js 是一个事件驱动 I/O 服务端 JavaScrip 环境，基于 Google 的 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。

在这里插入图片描述

2.2 Nodejs 安转

官网下载地址：http://nodejs.cn/download/

中文帮助文档：http://nodejs.cn/api/

下载安装包
双击打开，进行安转
同意，Next
选择目录，Next
Next
打钩，Next
安转
完成
cmd 命令行输入
```
node -v

npm -v
```
如果都出现版本号说明安转成功

2.3 Hello,Nodejs

创建代码文件夹
创建 hellonodejs.js
后台输出
```
console.log("Hello,Nodejs")
```
Ctrl + Shift + Y 打开命令行终端
在终端执行 hellonodejs.js 文件
```
node .\hellonodejs.js
```
查看运行结果

**问题：**npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。

解决办法
- 以管理员身份运行
- 查看 npm 环境变量的配置是否完整

2.4 Node 实现请求响应

创建 js 文件

// require 导入模块，类似于 java 中的 import
const http = require('http');
// 1. 创建一个 httpserver 服务
http.createServer(function(request,response){
    // 告诉浏览器以 text-html 去解析
    response.writeHead(200,{'Content-type':'text/html'});
    // 给浏览器输出内容
    response.end("<h2>Hello,Nodejs!</h2>");
}).listen(8888); // 2. 监听端口
console.log("启动服务器成功！");
// 3. 启动运行服务
// 4. 在浏览器访问 http://localhost:8888

启动服务器程序
```
node .\httpserver.js
```
启动成功后，在浏览器中输入访问地址
```
http://localhost:8888
```
Ctrl + C 停止服务

2.5 Node 操作 Mysql 数据库

在安转 mysql 依赖，在终端输入
```
npm install mysql
```

创建一个数据库表

CREATE TABLE `user` (
  `id` int(11) NOT NULL,
  `name` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

CREATE TABLE `user` (
  `id` int(11) NOT NULL,
  `name` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

创建 db.js

// 导入 mysql 依赖
var mysql = require("mysql");
// 1. 创建一个 mysql 的 Connection 对象
var connection = mysql.createConnection({
    // 2. 配置数据连接的信息
    host:"127.0.0.1",
    port:3306,
    user:"root",
    password:"root",
    database:"person"
});
// 3. 开启连接
connection.connect();
// 4. 执行 CURD（增删改查）命令
connection.query("select * from user",function(error,results,fields){
    // 如果查询出错，则直接输出
    if(error) throw error;
    // 查询成功
    console.log("results = ",results);
});
// 5. 关闭连接
connection.end();

终端运行 db.js

2. 小结

Node.js 是脱离浏览器环境运行的 JavaScript 程序，基于 V8 引擎

浏览器的内核包括两部分核心：

DOM 渲染引擎；
java script 解析器（ js 引擎）
js 运行在浏览器内核中的 js 引擎内部

如果想开发更复杂的基于 Node.js 的应用程序后台，需要进一步学习 Node.js 的 Web 开发相关框架 express，art-template、koa等

3、ES6

3.1 什么是 ES6

ECMAScript 是一种由 Ecma 国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过 ECMA-262 标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，所以它可以理解为是 JavaScript 的一个标准,但实际上后两者是 ECMA-262 标准的实现和扩展

ECMAScript 发展：
编程语言 JavaScript 是 ECMAScript 的实现和扩展。ECMAScript 是由 ECMA（一个类似W3C的标准组织）参与进行标准化的语法规
ECMAScript定义了：
- [语言语法] – 语法解析规则、关键字、语句、声明、运算符等。
- [类型]– 布尔型、数字、字符串、对象等。
- [原型和继承]
- 内建对象
- 函数
- [标准库]
- [JSON]
- [Math]
- [数组方法]
- [对象自省方法]
- 等等
ECMAScript 标准不定义 HTML 或 CSS 的相关功能，也不定义类似 DOM（文档对象模型）的 [Web API]，这些都在独立的标准中进行定义。ECMAScript 涵盖了各种环境中 JS 的使用场景，无论是浏览器环境还是类似 [node.js] 的非浏览器环境。
ECMAScript 标准的历史版本分别是1、2、3、5。
- **那么为什么没有第4版？**其实，在过去确实曾计划发布提出巨量新特性的第4版，但最终却因想法太过激进而惨遭废除（这一版标准中曾经有一个极其复杂的支持泛型和类型推断的内建静态类型系统）。
- ES4 饱受争议，当标准委员会最终停止开发 ES 4时，其成员同意发布一个相对谦和的 ES5 版本，随后继续制定一些更具实质性的新特性。这一明确的协商协议最终命名为 “Harmony”，因此，ES5 规范中包含这样两句话
  - ECMAScript 是一门充满活力的语言，并在不断进化中。
  - 未来版本的规范中将持续进行重要的技术改进
2009年发布的改进版本 ES5，引入了 [Object.create()]、[Object.defineProperty()]、[getters]和[setters]、[严格模式]以及[JSON]对象。
ES6: 是 JavaScript 语言的下一代标准，2015年6月正式发布。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

结论：

ECMAScript 是前端 js 的语法规范；可以应用在各种 js 环境中。如：浏览器或者 node.js 环境。
它有很多版本：es1/2/3/5/6，很多新特性，可以在 js 环境中使用这些新特性。

3.2 let 与 const

在传统的代码中，用 var 定义了所有的变量，所以会导致变量穿透问题以及常量被修改问题。

变量穿透

for(var i = 1; i < 5; i++){
    console.log(i);
}
// 这里就会造成变量穿透问题，里面定义的 i，在外面依旧可以使用
console.log(i);

常量被修改问题

所以 ES6 新特性：

let：用来定义局部变量
const：用来定义常量

小结：

在实际开发和生产中，如果是小程序、uniapp 或者一些脚手架中，可以直接去使用 let 和 const
但是如果是 web 开发，建议还是使用 var，因为一些低版本的浏览器是不支持 ES6 新特性的

3.3 模板字符串

解决了项目开发过程中，动态部分以及静态部分进行拼接的问题
传统的拼接方式是使用单引号或者双引号将字符创拼接起来
ES6 新特性模板字符串使用反引号（``）包裹，用 ${} 来界定

var user = {
    name:"大块头",
    age:13,
    sex:"男"
};
// 传统的拼接方式 单引号（''）和 双引号（""）
var introduce = "我是"+user.name+"，今年"+user.age+"，性别"+user.sex;
console.log(introduce);

// ES6 新特性模板字符串使用 反引号（``）,用 ${} 来界定
var introduce2 = `我是${user.name}，今年${user.age}，性别${user.sex}`;
console.log(introduce2);

3.4 函数默认参数

ES6 新特性，函数默认参数，给参数列表设定初始值

在方法的参数后面加上一个默认值，这样就是定义了函数的默认参数
传统的默认参数是 undefined

// 默认参数：给参数列表设定初始值
function add(a=1,b=2){
    return a + b;
}
// 这里会使用默认值填充
console.log(add());
// 这里会覆盖默认值
console.log(add(100,200));

3.5 箭头函数

ES6，箭头函数：

箭头函数简化函数的定义，可以让我们不用使用 function 关键字
箭头函数最直观的三个特点：
1. 不需要 function 关键字来创建函数
2. 省略 return 关键字
3. 继承当前上下文的 this 关键字

// 箭头函数
// 它是一种函数的定义，仅仅是简化定义而已

// 传统定义方式
var sum = function(a,b){
    return a+b;
};

// 箭头函数定义步骤：
// 1. 去掉 function
// 2. 在括号后面加一个箭头
// 3. 如果逻辑代码只有 return，return 就可以省去，大括号也可以省去，如果有逻辑体就不能省去
// 4. 如果参数只有一个，包裹参数的小括号也可以省去，如果参数不止一个就不可以省去
var sum1 = (a,b)=>{
    sum = a + b;
    return sum;
}; // 多参数，有逻辑体
var sum2 = (a,b)=>a+b; // 多参数，无逻辑体
var sum3 = a=>a; // 单参数，无逻辑体

3.6 对象初始化简写

ES6，对象初始化简写：

如果一个对象中的 key 和 value 的名字一样的情况下可以定义成一个。
如果 value 是一个函数，可以把 function 省去

// 传统的写法
var user = {
    name:"大头",
    age:18,
    sex:"男",
    go:function(){}
};

// ES6，对象初始化简写
// key-value 键值对的名字相同
var name = "苹果";
var age = 16;
var sex = "女";
var user2 = {
    name,
    age,
    sex,
    go()
}

实例应用：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div>
            <form action="#" method="POST">
                <p>账号：<input type="text" id="account"></p>
                <p>密码：<input type="password" id="password"></p>
                <p><input type="button" value="登录" id="login_btn"></p>
            </form>
        </div>

        <script>
            $('#login_btn').on('click',function(){
                var account = $('#account').val();
                var password = $('#password').val();
                // 对象简写
                // var params = {account:account,password:password}
                var params = {account,password}; 
                // 异步请求
                $.post({
                    url:"xxx",
                    data:params,
                    // 对象简写，去掉了 function
                    success(){}
                });
            })
        </script>
    </body>
</html>

3.7 对象解构

提供一些获取快捷获取对象属性和行为方式

var user = {
    name:"大西瓜",
    age:20,
    go(){
        console.log("hello");
    }
};
// 传统取得对象的属性和方法使用 点（.）或者 中括号（[]）
// 通过 点（.）的方式
console.log(user.name);
console.log(user.age);
user.go();
// 通过 中括号（[]）的方式
console.log(user["name"]);
console.log(user["age"]);
user["go"]();
// 点（.）和中括号（[]）的区别
// 点：如果取了一个没有定义的属性，不会给自行添加这个属性
// 中括号：如果去了一个不存在的属性，会自动的添加这个属性

// ES6，对象解构
// 其实就是快捷的获得属性和方法的一中方式
var {name,age,go} = user;
console.log(name);
console.log(age);
go();

3.8 传播操作符

把一个对象的属性或方法传播到另一个对象中

var user = {
    name:"大西瓜",
    age:20,
    go(){
        console.log("hello");
    }
};
console.log(user);

// 对象传播操作符（...）
// 对象融合
var user2 = {
    ...user,
    address:"黑龙江",
    phone:12345678910
}
console.log(user2);

// 对象取值
var {name,...user3} = user; //解构 user，将剩下没结构的全给 user3
console.log(user3);

场景分析（伪代码）

// 模拟后台：异步查询返回用户数据 如下：
function findUsers(){
    $.get("xxxxx",function(res){
        var res = {
            pages:11,
            pageSize:10,
            pageNo:1,
            firstFlag:true,
            lastFlag:false,
            total:123,
            data:[{},{},{},{}],
        };
        // ==========================对象 ... 取值===============
        var {data:users,...pagesjon} = res;
        //等价于
        /*  var users = res.data;
                   var pagesjon = {
                    res = {
                        pages:11,
                        pageSize:10,
                        pageNo:1,
                        firstFlag:true,
                        lastFlag:false,
                        total:123,
                    }; */
    })
}

3.9 map 数组

方法可以将原数组中的所有元素通过一个函数进行处理并放入到一个新数组中并返回该新数组。

var arr = [1,2,3,4,5];
// 将数组中的每个元素 *2

// 传统的方式
var newArr = [];
for(let i=0;i<arr.length;i++){
    newArr.push(arr[i]*2);
}
console.log(newArr);

// ES6,map数组
// map 自带循环，并且会把处理后的值回填到相应的位置
var newArr2 = arr.map(function(ele){
    return ele*2;
});
console.log(newArr2);
// 可以简化为（箭头函数）
var newArr22 = arr.map(ele=>ele*2);

// map 处理对象的数据
var user = [{name:"大头",age:10},{name:"中头",age:15},{name:"小头",age:21}];
var newUser = user.map(function(ele){
    ele.age++; // 处理值并回填
    ele.check = true; //添加属性
    return ele;
}); 
console.log(newUser);

3.10 reduce 数组

接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：

第一个参数是上一次 reduce 处理的结果
第二个参数是数组中要处理的下一个元素

reduce() 会从左到右依次把数组中的元素用 reduce 处理，并把处理的结果作为下次 reduce 的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数

var arr = [1,2,3,4,5,6,7,8,9,10];
// ES6，reduce 计算 arr 数组的总和
var result = arr.reduce(function(a,b){
    return a+b;
});
console.log(result);
// 简写
var res = arr.reduce((a,b)=>a+b);
console.log(res);

4、NPM 包管理器

官网：https://www.npmjs.com/

4.1 什么是 npm

NPM 全称 Node Package Manager

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

查看 npm 当前版本：

npm -v

4.2 使用 npm 管理项目

类似于 maven 中的 pom.xml 文件

创建一个新的文件夹

项目初始化

按照提示输入相关信息，如果是用默认值则直接回车即可。
#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词，便于用户搜索到我们的项目

npm init

package.json：类似于 maven 中的 pom.xml

About to write to D:\JAVA\大前端\代码\npm\package.json:

{
  "name": "npmpro", // 工程名
  "version": "1.0.1", // 版本号
  "description": "我是一个 node 工程", // 描述
  "main": "index.js", // 入口 js
  "scripts": { // 运行脚本
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "aze", // 开发者
  "license": "ISC" // 授权协议
}

如果想要直接生产一个 package.json 文件可以：

npm init -y

4.3 修改 npm 镜像

NPM官方的管理的包都是从 http://npmjs.com下载的，但是这个网站在国内速度很慢

这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/

淘宝 NPM 镜像是一个完整 npmjs.com 镜像，同步频率目前为 10 分钟一次，以保证尽量与官方服务同步

设置镜像地址：

#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org 
#查看npm配置信息
npm config list

4.4 npm install

使用 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

全局安装：

ode.js 全局安装的 npm 包和工具的位置：用户目录\AppData\Roaming\npm\node_modules
```
#一些命令行工具常使用全局安装的方式
npm install -g webpack
```

#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
npm install #根据package.json中的配置下载依赖，初始化项目

4.5 package.json

"dependencies":{
    "模块":"^版本号"，
    "模块":"^版本号"
}

通过 npm install *** 会记录在这个文件下

类似于 maven 中 pom.xml

package.json 作用：

记录依赖的模块
可以通过 npm install 直接把 package.json 所依赖的模块全部自动的下载下来，模块复用

4.5 其他命令

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

4.6 小结

快速安转依赖第三方模块：
```
npm install 模块名
npm i 模块名
```
模块安转在哪？

项目的 node_modules 文件夹中
安转的模块如何使用：

require
如何运行

node xxx.js

node xxx
如何终止运行

Ctrl + C

5、Babel

5.1 什么是 Babel

ES6 的某些高级语法在浏览器环境甚至是 Node.js 环境中无法执行。

Babel 是一个广泛使用的转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行执行。

这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。

5.2 Babel 安转

Babel 提供 babel-cli 工具，用于命令行转码。它的安装命令如下：

npm install -g babel-cli
#查看是否安装成功
babel --version

5.3 Babel 使用

创建一个 babel 文件夹
初始化项目
```
npm init -y
```

创建文件（src/example.js）

// 转码前
// 定义数据
let input = [1, 2, 3]
// 将数组的每个元素 +1
input = input.map(item => item + 1)
console.log(input)

创建 .babelrc 文件
- Babel 的配置文件是 .babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，基本格式如下。
```
{
    "presets": [],
    "plugins": []
}
```
- presets 字段设定转码规则，将 es2015 规则加入 .babelrc：
```
{
    "presets": ["es2015"],
    "plugins": []
}
```

安转转码器，在项目中安转

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

5.4 自定义脚本

改写 package.json，在 package.json 中的 scripts 增加一下代码

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

转码的时候执行一下命令
```
mkdir dist
npm run build
```

6、模块化

6.1 什么是模块化

模块化产生的背景：

随着网站逐渐变成”互联网应用程序”，嵌入网页的 Javascript 代码越来越庞大，越来越复杂。
Javascript 模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript 不是一种模块化编程语言，它不支持”类”（class），包（package）等概念，也不支持”模块”（module）。

模块化规范

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

6.2 CommonJS 规范

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

创建一个 module 文件夹

创建 mokuai-common-js/四则运算.js

// 定义成员：
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
}

// 简写
module.exports = {
    sum,
    subtract,
    multiply,
    divide
}

创建 mokuai-common-js/引入模块.js

//引入模块，注意：当前路径必须写 ./
const m = require('./四则运算.js')
console.log(m)
const r1 = m.sum(1,2)
const r2 = m.subtract(1,2)
console.log(r1,r2)

运行
```
node 引入模块.js
```

CommonJS 使用 exports 和 require 来导出、导入模块。

6.3 ES6 模块化规范（写法一）

ES6 使用 export 和 import 来导出、导入模块。

创建 mokuai-es6 文件夹

创建 src/userApi.js 文件，导出模块

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

创建 src/userComponent.js文件，导入模块

//只取需要的方法即可，多个方法用逗号分隔
import { getList, save } from './userApi.js'
getList()
save()

注意：这时的程序无法运行的，因为 ES6 的模块化无法在 Node.js 中执行，需要用 Babel 编辑成 ES5 后再执行。
初始化项目
```
npm init -y
```

配置 .babelrc

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

安装转码器，在项目中安装

npm install --save-dev babel-preset-es2015

定义运行脚本，package.json 中的 scripts 增加 ”build”

{
    // ...
    "scripts": {
       "build": "babel src -d dist"
    }
}

执行命令转码
```
npm run build
```
运行程序
```
node dist/userComponent.js
```

6.4 ES6 模块化写法2

创建 src/userApi2.js ，导出模块

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

创建 src/userComponent2.js，导入模块

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

执行命令转码
```
npm run build
```
运行程序
```
node dist/userComponent2.js
```

7、Webpack

7.1 什么是 Webpack

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

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

在这里插入图片描述

7.2 Webpack 安转

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

7.3 初始化项目

创建 webpack 文件夹
```
npm init -y
```
创建 src 文件夹

src 下创建 common.js

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

src 下创建 untils.js

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

src 下创建 main.js

const common = require('./common');
const utils = require('./utils');

common.info('Hello world!' + utils.add(100, 200));

7.4 JS 打包

webpac k目录下创建配置文件 webpack.config.js

读取当前项目目录下 src 文件夹中的 main.js（入口文件）内容，分析资源依赖，把相关的 js 文件打包，打包后的文件放入当前目录的 dist 文件夹下，打包后的 js 文件名为 bundle.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

webpack 目录下创建 index.html ，引用 bundle.js

<body>
    <script src="dist/bundle.js"></script>
</body>

浏览器中查看 index.html

7.5 CSS 打包

安装 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
```

修改 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' //输出文件
    },
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

在 src 文件夹创建 style.css
```
body{
    background:pink;
}
```
修改 main.js，在第一行引入 style.css
```
require('./style.css');
```
运行编译命令
```
npm run dev
```
浏览器中查看 index.html ，看看背景是不是变成粉色

8、Vue-element-admin

官网地址：https://panjiachen.github.io/vue-element-admin-site/zh/

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 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 本地开发 启动项目
npm run dev

注意如果老是安装失败：

请删除 node-modules 然后执行npm install
或者换个网络

启动完成后会自动打开浏览器访问 http://localhost:9527，你看到下面的页面就代表操作成功了。

小结：

nodejs项目几要素

package.json (npm init \ npmt init -y)
node_modules (npm install -g jquery/npm iinstall jquery)
运行是使用：查看官网提供几乎所有的nodejs都启动和打包都是如下：
- npm run dev （开发运行）
- npm run build (打包)

开玩喜66

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
大前端进阶基础

大前端进阶基础前端开发是创建 Web 页面或 app 等前端界面呈现给用户的过程，通过HTML，CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是 Web1.0 时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和 HTML5、CSS3 的应用，现代网页更加美观，交互效果显著，功能更加强大。移动互联网带来了
复制链接

扫一扫

专栏目录