【操作宝典】VSCode解锁指南:释放潜能的详细教程!

目录


📖前言

🚀 1 配置node.js

🚀2. 使用脚本测试vue项目

🚀3. VSCode运行vue

🚀4. VSCode引入elementUI

🌟4.1 显示OPENSSL错误


📖前言

Visual Studio Code(简称VSCode)是由Microsoft开发的一款免费、轻量级、开源的代码编辑器。以下是VSCode的一些主要特点:

  1. 跨平台性: VSCode支持Windows、macOS和Linux操作系统,确保开发者在不同平台上享有一致的开发体验。

  2. 轻量高效: 作为一款轻量级编辑器,VSCode启动迅速,占用系统资源较少,使得开发者能够快速高效地进行代码编辑和开发工作。

  3. 强大的代码编辑功能: 提供智能感知、代码补全、实时错误检测等功能,支持多种编程语言,使得编写和维护代码变得更加容易。

  4. 丰富的扩展生态系统: VSCode拥有庞大的扩展市场,开发者可以根据自己的需求安装各种插件,从而定制编辑器以满足特定的开发需求。

  5. 集成调试功能: 内置强大的调试器,支持多种语言的调试,使开发者能够轻松地进行代码调试和故障排除。

  6. Git集成: 提供了直观的Git集成,包括版本控制、分支管理等功能,方便开发者协同工作和进行版本管理。

  7. 内置终端: 集成了内置终端,使得开发者可以在编辑器中执行命令,而无需切换到外部终端窗口。

  8. 主题和自定义性: 提供多种主题选择,同时支持用户定制主题,使得编辑器外观能够满足个性化需求。

VSCode以其轻量高效、丰富的扩展生态系统和强大的代码编辑功能成为一款备受欢迎的代码编辑器。无论是前端开发、后端开发还是其他领域,VSCode都为开发者提供了灵活而强大的工具支持。

🚀 1 配置node.js

下载node.js  或者去官网下载:节点.js (nodejs.org)

安装完成后用node --v命令检查,显示了版本号就说明安装成功了。

现在node.js安装包自带了npm,但安装时不会自动给npm配置全局安装包路径的环境变量(不配的话运行js程序时可能会报找不到包的错误)。先用npm list -g命令显示出全局安装包路径,然后在系统环境变量中添加一个NODE_PATH变量把这个路径添加进去就行了

检验和后续执行指令

npm -v

node -v

npm install webpack -g

npm install vue-cli -g

🚀2. 使用脚本测试vue项目

比如我在E盘创建文件夹:vuetest01

提前修改下镜像,更快

npm config set registry https://registry.npm.taobao.org

查看是否安装成功  npm config get registry

终端输入:vue create vue01

选【vue 3】自定义

运行如下

🚀3. VSCode运行vue

cd 到vue项目

打开终端输入如下:

运行结果

🚀4. VSCode引入elementUI

上述步骤在终端Ctrl+C强制中断后,

输入:    npm i element-ui -S
 

在main.js文件头部加上

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

后续代码加上   Vue.use(ElementUI)

p4.引入elementUI_哔哩哔哩_bilibili

🌟4.1 显示OPENSSL错误
$env:NODE_OPTIONS="--openssl-legacy-provider" 
或
set NODE_OPTIONS=--openssl-legacy-provider
 
补充:
在终端输入一次只能本次生效,
如果想永久生效可以在 package.json 文件中修改对应的 scripts 节点的内容如下:
 
"serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MySQL数据库,创建和管理表

创建数据库: 方式一:创建数据库 CREATE DATABASE 数据库名;(使用的是默认的字符集) 方式二:创建数据库并指定字符集 CREATE DATABASE 数据库名 CHARACTER SET 字符集; 方式三:判断数…

基于若依的ruoyi-nbcio的flowable流程管理系统增加服务任务和我的抄送功能

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio 演示地址:RuoYi-Nbcio后台管理系统 1、增加一个状态字段 wf_copy增加下面两个字段 就用未读已读来区分 2、前端 api接口增加如下&#xff…

城市基础设施智慧路灯改造的特点

智慧城市建设稳步有序推进。作为智慧城市的基础设施,智能照明是智慧城市的重要组成部分,而叁仟智慧路灯是智慧城市理念下的新产品。随着物联网和智能控制技术的飞速发展,路灯被赋予了新的任务和角色。除了使道路照明智能化和节能化外&#xf…

Oracle(2-12)User-Managed Complete Recovery

文章目录 一、基础知识1、Media Recovery 介质恢复2、Recovery Steps 恢复步骤3、恢复4、Recovery in ARCHIVELOG 在ARCHIVELOG中恢复5、Complete Recovery完全恢复6、CR in ARCHIVELOG Mode 归档日志模式下的完全恢复7、Determine Files Need Recovery确定需要恢复的文件8、Ab…

HTTP与HTTPS的区别:安全性、协议地址和默认端口等比较

目录 ​编辑 作者其他博客链接: 一、概述 二、HTTP与HTTPS的区别 安全性 协议地址 默认端口 性能影响 三、比较与评估 浏览器支持 部署和维护成本 隐私保护 四、最佳实践建议 作者其他博客链接: 深入理解HashMap:Java中的键值对…

侯捷C++ (二--STL标准库)2

