搭建前端开发环境

前端开发环境的搭建
环境搭建
发布于 2017-12-24
本开发环境是自己在工作中的环境，为了方便以后更换开发设备。留个笔记，顺便分享出来。

安装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更快。