📖概述
Visual Studio Code(简称VSCode)是由Microsoft开发的一款免费、轻量级、开源的代码编辑器。以下是VSCode的一些主要特点:
- 跨平台性: VSCode支持Windows、macOS和Linux操作系统,确保开发者在不同平台上享有一致的开发体验。
- 轻量高效: 作为一款轻量级编辑器,VSCode启动迅速,占用系统资源较少,使得开发者能够快速高效地进行代码编辑和开发工作。
- 强大的代码编辑功能: 提供智能感知、代码补全、实时错误检测等功能,支持多种编程语言,使得编写和维护代码变得更加容易。
- 丰富的扩展生态系统: VSCode拥有庞大的扩展市场,开发者可以根据自己的需求安装各种插件,从而定制编辑器以满足特定的开发需求。
- 集成调试功能: 内置强大的调试器,支持多种语言的调试,使开发者能够轻松地进行代码调试和故障排除。
- Git集成: 提供了直观的Git集成,包括版本控制、分支管理等功能,方便开发者协同工作和进行版本管理。
- 内置终端: 集成了内置终端,使得开发者可以在编辑器中执行命令,而无需切换到外部终端窗口。
- 主题和自定义性: 提供多种主题选择,同时支持用户定制主题,使得编辑器外观能够满足个性化需求。
VSCode以其轻量高效、丰富的扩展生态系统和强大的代码编辑功能成为一款备受欢迎的代码编辑器。无论是前端开发、后端开发还是其他领域,VSCode都为开发者提供了灵活而强大的工具支持。
🚀1. 下载node.js
第一步:下载安装nodejs
🚀2. 安装环境
2.1 切换镜像源
默认使用国外服务器,npm下载环境很慢。
查看当前镜像源
npm config get registry
切换镜像源下载
阿里云:
npm config set registry https://registry.npm.aliyun.com/
淘宝:
npm config set registry https://registry.npm.taobao.org/
官方:
npm config set registry https://registry.npmjs.org/
检查是否配置成功,查看当前镜像源
npm config get registry
2.2 安装 Vue 脚手架(Vue CLI)
查看已有的全局安装的所有 Node.js 模块:
npm list -g
目前显示为空【啥环境也没安装哈哈】:
安装 Vue 脚手架(Vue CLI): 打开命令行全局安装 Vue CLI:
npm install -g @vue/cli
检查安装是否成功
vue -V
安装webpack
npm install webpack -g
记录问题:
问题1:
解决方案:这个错误表明你的npm请求中使用的证书已经过期。
- 重新设置下【可能有必要,反正用了没坏处哈哈】
npm config set registry http://registry.npm.taobao.org/
- 更新npm: 确保你的npm版本是最新的。运行以下命令来更新npm:
npm install -g npm
- 清除npm缓存: 清除npm的缓存有时可以解决证书问题。运行以下命令清除缓存:
npm cache clean -f
2.3 创建 Vue 项目
在对应目录创建新文件夹用来保存vue项目,并且在对应cmd目录下创建新的 Vue项目
在命令行中,进入需要创建项目的目录,运行以下命令:
vue create vuetest
注意:vue create 创建的项目名称不能包含大写【后续版本可能会改进】
vuetest 是要创建的项目的名称,可以根据需要更改它。在执行这个命令后,Vue CLI 将询问你关于项目的一些配置选项,例如使用预设(Preset)或手动配置。可以选择默认预设,然后根据需要进行自定义。
选【vue 3】自定义
cd到自己创建的项目目录下,运行如下
npm run serve
检验和后续执行指令
npm -v node -v npm install webpack -g npm install vue-cli -g
🚀3. 使用脚本测试vue项目
比如我在E盘创建文件夹:vuetest01
提前修改下镜像,更快
npm config set registry https://registry.npm.taobao.org
查看是否安装成功 npm config get registry
终端输入:vue create vue01
选【vue 3】自定义
运行如下
🚀4. VSCode运行vue
cd 到vue项目
打开终端输入如下:
运行结果
🚀5. 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)
🌟5.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",