开发环境篇

83 阅读2分钟

1.git

image.png image.png

1.1git常用命令

image.png image.png git branch查看分支 git status 查看修改状态 git diff 查看详细修改(也可以git diff + 文件名称) git log 查看日志 git fetch 拉取所有分支 git stash把当前修改的先搁置一边 git stash pop 将搁置一边的修改释放出来 git clone 远程仓库地址 https协议的方式拉取仓库代码:每次提交都需要提供账号和密码,比较麻烦 ssh协议的方式拉取仓库代码:推荐这个方式

2.调试工具

2.1chrome调试工具

前端工程师必备技能 image.png

3.抓包

image.png

3.1抓包过程

image.png

3.2抓包代理

image.png

4.webpack和babel

image.png 安装webpack :npm install webpack webpack-cli -D

4.1webpack基础配置

image.png

4.2babel将es6转化为es5

根据不同的loader,进行不同的解析 往基础配置到模块内添加下面这个对象就可以了 image.png 需要在前端项目的根目录新建一个.babelrc文件,内容是一个json文件 image.png

4.3模块化

es6解构赋值: export 和 import

4.4配置生产环境

image.png package.json image.png

5.linux常用命令

image.png

ssh username@ip地址 
ls 查看当前文件夹 平铺
ls -a 显示隐藏文件
ll 查看当前文件夹 列表形式
clear 清屏
mkdir abc 创建文件夹
rm -rf abc 删除文件夹(-r递归删除 -f强制删除)
cd dirName 进入目录 
mv index.html index1.html 修改文件名称 
mv 目录文件 ../目录文件 移动到上级目录 
mv 目录文件 目录名/目录文件 将文件移动到下级目录 
cp a.js a1.js 拷贝 
touch d.js 创建文件 
vi d.js 创建文件并编写按下i 进入编写,按下 esc 退出编写状态,:w保存,:q退出编写界面
vim 文件名 查看文件
cat 文件名 查看文件
head 文件名 查看文件 头部 
tail 文件名 查看文件 尾部
grep 关键字字符串 文件名 查询文件中的关键字有哪些行,包含信息 
top 查看进程用了机器多少资源 
ps 查看有哪些进程在执行 
free 查看内存剩余资源 
chmod 修改文件权限