【前端开发工具】VS Code安装和使用

文章目录

    • 一、前言
    • 二、下载
    • 三、安装
    • 四、配置
    • 五、使用
        • 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的安装和使用。希望对大家有帮助,谢谢关注。

如果您对文章中内容有疑问,欢迎在评论区进行留言,我会尽量抽时间给您回复。如果文章对您有帮助,欢迎点赞、收藏。您的点赞,是对我最大的支持和鼓励,谢谢 :-)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/30870.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【干货分享】25地学考研推免夏令营汇总表

​ 25考研学子们,考研准备要赶早。 小编给大家整合准备了25地信考研夏令营时间信息表,需要的宝子收藏起来。 ​ 话不多说,需要的小伙伴直接评论区留言 25地信考研择校信息表:

IT入门知识第一部分《IT基础知识》(1/10)

目录 IT入门知识第一部分《IT基础知识》(1/10) 1.引言 2.第一部分:IT基础知识 2.1 计算机硬件 CPU:计算机的心脏 内存:数据的临时居所 存储设备:数据的长期仓库 输入输出设备:与计算机的…

[Mysql] 的基础知识和sql 语句.教你速成(上)——逻辑清晰,涵盖完整

目录 前言 上篇的内容概况 下篇的内容概况 数据库的分类 关系型数据库 常见的关系型数据库系统 非关系型数据库 1. 键值对数据库(Key-Value Stores) 特点: 常见的键值对数据库: 2. 文档数据库(Document Store…

【React】Axios请求头注入token

业务背景: Token作为用户的数据标识,在接口层面起到了接口权限控制的作用,也就是说后端有很多接口都需要通过查看当前请求头信息中是否含有token数据,来决定是否正常返回数据 // 添加请求拦截器 request.interceptors.request.use(config …

填坑-celery正常启动后能收到任务但不执行任务的解决办法

场景 Flask开发中用celery 6正常启动后能收到任务但不执行任务的解决办法,也没有错误提示…… INFO/MainProcess] Task app.add_together[ce406ed8-71b3-49e6-8556-f44bfe66549c] received [2024-06-20 19:38:10,632: INFO/SpawnPoolWorker-36] child process 2244…

求最小生成树的新算法

不管 prim 算法还是 kruskal 算法都基于 “当前可见最短边” 作贪心策略,但这并不适合分布式并行操作,比方说所有节点一起构建最小生成树,这些算法都显得同步开销过大,甚至导出错误的结果。 最近研究并构建最大流多路径传输协议的…

如何获得一个Oracle 23ai数据库(vagrant box)

准确的说,是Oracle 23ai Free Developer版,因为企业版目前只在云上(OCI和Azure)和ECC上提供。 前面我博客介绍了3种方法: Virtual ApplianceRPM安装Docker 今天介绍最近新出的一种方法,也是我最为推荐的…

Debugger的使用

断点调试 1.打断点 2.以debug模式运行 3.流程控制

SQL注入-sqlmap使用

sqlmap简介 一款自动化的SQL注入工具,其主要功能是扫描,发现并利用给定的URL的SQL注入漏洞,目前支持的数据库是MySQL, Oracle, PostgreSQL, Microsoft SQL Server, Microsoft Access, IBM DB2, SQLite, Firebird, Sybase和SAP MaxDB Sqlma…

图像处理:Python使用OpenCV 减少图片噪音

文章目录 1. 均值滤波 (Mean Filtering)2. 高斯滤波 (Gaussian Filtering)3. 中值滤波 (Median Filtering)4.代码实现示例5.效果展示 在图像处理中,均值滤波、高斯滤波和中值滤波是三种常用的降噪方法。它们的实现原理各有不同: 1. 均值滤波 (Mean Filte…

Object类hashCode方法和equals方法源码

hashCode方法 顶级类Object里面的方法,所有类都是继承Object的,返回值int类型 根据一定的hash规则(存储地址、字段、或者长度等),映射成一个数值,即散列值 public static int hashCode(Object a[]) {if (a…

wps要会员才能把pdf分开,这不纯属智商税吗

我有一个文档 然后 我给你们写好了一个代码 from PyPDF2 import PdfReader, PdfWriterdef split_pdf(file_path, ranges, output_names):# Open the input PDF filewith open(file_path, rb) as pdf_file:reader = PdfReader(pdf_file)total_pages = len(reader.pages)if len…

Cookie、Session、Token的关系和区别

关系 Session与Cookie:Session通常依赖于Cookie来工作。当服务器为客户端创建一个Session时,它会在服务器上存储与客户端相关的信息,并将一个唯一的SessionID通过Cookie发送给客户端。客户端在后续的请求中会携带这个Cookie(包含…

北航数据结构与程序设计查找与排序编程题

查找与排序编程题 单词查找(查找——基本题)排座位(简)a 单词查找(查找——基本题) 【问题描述】 从标准输入中读入一个英文单词及查找方式,在一个给定的英文常用单词字典文件dictionary3000.…

如何使用SQL工具批量执行SQL文件?(以MySQL和SQLynx为例)

目录 1. 配置MySQL数据源 2. 打开 SQL 文件 3. 执行 SQL 文件 4. 检查执行结果 5. SQL文件示例 6. 注意事项 7. 总结 在现代数据库管理和操作中,批量执行 SQL 文件在 MySQL 中显现出其巨大的价值和不可替代的作用。通过将多个 SQL 语句集成在一个文件中进行批…

MySQL安装教程,包含root账户密码的修改(绿色版安装)---超简单好用

1、下载(mysql-8.0.27-winx64) 2、下载地址:https://dev.mysql.com/downloads/mysql/ 3、已经将 mysql-8.0.27-winx64 文件放在了文章最后,有需要的自取(解压配置即可用)。 4、配置环境变量: 右键点击我的电脑->属性->高级系统设置->高级->环境变量->系…

FineReport报表

一、报表类型 模板设计是 FineReport 学习过程中的主要难题所在,FineReport 模板设计主要包括普通报表、聚合报表、决策报表三种设计类型。 官网: ‘‘报表类型简介- FineReport帮助文档 - 全面的报表使用教程和学习资料 ‘’ 二、聚合报表 2-1 介绍…

爬虫逆向实战(41)-某花顺登陆(Cookie、MD5、SHA256)

一、数据接口分析 主页地址:某花顺 1、抓包 通过抓包可以发现在登陆时,网站首先请求了pwdRangeCalcRegular.json、getGS两个接口,接着请求dologinreturnjson2进行登陆,但是此接口会返回请先完成滑块验证码校验的响应。然后网站…

智慧公厕的五大好处:深圳光明源全面解析

智慧公厕通过集成现代智能技术和优化管理,显著提升了公共卫生设施的使用体验和管理效率。以下是智慧公厕的五大好处: 提升卫生条件: 自动感应设备:智能感应水龙头、洗手液机和干手器等设备减少了用户对设备的直接接触&#xff0…

【嵌入式开发】STM32+USB的快速开发

目录 一、概述 二、STM32+USB开发流程 2.1 建立新的工程 2.2 系统配置 2.3 时钟配置 2.4 操作系统 2.5 选择USB配置 2.6 在USB_HOST中选择支持的子类(class) 2.7 Clock 配置 三、注意事项 3.1 应用驱动配置 3.2 上电调试基础工作 一、概述 USB作为大家耳熟能详的…