文章目录
- 一、前言
- 二、下载
- 三、安装
- 四、配置
- 五、使用
- 5.1 导入项目
- 5.2 本地运行项目
- 5.3 修改界面文案,验证效果
- 5.4 添加日志打印
- 5.5 代码调试
- 5.6 代码提交到Git仓库
- 六、总结
一、前言
本文介绍一下在前端vue项目中,VS Code的安装和配置。
-
什么是VS Code?
Visual Studio Code(以下简称VS Code)是微软提供的一个轻量且强大的跨平台开源代码编辑器(IDE),支持Windows,OS
X和Linux。内置JavaScript、TypeScript和Node.js支持,而且拥有丰富的插件生态系统,可通过安装插件来支持
C++,C#,Java,Python,PHP,Go等其他语言。 -
官网地址:
https://code.visualstudio.com/
二、下载
环境要求:windows11、vscode1.90.1
首先,下载VS Code安装包。安装包已分享到百度网盘中,为了避免安装的版本跟本文中介绍的版本不一致,推荐使用百度网盘下载。
百度网盘下载链接:https://pan.baidu.com/s/1Nns0N3pPPBDppVrqdaIelA?pwd=67ut
提取码:67ut
官网下载地址:https://code.visualstudio.com/Download
三、安装
下载并解压缩完成后,点击开始安装。(PS:按照步骤一步一步安装即可)
之后,选择安装路径,点击下一步;
之后,使用默认,点击下一步;
之后,勾选“创建桌面快捷方式”,点击下一步;
之后,点击安装;
之后,显示安装进度条;
之后,点击完成,完成安装;
至此,VS Code安装完成。
四、配置
安装完成后,再安装一些插件;
点击扩展按钮,去应用商店,查找插件并进行安装;
之后,安装如图的插件;
至此,项目需要的插件安装完成了。
五、使用
插件安装后,下面开始使用;
5.1 导入项目
首先,打开文件》打开文件夹,导入工程项目。
导入后,在资源管理器中,可以查看导入的项目代码;
5.2 本地运行项目
项目导入后,开始本地运行项目;
首先,打开终端》新建终端;
之后,输入“npm install” 命令,安装项目的依赖包;
提示错误信息,权限不够。之后,以管理员身份,打开系统命令行窗口;
进入项目目录下,输入“npm install” 命令,安装项目的依赖包;
项目依赖包安装完成后,再返回到VS Code的终端界面,输入"npm run dev",运行前端工程;
5.3 修改界面文案,验证效果
前端工程本地运行成功后,下面开始进行代码调试。
首先,修改界面文案信息,比如“岗位编码”修改为“岗位编码测试”;
之后,在浏览器中验证查看界面文案是否修改成功;
5.4 添加日志打印
之后,介绍如何在代码中打印输出日志信息。
首先,在需要打印日志的JS代码中添加“console.log()”,输出查询条件日志信息;
之后,在浏览器中,输出查询条件,点击查询;
之后,浏览器开发者工具的控制台,可以查看日志信息;
5.5 代码调试
之后,介绍如何添加断点,调试代码。
首先,在浏览器开发者工具的源代码中,添加断点。之后,当代码执行到断点处,右键选中变量,查看变量值。
5.6 代码提交到Git仓库
之后,介绍代码编写完成后,如何提交到Git代码仓库;
首先,点击源代码管理按钮,查看需要提交的代码文件;确认之后,点击提交;
之后,填写代码提交备注,点击提交;
之后,点击同步更改,把代码同步到Git仓库中;
六、总结
以上介绍了在前端VUE项目中,VS Code的安装和使用。希望对大家有帮助,谢谢关注。
如果您对文章中内容有疑问,欢迎在评论区进行留言,我会尽量抽时间给您回复。如果文章对您有帮助,欢迎点赞、收藏。您的点赞,是对我最大的支持和鼓励,谢谢 :-)