【前端开发工具】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:计算机的心脏 内存:数据的临时居所 存储设备:数据的长期仓库 输入输出设备:与计算机的…

大模型日报2024-06-20

大模型日报 2024-06-20 大模型资讯 大模型产品 Genspark:AI智能搜索引擎 摘要: Genspark是一款AI智能引擎,专用AI代理生成无偏见的Sparkpages,提供高价值信息,节省用户时间。 AI标志动画生成工具 摘要: 使用AI技术轻松将静态标志变…

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

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

BUG: gradio RuntimeError: async generator raised StopAsyncIteration

BUG: gradio RuntimeError: async generator raised StopAsyncIteration 环境 gradio 4.20.0详情 在使用gradio编写大模型可视化demo的时候,大模型正常输出,但gradio弹出此错误。 经过排除,发现是返回方式的问题&…

【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…

MySQL中动态权限和角色管理权限的异同?

MySQL中的动态权限与角色管理权限是两个不同的概念,它们在权限管理方面各有特点和作用: 动态权限(Dynamic Privileges) 定义与特性:动态权限是在MySQL服务器运行时定义和注册的权限,与之相对的是静态权限&…

编译 CUDA 程序的基本知识和步骤

基本工具 NVCC(NVIDIA CUDA Compiler): nvcc 是 NVIDIA 提供的 CUDA 编译器,用于将 CUDA 源代码(.cu 文件)编译成可执行文件或库。它可以处理 CUDA 和主机代码(例如 C)的混合编译。nvcc 调用底层…

关于Threejs的使用二

Threejs之前是没有使用过的,由于项目需要最近一段时间一直在研究; 关于绘制字体: 有两种方案: 1.可以通过页面添加标签化元素进行插入到页面中: //創建元素const descriptionElement document.createElement(div);de…

求最小生成树的新算法

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

docker容器之间ip能ping通,但是端口访问不了

docker容器之间ip能ping通,但是端口访问不了 curl: (7) Failed to connect to 172.17.0.5 port 80: No route to host原因: 可能是因为启动docker前,服务器防火墙是关闭的,而启动之后修改了防火墙规则 解决方法: 重启…

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

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

java通过jts获取点到线的垂足点

在Java中,可以使用JTS(Java Topology Suite)库来获取点到线段的垂足点。以下是一个简单的示例代码,展示了如何使用JTS获取点到线段的垂足点: 首先,确保你的项目中包含了JTS库。 import org.locationtech.j…

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…

移动应用开发-第8章广播机制

广播是一种运用在组件之间传递消息的机制。如果要接收并过滤广播中的信息,则需要使用BroadcastRecciver(广播接收者)。 8.1广播机制的概述 Android中的广播机制更加灵活,因为Android中每个应用程序都可以根据自己的需要对广播进…

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

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

scp 命令如何不用输入密码实现拷贝

scp 命令如何不用输入密码实现拷贝 前言sshpass 安装sshpass 参数场景测试 前言 个人内网环境使用,不考虑安全问题。此处,使用 sshpass 。 sshpass 是一个用来非交互式地提供密码给 ssh 的工具。这对于自动化脚本非常有用,尤其是当你需要在…

Object类hashCode方法和equals方法源码

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