一份完整的前端开发环境配置

# 集成环境（懒人必备）

# 介绍

前端wamp开发的全家桶（windows）

本集成环境为larago，当时在写php时候发现的，内部集成了Nginx、 Ngrok、 Apache、 php、 Memcached、 Redis、 git、 node、 MySql或 MongoDb 支持更还环境版本

# 下载

https://sourceforge.net/projects/laragon/files/releases/4.0/laragon-wamp.x86.exe/download

# 安装

下载完成后打开选择简体中文出现如下图，ps 只有安装界面会乱码，最后一步选择选项时选较长的将不会重启电脑😉

安装完成后打开的界面，浏览器输入localhost就可以访问了本地的服务器了，在安装目录下的www文件夹内创建项目将会自动添加 项目名.test，浏览器可以直接通过该域名访问项目

# 单独环境（逐个安装）

相关安装地址可以在 文章顶部的 集成环境介绍中找到

# node安装配置及使用

从上面的地址下载好node安装包后（exe或msi格式，zip格式适用于上面集成环境更换版本）

在选好安装位置无脑点击下一步安装完成后

打开cmd命令行输入如下命令，node-v应输出你安装的node版本

node -v
npm -v

# node全局配置

• 设置全局目录和缓存目录，创建完两个空文件夹之后，打开cmd命令窗口，输入

npm config set prefix "D:\xxx\Node8.9.4\node_global"
npm config set cache "D:\xxx\Node8.9.4\node_cache"

# npm 基本使用

• 初始化操作
  • npm init 会生成一个package.json文件
  • npm init -y 快速生成默认的package.json文件
• 下载所需要的包
  • npm install +包的名称
  • npm install +包的名称 -g 下载之后将会在全局安装目录
  • npm install 包的名称 --save 下载之后会在package.json中添加当前下载的包的版本信息
• 为什么要保存至package.json
  • 将配置信息写入package.json并将其加入版本管理，其他开发者对应下载即可
  • 命令提示符执行npm install，则会根据package.json下载所有需要的包，npm install --production只下载dependencies节点的包

# 安装cnpm

• 因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，同步频率目前为 10分钟 一次
• 在命令行输入 npm install -g cnpm --registry=https://registry.npm.taobao.org

# git安装配置及使用

直接从上面的地址下载安装

# 常用命令

• 设置当前使用Git的用户是谁,每一次备份都会将当前用户的用户名及邮箱信息存储起来，以便区分是谁进行的操作

• 1. 配置用户名：
  • git config --global user.name "xxx"
• 2. 配置邮箱：
  • git config --global user.email "xxx@xx.com"

• 初始化Git仓库（仓储）

  • 这个仓库会存放，git对我们项目代码进行备份的文件

• 在项目目录右键打开 git bash

  • 输入 git init

• 查看当前的状态

  • git status

• 暂存文件（还没有保存到git库）

  • git add ./文件路径 将指定路径的文件暂存放到仓库门口
  • git add . 将所有修改过的文件暂存

• 保存版本（文件）

  • git commit -m "添加说明" 将已经暂存的保存到库中
  • git commit --all -m "对本次添加东西的说明" 将所有修改过的文件直接放到房间内——不推荐

• 查看日志

  • git log 查看历史提交的日志
  • git log --oneline 可以看到简洁版的日志

• 回退到指定的版本

  • git reset --hard Head~0
  • Head~0 是指回退到哪一个版本的状态
  • git reset --hard 版本号
  • 可以通过版本号精确的回退到某一次提交时的状态

• 查看每一次切换版本的记录:可以看到所有提交的版本号

  • git reflog

# 分支操作

• Git中的分支
  • 默认是有一个 主分支 master
  • 创建分支 git branch dev 创建了一个 名为 dev 的分支
  • 在刚创建时候 dev分支里的东西 和 master分支里的东西是一样的
• 切换分支
  • git checkout dev 切换到指定的分支,这里的切换到名为dev的分支
• 查看当前库有哪些分支
  • git branch
• 合并分支
  • git merge dev 合并分支内容,把当前分支与指定的分支(dev),进行合并
  • 当前分支指的是git branch命令输出的前面有*号的分支

# 提交代码到github(当作git服务器来用)

• 上传到远程的master分支上

  • git push [地址] master
  • 示例: git push https://github.com/huoqishi/test112.git master master
  • 如果已经有过上传 使用 git push origin master

• 下载远程分支

  • 首先要先初始化一个本地git库
  • git pull [地址] master

• 拷贝远程仓库

  • 不需要初始化本地gitku
  • git clone [地址]
  • 会得到远程仓储相同的数据,如果多次执行会覆盖本地内容

# 多人协作

• 当你从远程仓库克隆时，实际上Git自动把本地的master分支和远程的master分支对应起来了，并且，远程仓库的默认名称是origin
• 查看远程库的信息
  • git remote
• 显示更详细的信息
  • git remote -v

# Git中的忽略文件

• .gitignore,在这个文件中可以设置要被忽略的文件或者目录
• 被忽略的文件不会被提交仓储里去.
• 在.gitignore中可以书写要被忽略的文件的路径，以/开头
• 一行写一个路径，这些路径所对应的文件都会被忽略,不会被提交到仓储中
• 语法
  • /.idea 会忽略.idea文件
  • /js 会忽略js目录里的所有文件
  • /js/*.js 会忽略js目录下所有js文件

# ssh方式上传代码

• 公钥 私钥,两者之间是有关联的
• 生成公钥,和私钥
  • ssh-keygen -t rsa -C "xxx@xxx.com"
• 默认路径为
  • C:\Users\bifjhh.ssh 下面的id_rsa.pub文件

# 在远程库选择配置ssh密钥

• 将id_rsa.pub文件内的内容复制到密钥区域即可

# 在push和pull操作时

• 先pull , 再push
• 当我们在push时，加上-u参数，那么在下一次push时 我们只需要写上git push就能上传我们的代码(加上-u之后，git会把当前分支与远程的指定的分支进行关联)