前端开发vue项目的从0到1的配置流程

基于每次换电脑,或者重做系统后,需要重新配置相关开发环境,每次都网上找各种教程,这里找一点,那里找一点,很麻烦,所以决定自己整理下相关的配置流程。

一、安装nvm及node

nvm是node版本管理工具,可以方便快速的下载、切换、管理node版本。具体操作网址:

NVM的安装使用与配置(node, npm, yarn)_nvm安装教程-CSDN博客

常用命令:

查看当前node版本号:node -v;

查看当前已经安装的node版本列表:nvm ls

切换node版本:nvm use 版本号;

二、安装nrm

nrm是管理npm镜像源的工具,可以方便快速的切换npm的镜像源,从而提高安装包的速度。

(npm本身是国外站点,所以下载的比较慢,有时候还会下载失败。国内推荐使用taobao镜像源安装包,有些公司也会有自己的镜像源)

常用命令:

下载nrm: npm install nrm -g ;

查看nrm是否安装成功:nrm -V(有版本即为安装成功)

查看nrm可用镜像源:nrm ls;

切换包镜像源:nrm use 镜像源名称

测试镜像源相应速度:nrm test 镜像源名称

三、安装git工具

git是我们代码拉取,上传、推送、克隆所需要的工具。具体操作网址:

Git安装教程(超详细)-CSDN博客

注: 下载git时,不要用浏览器自带的下载工具下载,会非常的慢,推荐使用迅雷进行下载。

使用git需要注册一个github账号或者gitee账号,(具体注册步骤参考百度即可);首次克隆代码需要配置账号

具体配置账号步骤:

1.在git命令行输入git config --global user.name "Your Name",Your Name是自己的用户名

2.继续输入git config --global user.email "[email protected]" 引号内是自己的邮箱

3.通过git config --global --list查看是否配置成功,若成功会显示配置好的用户名和邮箱。

四、安装编译工具(VScode)

VScode的安装自行百度搜索安装即可。

五、安装VScode中常用的前端插件

插件安装顺序无所谓,部分插件看个人喜好决定是否安装。

建议必装插件:

  1. Chinese (Simplified) 汉化

将VScode界面转化为中文界面的插件(英语好的和头铁的请无视)

​编辑

重启vscode即可生效,如遇不生效,可以参考下面步骤:

打开VSCode,您会看到界面是英文的。

按下键盘上的快捷键Ctrl+Shift+P,这会在顶部的搜索框中打开一个命令行。

在搜索框中输入configure display language,然后按回车键。

这将打开一个配置文件,在其中找到locale选项,并将其值改为zh-cn

保存设置(Ctrl+S),然后重启VSCode。

2.Auto Rename Tag

修改标签时会自动改变另一个对应的标签,比较方便

​编辑

3.open in browser

需要浏览器浏览代码时使用该插件,安装后,在代码页面鼠标右键(通常是html页面),在菜单栏中有对应的选项。

​编辑

4.live sever

和上面一个插件类似,优点是当代码更新保存后,不需要手动刷新页面,会自动更新页面内容。

​编辑

推荐安装插件:

  1. vscode-icons

可以给项目文件和文件夹添加对应的图标,可以更好的区分。

​编辑

2.git-commit-plugin

可以在项目中直接通过鼠标点击实现代码的拉取,推送,合并等操作,不需要在手动写git命令

插件安装好以后,会在这里多出一个猫头图标,点击图标即可操作。

​编辑

​编辑

3.HTML CSS Support

智能提示css类名及id

​编辑

4.Vetur

开发vue2项目必备,语法检查,语法高亮,代码补全等。

​编辑

5.Volar

开发vue3项目必备,作用等价于Vetur(Volar和Vetur插件互相冲突,开发Vue3项目请禁用Vetur插件)

​编辑

六、前端常用工具及常用网址

1.截图工具Snipaste。

一款比较简易的截图工具,具体安装直接参考百度即可。安装以后双击打开,看到桌面右下角中有个这个图标即为开启成功。

​编辑

常用按键:F1:截图。截图后下方会出现一个菜单栏,里面有各种功能,按需使用即可。

2.菜鸟教程的Array对象

JavaScript Array 对象 | 菜鸟教程

这里含有常用的数组方法,filter,indexOf,map等等。之所以不把菜鸟教程的首页网址放这里,是因为这个网址可以跳转首页,但是在首页我每次都找不到这个Array对象网址,所以直接贴这个地址,其他教程可以直接跳转菜鸟教程首页查看。

3.JSON在线格式化网站

JSON在线 | JSON解析格式化---SO JSON在线工具

其实自己百度也可以找到不少在线格式化工具,这里我也是直接百度搜的。

4.程序员工具箱大全

在线工具 - 你的工具箱

这里有非常多的常用在线工具,结合自己需求使用即可。

(如有描述不准确等问题,欢迎大家任意指正)

相关推荐
烛阴12 分钟前
bignumber.js深度解析:驾驭任意精度计算的终极武器
前端·javascript·后端
计蒙不吃鱼20 分钟前
一篇文章实现Android图片拼接并保存至相册
android·java·前端
全职计算机毕业设计41 分钟前
基于Java Web的校园失物招领平台设计与实现
java·开发语言·前端
啊~哈1 小时前
vue3+elementplus表格表头加图标及文字提示
前端·javascript·vue.js
小小小小宇2 小时前
前端小tips
前端
小小小小宇2 小时前
二维数组按顺时针螺旋顺序
前端
安木夕2 小时前
C#-Visual Studio宇宙第一IDE使用实践
前端·c#·.net
努力敲代码呀~2 小时前
前端高频面试题2:浏览器/计算机网络
前端·计算机网络·html
高山我梦口香糖2 小时前
[electron]预脚本不显示内联script
前端·javascript·electron
神探小白牙2 小时前
vue-video-player视频保活成功确无法推送问题
前端·vue.js·音视频