笔记一篇,备查(PS:一个教程搬运工)。
第一步:安装编辑器vscode
(有很多种编辑器,自己选择喜欢的,sublime,vscode,hbuilder,pychram…)
vscode下载传送门
此处搬运大神写的安装配置教程:
vscode安装教程
在vscode里安装一个插件Debugger for Chrome
还有Vue
,还有一个是在命令面板中安装一个和node.js有关的shell,名字暂时想不起来了。(后续补上)
第二步:安装git
git下载传送门
此处搬运大神写的详细安装配置教程:
git安装教程
1.下载好git包后,双击打开,按照提示进行下一步操作,一直到安装完成。
2.打开终端输入git --version
结果如下图出现版本号即为安装成功了。
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
,如下图所示出现版本号即为安装成功啦。
至此前端开发的环境就安装好啦。