大前端学习记二开发准备

此学习笔记主要是根据XX网大前端课程学习时的笔记整理。

一、项目开发准备
- 1.1 开发环境搭建
- - 1.1.1 虚拟机介绍
  - 1.1.2 Vue-Cli
- 1.2 Linux中常见指令
- 1.3 Docker入门
- - 1.3.1 什么是Docker
  - 1.3.2 特点
  - 1.3.3 安装
- 1.4 Node.js
- - 1.4.1 认识node.js
  - 1.4.2 包管理工具
  - 1.4.3 node多版本管理工具
- 1.5 调试工具
- 1.6 IDE介绍
- - 1.6.1 什么是IED
  - 1.6.2 VS Code
- 1.7 接口测试工具
- - 1.7.1 RESTful API
  - 1.7.2 Mock数据
  - 1.7.3 DOClever线下部署

一、项目开发准备

1.1 开发环境搭建

1.1.1 虚拟机介绍

windows：vmware、Hyper-V
Mac：Parrallels Desktop
Linux：Hypervisor

 Linux系统下载地址https://www.centos.org/download/

1.1.2 Vue-Cli

 // 安装命令npm install -g @vue/cli// 快速原型开发npm install -g @vue/cli-service-global

1.2 Linux中常见指令

// 文档型lsb_release -a  // 查看LSB本身的版本信息df -Th // 查看磁盘top // cpu资源和内存资源cd xxx // 进入文件夹ls // 文件目录mkdir xxx // 创建目录touch xxx.xxx // 新建文件vi xxx.xxx  // 进入编辑器编辑文件（i：进入编辑模式，Esc + :wq：退出编辑模式并保存文件， Esc + :q!：退出编辑模式并不保存文件）cat xxx.xxx // 查看文件内容echo 'xxxx' >> xxx.xxx // 往文件添加内容echo 'xxxx' > xxx.xxx // 覆盖文件内容rm xxx.xxx // 删除文件rm -r xxx/ // 删除文件目录// 下载、压缩、解压wget 文件下载地址 // 下载文件tar zxvf 文件压缩包  // 解压文件tar zcvf 压缩后文件夹名 压缩文件或目录  // 压缩文件// grep命令ps -ef | grep 搜索值 // 查看搜索值的进程kill -9 id // 强制终止id下的进程// 查看系统服务状态service sshd status // 查看sshd的运行状态service sshd stop // 停止sshd的运行状态service sshd restart// 重启sshd的运行状态systemctl status firewalld.service // 运行防火墙

1.3 Docker入门

1.3.1 什么是Docker

Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中，然后发布到任何流行的 Linux或Windows 机器上，也可以实现虚拟化。容器是完全使用沙箱机制，相互之间不会有任何接口。

1.3.2 特点

文件系统隔离：每个进程容器运行在完全独立的根文件系统里
资源隔离：可以使用cgroup为每个进程容器分配不同的系统资源，例如CPU
网络隔离：每个进程容器运行在自己的网络命名空间里，拥有自己的虚拟接口和内存
变更管理：容器文件系统的变更可以提交到新的映像中，并可重复使用以创建更改
日记记录：Docker将会收集和记录每个进程容器的标准流
采用写时复制方式创建根文件系统，这让部署变得极其快捷

1.3.3 安装

我们工作中使用Docker都是部署在linux服务器上面的，但是我个人电脑一般使用的是Windows，那么docker怎么在Windows上面部署？其他我就不多说，问度娘。只记录windows10家庭版安装

1、Windows10家庭版添加Hyper-V的方法

将下面的内容复制到记事本中

pushd "%~dp0"
dir /b %SystemRoot%\servicing\Packages\*Hyper-V*.mum >hyper-v.txt
for /f %%i in ('findstr /i . hyper-v.txt 2^>nul') do dism /online /norestart /add-package:"%SystemRoot%\servicing\Packages\%%i"
del hyper-v.txt
Dism /online /enable-feature /featurename:Microsoft-Hyper-V-All /LimitAccess /ALL

保存为文件Hyper-V.cmd

鼠标右键‘以管理员身份运行’，紧接着进行Windows命令处理，我们等待处理完成以后，在最末处输入：Y，电脑自动重启，进行配置更新。注意：不能关闭计算机。

配置更新完成以后，进入系统桌面，我们点击系统桌面左下角的【开始】，找到并展开Windows 工具，再点击：Hyper-V管理器；

2、下载安装文件【Docker for Windows Installer.exe】

到官网下载Docker官网地址。注意：下载docker需要先注册用户。

双击安装下载好的文件，在系统检查项会报错误，系统版本不对：

Docker for Windows requires Windows 10 Pro or Enterprise version 14393, or Windows server 2016 RTM

此时通过修改注册表，来完成安装，双击EditionID，将EditionID中的值修改为Professional

重新双击安装文件，安装成功，然后重启电脑。电脑右下角有小图标

安装完成后，在终端工具中使用docker version来查看docker版本

1.4 Node.js

1.4.1 认识node.js

免费、开源、多平台适用（跨平台）
服务器上的JavaScript运行环境
基于Chrome V8引擎，事件驱动、非阻塞式I/O

1.4.2 包管理工具

* npm、cnpm安装命令： npm install -g cnpm --registry=https://registry.npm.taobao.org官网地址： https://npm.taobao.org* yarn官网地址：https://yarnpkg.com/常用命令：yarn add/install/remove下载地址：https://yarn.bootcss.com/docs/install/#windows-stable、https://github.com/yarnpkg/yarn/releases

1.4.3 node多版本管理工具

ios安装地址、windows安装版

1.5 调试工具

移动端真机调试

chrome + android 、Safari + ios（windows、mac）
Fiddler 、Charles
Weinre 、Spy-Debugger、vConsole

1.6 IDE介绍

1.6.1 什么是IED

集成开发环境（IDE，Integrated Development Environment ）是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等工具。

1.6.2 VS Code

玩转VS Code
安装包：插件搜索 vue extension pack、react extension pack、angular extension pack

1.7 接口测试工具

1.7.1 RESTful API

定义

RESTFUL是一种网络应用程序的设计风格和开发方式，基于HTTP，可以使用XML格式定义或JSON格式定义。RESTFUL适用于移动互联网厂商作为业务使能接口的场景，实现第三方OTT调用移动网络资源的功能，动作类型为新增、变更、删除所调用资源

特点

客户端-服务端：通过用户界面，让数据与存储分开，通过简化服务器组件来实现跨多平台的应用。
无状态、可缓存：C→S包含请求所需的信息，可缓存信息。
统一接口
分层系统
按需代码

常用工具

终端类：Postman、SoapUI、DOClever
平台类：DOClever、Yapi、RAP2、EasyMock、Swagger
抓包proxy：Fiddler 、Charles
插件类：DHC、Postman、REST client

1.7.2 Mock数据

定义

即为虚拟的数据、虚假的测试数据

作用

模拟真实接口：实现效率开发，前后台同步，特别是分布式的系统
虚拟业务场景：模拟交易与全过程，某些开发场合非常难触发，还有一些异常逻辑、交互逻辑使用模拟数据更便捷。
压力测试

常用工具

DOClever、Yapl、EasyMock

1.7.3 DOClever线下部署

官网部署教程