标题基于mac下前端开发基本环境搭建 VSCode + git + node.js + npm+ webpack + vue-cli4 + yarn
如何从零开始搭建前端开发环境
MAC环境
首先终端输入sudo spctl --master-disable命令来开启任何来源。如果不开启这个会导致很多软件安装不了。
安装node环境和配置cnpm和tnpm方便安装依赖。因为原版npm因网络问题可能会导致各种报错。mac在安装node的时候会自动安装git,因此可以省去这一步。
验证
确保电脑环境干净,处于未安装node和npm状态
终端命令行输入:
node -v
//command not found
npm -v
//command not found
卸载
终端命令行输入:
sudo npm uninstall npm -g
sudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*
sudo rm -rf /usr/local/include/node /Users/$USER/.npm
sudo rm /usr/local/bin/node
sudo rm /usr/local/share/man/man1/node.1
sudo rm /usr/local/lib/dtrace/node.d
本地清除原有缓存
终端命令行输入:
npm cache verify # 清除npm本地缓存
npm cache clean —force. # 清除npm本地缓存
yarn cache clean # yarn 清除缓存
第一步:安装编辑器vscode
(有很多种编辑器,自己选择喜欢的,sublime,vscode,hbuilder,pychram…)
vscode下载传送门
第二步:安装git
git下载传送门
git安装教程
1.下载好git包后,双击打开,按照提示进行下一步操作,一直到安装完成。
2.打开终端输入git --version
第三步:安装node.js和npm和webpack
最新的Nodejs安装包已经包含了npm,所以下载最新的nodejs就行,安装过程基本上点next就可以。
安装完成后,在终端输入node --version
,回车,输出版本号即安装成功,输入npm --version,输出版本号即安装成功。
node.js下载传送门
安装webpack:
- 终端输入
npm install --save-dev webpack
- 或者指定安装版本
npm install --save-dev webpack@<version>
如果使用的webpack 4+ 版本,还需要安装 cli,webpack 4将 cli 分离了。
安装webpack-cli: 终端输入npm install --save-dev webpack-cli
第四步:全局安装vue-cli4.0脚手架工具
如果之前有安装过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
第五步:安装yarn
打开终端,输入sudo npm install -g yarn
(如果是windows的话,输入npm install -g yarn
)
检验是否安装完成:在终端输入yarn --version
,如下图所示出现版本号即为安装成功啦。
更多推荐
Mac-搭建前端开发环境
发布评论