右键Open with VSCode打开Vue3项目

之前看到一些同事能够对项目根目录进行右键打开项目到 Microsoft VS Code ,当时觉得挺不错的,于是乎今天自己折腾了一遍。

目录

1、创建vue3项目

2、更改注册表

# 打开注册表编辑器(Registry Editor)

# 导航到以下注册表路径

# 在左侧导航窗格中,右键单击 "shell" 键,并选择 "New" -> "Key"。为新建的键命名为 "Open with VSCode"(或者任何你喜欢的名称)

双击新建的键,在右侧窗格中创建一个字符串值,命名为 "Icon",然后将其值设置为 Visual Studio Code 的可执行文件路径,例如:

# 在 "Open with VSCode" 键下创建一个新的键,并将其命名为 "command"

# 双击 "command" 键,在右侧窗格中创建一个字符串值,命名为 "(默认)",然后将其值设置为

# 在项目根目录右键


1、创建vue3项目

如果你已经有项目了可以跳过。

# 进入D盘
D:
# 安装vue3
npm create vue@latest
# 一路回车
Vue.js - The Progressive JavaScript Framework√ 请输入项目名称: ... vue-project
√ 是否使用 TypeScript 语法? ... 否 / 是
√ 是否启用 JSX 支持? ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发? ... 否 / 是
√ 是否引入 Pinia 用于状态管理? ... 否 / 是
√ 是否引入 Vitest 用于单元测试? ... 否 / 是
√ 是否要引入一款端到端(End to End)测试工具? » 不需要
√ 是否引入 ESLint 用于代码质量检测? ... 否 / 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否 / 是正在初始化项目 D:\vue-project...项目初始化完成,可执行以下命令:cd vue-projectnpm installnpm run dev
# 进入项目目录
cd vue-project
# 安装依赖
npm i
# 运行项目
npm run dev
# 到浏览器打开VITE v5.2.12  ready in 662 ms➜  Local:   http://localhost:5173/➜  Network: use --host to expose➜  press h + enter to show help

2、更改注册表

# 打开注册表编辑器(Registry Editor)

  • 在 Windows 搜索框中键入 "regedit",然后按 Enter 打开注册表编辑器。

# 导航到以下注册表路径

HKEY_CLASSES_ROOT\Directory\Background\shell

如果不好找,请按照以下方式执行

a. 查询

b. 等待 

c. 得出结果

# 在左侧导航窗格中,右键单击 "shell" 键,并选择 "New" -> "Key"。为新建的键命名为 "Open with VSCode"(或者任何你喜欢的名称)

a. 新建项(Key)

双击新建的键,在右侧窗格中创建一个字符串值,命名为 "Icon",然后将其值设置为 Visual Studio Code 的可执行文件路径,例如:

"C:\Program Files\Microsoft VS Code\Code.exe"

a. 这里是示例你的vscode安装路径,你可以选择你的vscode右键查看“属性”,如

b.新建字符串值 

c. 命名Icon, 将vscode可执行应用目录拷贝到数值数据

# 在 "Open with VSCode" 键下创建一个新的键,并将其命名为 "command"

a.新建项(key)

# 双击 "command" 键,在右侧窗格中创建一个字符串值,命名为 "(默认)",然后将其值设置为

"C:\Program Files\Microsoft VS Code\Code.exe" "%V"

a. 新建字符串值(如果有,请不要新建,直接下一步)

b. 设置数值数据

c. 示例

这个值告诉 Windows 在右键单击文件夹时使用 Visual Studio Code 打开该文件夹。

# 在项目根目录右键


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

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

相关文章

前端_防抖节流

目录 一、防抖(debounce) 1.使用场景 2.js代码实现 3.lodash工具库使用 二、节流(throttle) 1.使用场景 2.js代码实现 3.lodash工具库使用 前端做项目,为了防止用户因为网络不好数据响应慢,导致进行…

信不信,马上教会你Purple Pi OH开发板之ADB常用命令

开源鸿蒙硬件方案领跑者 触觉智能 本文适用于在Purple Pi OH开发板进行分区镜像烧录。触觉智能的Purple Pi OH鸿蒙开源主板,是华为Laval官方社区主荐的一款鸿蒙开发主板。 该主板主要针对学生党,极客,工程师,极大降低了开源鸿蒙开…

C#-Switch判断分支语句

Switch判断分支语句 作用 : 让顺序执行的代码 产生分支 判断变量和常量相同时 才会执行 用法: Switch后面的变量值与case后面的常量相同时,case内的代码才会执行,如果都不满足则执行default内的代码 break的作用: 跳出 不会再执行判断 …

SQL学习小记(五)解决python连接Oracle数据库出现的问题

python运行时出现错误DPI-1047: Cannot locate a 64-bit Oracle Client library: “The specified module could not be 解决python连接Oracle数据库出现的问题 1. 配置本地Oracle的path2. python10的详细安装过程2.1. python10下载2.2. python10安装2.3.额外操作 3. python 安…

纷享销客BI典型场景案例解析

本章以具体案例来说明纷享销客一体化BI智能分析平台为企业在实际使用过程中带来的价值。 1)场景一:销售经理想要在周会上关注各销售人员的客户及订单情况,并在每周一上午9点可以把上周的整体情况周期性的将报表推送给相关销售人员。 具体图表展示样式及…

BIO 探究二

接上文 BIO 初探究 文章目录 前言一、使用netty二、nio 客户端 与 bio 服务端,bio 服务端 与 nio 客户端总结# 未完待续 前言 提示:验证阻塞到底阻塞在什么地方 提示:以下是本篇文章正文内容,下面案例可供参考 一、使用netty 上…

