基于mac下前端开发基本环境搭建 VSCode + git + node.js + npm+ webpack + vue-cli4 + nrm + yarn

笔记一篇,备查(PS:一个教程搬运工)。

第一步:安装编辑器vscode

(有很多种编辑器,自己选择喜欢的,sublime,vscode,hbuilder,pychram…)
vscode下载传送门
此处搬运大神写的安装配置教程:
vscode安装教程
在vscode里安装一个插件Debugger for Chrome还有Vue,还有一个是在命令面板中安装一个和node.js有关的shell,名字暂时想不起来了。(后续补上)

第二步:安装git

git下载传送门
此处搬运大神写的详细安装配置教程:
git安装教程
1.下载好git包后,双击打开,按照提示进行下一步操作,一直到安装完成。
2.打开终端输入git --version
结果如下图出现版本号即为安装成功了。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200428201556775.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk4Njk1NQ==,size_16,color_FFFFFF,t_70
Mac关于git使用教程传送门

第三步:安装node.js和npm和webpack

ps:最新的Nodejs安装包已经包含了npm,所以下载最新的nodejs就行,安装过程基本上点next就可以。
安装完成后,在终端输入node --version node --version,回车,输出版本号即安装成功,输入npm --version,输出版本号即安装成功。如下图所示:
在这里插入图片描述
附上下载地址和安装教程
node.js下载传送门
此处搬运大神写的node.js安装配置教程地址:
node.js安装配置教程

安装webpack: 终端输入npm install --save-dev webpack或者指定安装版本npm install --save-dev webpack@<version>

(ps:如果使用的webpack 4+ 版本,还需要安装 cli,webpack 4将 cli 分离了。)

安装webpack-cli: 终端输入npm install --save-dev webpack-cli

此处搬运大神写的webpack安装教程地址:
webpack介绍及详细安装教程传送门

第四步:全局安装vue-cli4.0脚手架工具

Ps:新手遇到了一个坑,如果之前有安装过vue-cli,要先把原来的卸载掉,再执行一遍安装。

卸载命令sudo npm uninstall vue-cli -g(如果是windows 的话,输入npm uninstall vue-cli -g)
安装命令:然后输入 sudo npm install -g @vue/cli,安装vue-cli4.0版本(如果是windows的话,输入npm install @vue/cli -g)
如下图所示:(耐心等待安装完成)在这里插入图片描述
检验是否安装完成:在终端输入vue --version,如下图所示出现版本号即为安装成功啦。
在这里插入图片描述
此处搬运大神写的vue-cli4安装配置教程地址:
vue-cli4安装配置教程

第五步:安装nrm

打开终端,输入sudo npm install -g nrm(如果是windows的话,输入npm install -g nrm)

检验是否安装完成:在终端输入nrm --version,如下图所示出现版本号即为安装成功啦。
在这里插入图片描述
第六步:安装yarn
打开终端,输入sudo npm install -g yarn(如果是windows的话,输入npm install -g yarn)

检验是否安装完成:在终端输入yarn --version,如下图所示出现版本号即为安装成功啦。
在这里插入图片描述
至此前端开发的环境就安装好啦。

  • 2
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值