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

这篇具有很好参考价值的文章主要介绍了【操作宝典】VSCode解锁指南:释放潜能的详细教程!。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【操作宝典】VSCode解锁指南:释放潜能的详细教程!,工具宝典:极简指南,vscode,ide,编辑器,nodejs

【操作宝典】VSCode解锁指南:释放潜能的详细教程!,工具宝典:极简指南,vscode,ide,编辑器,nodejs

目录


📖前言

🚀 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官网下载,或者关注公众号下载我提供的资源噢~

资源获取:关注文末公众号回复  node-v20.10.0-x64

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

【操作宝典】VSCode解锁指南:释放潜能的详细教程!,工具宝典:极简指南,vscode,ide,编辑器,nodejs

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

【操作宝典】VSCode解锁指南:释放潜能的详细教程!,工具宝典:极简指南,vscode,ide,编辑器,nodejs

【操作宝典】VSCode解锁指南:释放潜能的详细教程!,工具宝典:极简指南,vscode,ide,编辑器,nodejs

检验和后续执行指令

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】自定义

【操作宝典】VSCode解锁指南:释放潜能的详细教程!,工具宝典:极简指南,vscode,ide,编辑器,nodejs

运行如下

【操作宝典】VSCode解锁指南:释放潜能的详细教程!,工具宝典:极简指南,vscode,ide,编辑器,nodejs

【操作宝典】VSCode解锁指南:释放潜能的详细教程!,工具宝典:极简指南,vscode,ide,编辑器,nodejs

🚀3. VSCode运行vue

cd 到vue项目

打开终端输入如下:

【操作宝典】VSCode解锁指南:释放潜能的详细教程!,工具宝典:极简指南,vscode,ide,编辑器,nodejs

运行结果

【操作宝典】VSCode解锁指南:释放潜能的详细教程!,工具宝典:极简指南,vscode,ide,编辑器,nodejs

🚀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",

【操作宝典】VSCode解锁指南:释放潜能的详细教程!,工具宝典:极简指南,vscode,ide,编辑器,nodejs文章来源地址https://www.toymoban.com/news/detail-763339.html

到了这里,关于【操作宝典】VSCode解锁指南:释放潜能的详细教程!的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 数据治理三大模式详解,治理新范式释放数据潜能

    随着世界经济由工业经济向数字经济转型,数据逐步成为关键的生产要素,企业开始将数据作为一种战略资产进行管理。数据从业务中产生,在IT系统中承载,要对数据进行有效治理,需要业务充分参与,IT系统确保遵从,这是一个非常复杂的系统工程。 实践证明,企业只有

    2024年02月03日
    浏览(30)
  • 联手英特尔,释放星飞分布式全闪存储潜能

    近日,英特尔官网发布了与 XSKY 星辰天合联手打造的解决方案,即 XSKY 的新一代全闪分布式存储系统 XINFINI,该存储系统采用英特尔 QAT 加速数据压缩/解压缩,从而大幅度提升存储系统性能。 全闪存储系统面临的解压缩挑战 在存储系统的数据服务层中,通常需要进行一定的压

    2024年02月01日
    浏览(43)
  • 释放AI创作潜能:从大模型训练到高产力应用

    人民极少使用思想自由这项权利,所以他们把言论自由作为补偿。 随着科技的不断进步,人工智能已经成为了各行各业的必备技能。特别是在内容创作领域,人工智能生成内容(AIGC)正逐渐成为趋势。AI可以创造出优秀的、原创的文章和故事,这为创作者们提供了一种新的创

    2024年02月13日
    浏览(24)
  • 解锁ChatGPT的潜能:API调用中运用聊天记录

    视频讲解 在过去我通过chatgpt调用api时只知道进行孤立的调用,即这一次调用时,chatgpt并没有拿到上一次调用的上下文,这无疑损失很大。通过探索,我知道了如何通过修改messages这个字典类型的list来告知chatgpt我和它的聊天历史。 关键代码如下 让我们近距离观察一下传入请

    2024年02月15日
    浏览(44)
  • 轻松掌握组件启动之Redis集群扩展秘籍:轻松扩容与缩容,释放高性能潜能

    在我们原始的集群基础上,我们决定增加一台主节点(8007)和一台从节点(8008),这样新增的节点将会在下图中以虚线框的形式显示在集群中。 1: 首先,在 /usr/local/redis-cluster 目录下创建两个文件夹,分别命名为 8007 和 8008。接下来,将 8001 文件夹下的 redis.conf 文件复制到 8007 和

    2024年02月08日
    浏览(45)
  • 2023 Navicat for Redis 与 Navicat Premium 16.2 现已正式发布 | 释放 Redis 全部潜能

    🌷🍁 博主 libin9iOak带您 Go to New World.✨🍁 🦄 个人主页——libin9iOak的博客🎐 🐳 《面试题大全》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~🌺 🌊 《IDEA开发秘籍》学会IDEA常用操作,工作效率翻倍~💐 🪁🍁 希望本文能够给您带来一定的帮助🌸文章粗浅,敬

    2024年02月10日
    浏览(37)
  • 探索深度学习:如何用Python和TensorFlow 2解锁AI的潜能

            在当今的技术前沿,人工智能(AI)和深度学习正在引发一场革命,影响着从医疗健康、金融服务到自动驾驶等多个领域。本文旨在通过一个实用的代码案例,引导你走进深度学习的世界,展示如何使用Python和TensorFlow 2来构建一个简单的神经网络模型,实现手写数

    2024年04月15日
    浏览(34)
  • 解锁编程潜能:探索亚马逊CodeWhisperer,打造编程世界的声音引导者

    随着CHATGPT的一声巨响,大语言模型已经成为了一个备受瞩目的创新应用。 亚马逊云科技 作为全球领先的云服务提供商,其大语言模型服务也备受关注。 亚马逊云科技推出的 Amazon Bedrock 提供对众多基础模型的访问,具体来说,这项新服务允许用户通过 API 访问来自 AI21 Labs、

    2024年02月03日
    浏览(43)
  • 使用 UCS(On-Premises) 管理您的GPU资源池,释放AI大模型算力潜能

    本文分享自华为云社区《使用 UCS(On-Premises) 管理您的GPU资源池,释放AI大模型算力潜能》,作者:云容器大未来。 过去十余年,依托全球数据、算法、算力持续突破,人工智能全面走向应用,已成为社会生产生活的支柱性技术。2020年后,当自动驾驶、人脸识别等热门应用发展

    2024年02月12日
    浏览(36)
  • 文心一言网页版使用宝典:解锁智能对话的终极秘籍

    大家好,小发猫降ai今天来聊聊文心一言网页版使用宝典:解锁智能对话的终极秘籍,希望能给大家提供一点参考。降ai辅写 以下是针对论文AI辅写率高的情况,提供一些修改建议和技巧,可以借助此类工具: 还有: 文心一言网页版使用宝典:解锁智能对话的终极秘籍 在数字

    2024年04月14日
    浏览(67)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包