当企业越来越难做,精益变革能带来什么改变?

随着技术的不断进步和消费者需求的日益多样化,传统的管理模式和生产方式已经难以适应时代的发展。越来越多的企业开始陷入困境,难以在激烈的市场竞争中立足。然而,正是在这样的背景下,精益变革应运而生,为企业带来了前…

使用html2canvas和jspdf导出pdf包含跨页以及页脚

首先要下载两个文件,一个为html2canvas.min.js,另一个是jspdf.umd.min.js这两个文件分别下载的地址我也附录上,都在官网git: html2canvas.min.js: https://html2canvas.hertzen.com/dist/html2canvas.min.js jspdf.umd.min.js: …

代码随想录算法训练营第一天| 704. 二分查找、27. 移除元素

一、704. 二分查找 题目链接:https://leetcode.cn/problems/binary-search/description/ 文章讲解:https://programmercarl.com/0704.%E4%BA%8C%E5%88%86%E6%9F%A5%E6%89%BE.html 视频讲解:https://www.bilibili.com/video/BV1fA4y1o715 1.…

前端实现大文件分片并行上传、断点续传、秒传(完整解析)

一、总体流程图 二、具体步骤 简单理解:前端先将文件切割多份,在进行上传,由后端进行切片合并操作。 具体逻辑: 1. 前端选中上传文件(如果是批量上传就把选中的文件存入选中文件列表数组中,后续在遍历上…

【Vue3-Element-Admin 动态路由】涉及到的配置

Vue3-Element-Admin 动态路由 涉及到的配置 0. Vue3-Element-Admin 项目地址1. router/index.ts2. Mock接口模拟数据3. store/permission4. api/menu5. plugins/permission 这篇文章讲的主要是 Vue3-Element-Admin 差不多内置的动态路由配置 (根据后端接口渲染) 先把开发环境&a…

纷享销客一体化BI智能分析平台介绍

纷享销客BI智能分析平台是一款自助式敏捷BI,无缝继承纷享销客PaaS平台的对象数据、对象关系、功能权限体系与数据权限体系,用户通过简单的拖拽点选即可实现灵活定义分析模型和可视化自助分析,零技术门槛快速上手,面向全员各类角色…

深度学习 --- stanford cs231 编程作业(assignment1,Q2: SVM分类器)

stanford cs231 编程作业之SVM分类器 写在最前面: 深度学习,或者是广义上的任何学习,都是“行千里路”胜过“读万卷书”的学识。这两天光是学了斯坦福cs231n的一些基础理论,越往后学越觉得没什么。但听的云里雾里的地方也越来越多…

【学习笔记】MySQL(Ⅰ)

MySQL(Ⅰ) 1、 介绍 1.1、概述 1.2、MySQL 的优缺点 1.4、关系型数据库模型2、 基础篇 —— SQL(结构化查询语言) 2.1、通用语法 2.2、SQL 语句的分类 2.3、DDL 语句 2.3.1 数据库结构相关的语法 2.3.2 数据表相关的语…

Java实现俄罗斯方块游戏源代码(启动即可玩)

这是一个用Java Swing实现的俄罗斯方块游戏,具有经典的游戏机制和图形界面。游戏中,玩家需要旋转和移动不断下落的方块,使其填满一行来消除该行并得分。 该项目适合学习Java GUI编程、游戏开发基础以及面向对象编程(OOP&#xff0…

【Git】分支管理 -- 详解

一、理解分支 分支就是科幻电影里面的平行宇宙,当你正在电脑前努力学习 C 的时候,另一个你正在另一个平行宇宙里努力学习 JAVA。 如果两个平行宇宙互不干扰,那对现在的你也没啥影响。不过,在某个时间点,两个平行宇宙…

【Angew】:催化材料中贵金属的最大效率-原子分散表面铂

图形摘要:通过在纳米结构 CeO2的 {100}“纳米袋”中稳定表面 Pt2物种(见图) ,可以制备具有最高贵金属分散度的Pt-CeO2材料。此类材料可以大大减少催化剂所需的贵金属量。 摘要:贵金属Pt是催化领域用途最广泛的元素&am…

【JS】JS高阶函数——reduce()用法详解总结。你不得不知道的数组reduce高级用法!

reduce用法详解总结 1.reduce语法说明1.1 方法介绍1.2 参数说明1.3 执行机制1.4 简单示例:数组求和 2. 高级用法2.1 权重求和2.2 代替some和every2.3 数组扁平2.4 数组去重2.5 字符统计和单词统计2.6 数组成员特性分组2.7 数字千分化 reduce函数是一个神奇的函数 1.…

C++ Qt实现http url启动本地应用程序

更多Qt文章,请访问《深入浅出C++ Qt开发技术专栏》:https://blog.csdn.net/yao_hou/category_9276099.html 我们在使用腾讯会议时经常会通过http链接打开本地的腾讯会议,例如下图: 打开会议发起人给的链接,会出现一个网页,然后点击加入会议就会启动本地的腾讯会议,本篇…

msvcp140_1.dll丢失怎么修复,这四种修复方法可轻松搞定

在计算机使用过程中,我们经常会遇到一些错误提示,其中之一就是“msvcp140_1.dll丢失”。这个错误通常会导致某些应用程序无法正常运行。为了解决这个问题,本文将介绍5种常见的解决方法,帮助大家快速恢复应用程序的正常运行。 一&a…