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

📖前言

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