前端开发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.程序员工具箱大全

在线工具 - 你的工具箱

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

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

相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰8 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom10 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom10 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试