在线教育day4

任务：

1. axios
2. element-ui
3. Node.js
4. npm
5. babel
6. 模块化
7. webpack
8. 项目前端环境搭建

---

1. axios

简介： axios是一个独立的项目，不是Vue的一部分，经常和Vue配合使用来实现Ajax操作。

使用(重要)：

1. json文件模拟后台返回的数据
   
2. 前台获取界面
   
   

---

2.element-ui

---

3.Node.js

简介：

1. JavaScript的运行环境，用于执行JavaScript代码环境。即不需要浏览器，直接通过node.js来运行JavaScript代码。

2. 可以模拟出服务器的效果。

使用

1. 安装；
2. node -v 测试是否安装成功；
3. 使用Node.js执行js代码；
   在要执行的js文件目录下打开cmd,执行node xx.js即可执行js代码
   
4. 在vscode中打开cmd，执行js代码
   

---

4.npm

简介：

maven：用在后端开发中，可用来构建项目，自动联网并下载，管理jar包；
npm：用在前端开发中，管理前端js依赖，联网下载js依赖，如jquery；

使用：

1. npm初始化项目
   在vscode中创建一个文件夹，打开cmd终端，输入npm init，会创建一个package.json文件。npm init -y命令全部使用默认选项
   

2. npm下载js依赖

   例如：npm install jquery

3. 根据package.json下载依赖

   npm install

---

5.babel

简介：

es6代码兼容性很差，所以将es6代码用babel转换为es5，提高兼容性。

使用：

1. 安装babel；

2. 创建js文件，代码为es6代码；
   

3. 创建babel配置文件
   

4. 安装转码器

5. 转码

• 根据文件转码：babel es6/01.js -o dist/001.js
  

• 根据文件夹转码：babel es6 -d dist

---

6.模块化

概念：

后端开发中，类与类之间的调用称为后端模块化操作；

前端开发中，js与js之间的相互调用称为前端模块化操作。

使用：

• es5

1. 建项目
2. 初始化
3. 建立01.js和02.js
   
   
4. 测试
   

node.js中不能运行es6的模块化，就需要用babel将es6转换为es5。

• es6

1. 创建项目，初始化
2. 创建文件夹，创建01.js和02.js
   
   
3. 创建文件夹，用来存储转化好的js文件，并进行转化
   
4. 执行转化后的02.js
   

• es6写法2

1. 创建2个文件夹，一个存要编码的js文件，一个存编码后的js文件，定义01.js和02.js;
   
   

2. 转换
   

3. 执行转换后的02.js
   

---

7.webpack

概念：

webpack：打包工具，可以把多个静态资源打包成1个静态文件。

可以有效减少请求资源的次数。

使用：

• 打包js

1. 安装

安装：
npm install -g webpack webpack-cli
查看安装是否成功：
webpack -v

2. 创建文件夹，创建3个js文件：common.js，util.js，main.js
   
   
   

3. JS打包：创建webpack配置文件webpack.config.js，配置打包信息；
   

4. 用命令执行打包操作
   
   

5. 将打包后的bundle.js文件引入html，在浏览器中运行html文件。
   
   结果：
   

• 打包css

8. 项目前端环境搭建

选取一个模板进行环境搭建，该项目使用vue-admin-template进行环境搭建

vue-admin-template用vue和element-ui实现的

---

(完)