适配器 adapter 也可以叫做改造器,改造已经存在的东西 有:仿函数适配器、迭代器适配器、容器适配器 实现适配,可以使用继承、复合的两种方式实现。 共性:STL使用复合来实现适配 容器适配器 包括stack、queue,内含一…

win11 powershell conda 激活环境后不显示环境名称

win11 powershell conda 激活环境后不显示环境名称 问题现象解决方法 问题现象 安装 Anaconda 后在 powershell 中激活环境后,命令行前面不显示环境名称 解决方法 在 powershell 中执行 conda init 重新打开 poweshell 出现以下问题,请参考 win11 p…

fl studio 21破解版注册机下载 水果音乐编曲软件 FL Studio v21.

FL studio21中文别名水果编曲软件,是一款全能的音乐制作软件,包括编曲、录音、剪辑和混音等诸多功能,让你的电脑编程一个全能的录音室,它为您提供了一个集成的开发环境,使用起来非常简单有效,您的工作会变得…

zabbix、netdata和glances,做最简单的系统资源监控

软件需要显示服务器的资源信息(CPU、内存、网络、硬盘等),但是软件是在Docker容器中运行。 目前方案 通过ssh在主机上远程运行ps、free等指令,获取相应的信息。这种方案需要代码配置主机的IP,以及用户名和密码&#…

指针(笔记1)

一、内存和地址 内存及其管理方法: 1.计算机主存储器由一个一个存储单元组成,微型计算机以字节作为存储单元 2.内存区的每一个字节有一个唯一的编号,这就是“地址”,它相当于教学楼中的教室号 3.内存地址,是一个无符号整数(un…

04.仿简道云公式函数实战-QLExpress基础语法

1. 前言 小伙伴大家好,在上一篇文章我们简单初探了QLExpress表达式引擎,我们简单写了一个HelloWorld的程序,并成功的运行期望的结果。在本篇文章中我们来熟悉一下QLExpress的语法,因为我们在后面简道云公式实战的时候&#xff0c…

java之SpringBoot开发实用篇

MENU SpringBoot开发实用篇KF-1.热部署KF-1-1.手动启动热部署KF-1-2.自动启动热部署KF-1-3.参与热部署监控的文件范围配置KF-1-4.关闭热部署 KF-2.配置高级KF-2-1.ConfigurationPropertiesKF-2-2.宽松绑定/松散绑定KF-2-3.常用计量单位绑定KF-2-4.校验KF-2-5.数据类型转换 KF-3…

MFC CLXHHandleEngine动态库-自定义设置对话框使用

实现的效果如下所示: void CSampleDlg::OnBnClickedButton2() { // TODO: 在此添加控件通知处理程序代码 CSgxMemDialog dlg(180, 100); dlg.SetEnable(true); dlg.SetWindowTitle(_T("自定义对话框")); dlg.AddStatic(1000, //控件资源…

Sbatch, Salloc提交任务相关

salloc 申请计算节点,然后登录到申请到的计算节点上运行指令; salloc的参数与sbatch相同,该部分先介绍一个简单的使用案例;随后介绍一个GPU的使用案例;最后介绍一个跨节点使用案例; 首先是一个简单的例子&a…

SpringBoot整合ZXing创建二维码和条形码

文章目录 1、引入依赖2、Service层实现3、Controller4、效果 之前SpringSecurity时,登录用到了图片验证码辅助登录:【 整合hutool实现集成图片验证码】,以下为整合zxing实现二维码和条形码的生成。 1、引入依赖 引入ZXing依赖的坐标&#x…

探索未来新趋势:鸿蒙系统的崭新时代

探索未来新趋势:鸿蒙系统的崭新时代 随着科技的不断发展,操作系统作为计算机和移动设备的核心,扮演着至关重要的角色。近年来,一种备受瞩目的操作系统——鸿蒙系统(HarmonyOS)崭露头角,正引领着…

Servlet学习笔记

简介 浏览器请求处理流程:浏览器发请求 > 服务器tomcat( > 应用程序 ( > servlet) ) Servlet应用的三大作用域:request,session,application tomcat存放项目的层级结构 注释:servlet原引用包名 javax.serv…

城市道路积水如何有效预警?内涝积水监测仪效果

在城市中道路积水是一个常见的问题,特别是在暴雨季节还可能形成城市内涝。为了解决这个问题建立一个有效的预警系统是至关重要的。城市内涝积水监测仪应该能够实时监测道路积水情况,并及时向后台工作人员发出警报,以便他们能够采取适当的措施…

mysql中的DQL查询

表格为: DQL 基础查询 语法:select 查询列表 from 表名:(查询的结果是一个虚拟表格) -- 查询指定的列 SELECT NAME,birthday,phone FROM student -- 查询所有的列 * 所有的列, 查询结果是虚拟的表格&am…

【Spring教程23】Spring框架实战:从零开始学习SpringMVC 之 SpringMVC简介与SpringMVC概述

目录 1,SpringMVC简介2、SpringMVC概述 欢迎大家回到《Java教程之Spring30天快速入门》,本教程所有示例均基于Maven实现,如果您对Maven还很陌生,请移步本人的博文《如何在windows11下安装Maven并配置以及 IDEA配置Maven环境》&…