前端开发环境的搭建

本开发环境是自己在工作中的环境，为了方便以后更换开发设备。留个笔记，顺便分享出来。

安装homebrew

作为mac上的第三方包管理器，有了它安装wget等会十分方便。

 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装nvm，并以此安装node

众所周知，node完全是一个版本帝。所以就有了node version manager。此组件不建议使用homebrew安装。

• 通过curl下载并写到bash配置里

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

• 设置nvm代理

在对应的家目录下脚本配置里的最后写上

export NVM_NODEJS_ORG_MIRROR=http://npm.taobao.org/mirrors/node

• 将写入的配置在当前的环境执行

source ~/.zshrc

vagrant下载配置

为了模拟线上环境，下载vagrant。配置Ubuntu环境

• 在http://www.vagrantup.com 页面下载并安装vagrant
• 下载并安装virtual box
• 在http://www.vagrantbox.es/ 页面下载对应的.box文件
• 将对应的box文件放到打算开发的目录里，vagrant init **.box
• init之后会生成一个Vagrantfile, 将文件中对应的配置修改如下

config.vm.network "private_network", ip: "192.168.33.33" // 相对本机的静态ip
config.vm.synced_folder "./data", "/vagrant_data" // 共享目录

• vagrant up
• vagrant ssh

通过vagrant ssh登录Ubuntu后的配置

• 首先配置ubuntu的阿里云源

sudo vim /etc/apt/sources.list
# ubuntu 16.04配置如下
deb http://mirrors.aliyun.com/ubuntu/ xenial main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ xenial-security main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ xenial-updates main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ xenial-backports main restricted universe multiverse
##测试版源
deb http://mirrors.aliyun.com/ubuntu/ xenial-proposed main restricted universe multiverse
# 源码
deb-src http://mirrors.aliyun.com/ubuntu/ xenial main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ xenial-security main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ xenial-updates main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ xenial-backports main restricted universe multiverse
##测试版源
deb-src http://mirrors.aliyun.com/ubuntu/ xenial-proposed main restricted universe multiverse
# Canonical 合作伙伴和附加
deb http://archive.canonical.com/ubuntu/ xenial partner
deb http://extras.ubuntu.com/ubuntu/ xenial main

• 下载nginx

sudo apt-get install nginx

docker设置

• 下载docker

sudo apt-get install docker.io

• 将当前用户加到docker用户组里

1. 安装docker后通常是有docker用户组，如果没有就新建用户组
sudo groupadd docker
2. 将当前用户加到docker组里
sudo gpasswd -a ${USER} docker
3. 重启docker服务
sudo service docker restart
4. 新建一个shell对话，因为用户组取的是缓存信息
command + t 喽

• 添加docker加速源

在/etc/docker目录下新建daemon.json，内容如下，
并将地址改为自己在https://dev.aliyun.com 中的加速链接
{

  "registry-mirrors": ["https://xxx.mirror.aliyuncs.com"]

}

• docker pull *

编辑器选择

当然都是个人观点。

• vue开发个人感觉vscode 配合vetur 非常好用
• react开发个人感觉webstorm更好用
• angular不敢多说
• 打开单文件或者经典项目，感觉sublime更快。