mac前端开发环境的搭建

现在前端规模越来越庞大，各种新东西层出不穷。以前随手拿个编辑器就能写页面的时代到现在什么预处理啦、编译啦、模块啦、打包啦、环境啦一堆。各种框架和设计模式层出不穷，MMP根本学不动啦！！！

来到腾讯以后更换了新电脑。每次换新电脑都得配置一大堆东西，所以这篇文章就是记录一下搭建前端开发环境所需要的大致一些步骤。

 

MAC环境

首先终端输入sudo spctl --master-disable命令来开启任何来源。如果不开启这个会导致很多软件安装不了。

安装node环境和配置cnpm和tnpm方便安装依赖。因为原版npm因网络问题可能会导致各种报错。mac在安装node的时候会自动安装git，因此可以省去这一步。

 

Nodejs地址

https://nodejs.org/zh-cn/

cnpm安装淘宝镜像

终端输入sudo npm install -g cnpm --registry=https://registry.npm.taobao.org安装cnpm

 

MAC端必备开发工具安装

mac命令大全https://www.jianshu.com/p/d9ec00d28237

mac软件http://xclient.info/

 

Charles//抓包工具

Cornerstone//svn

Vscode//IDE

微信开发者工具

 

vscode必备插件清单:

wpy-beautify

beautify

bracket pair color//括号颜色

Atom One Dark Theme/One Dark Pro//主题

vetur//Vue语法高亮

open in browser//浏览器打开页面

path intellisense//路径提示

ESLint//风格检查

Git History Diff//git提交记录

 

Vue相关

sudo cnpm install vue-cli -g

安装Vue脚手架

vue init webpack + name

创建一个新的Vue项目

 

• scss

cnpm install --save-dev sass-loader

cnpm install --save-dev node-sass

 

修改文件build/webpack.base.conf.js

webpack配置里面加上scss的loader

{

  test: /\.scss$/,

  loaders: ['style', 'css', 'sass']

}

 

• axios

cnpm install axios

axios可以配合安装qs来序列化参数

 

 

网络代理相关

修改本地hosts文件

打开命令行输入sodu vi /etc/hosts

输入i进入编辑模式，修改完成后按esc，输入:wq保存