【安装指南】VSCode搭建运行Vue的详细教程

简介: 【安装指南】VSCode搭建运行Vue的详细教程



📖概述

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

第一步:下载安装nodejs

【安装指南】nodejs下载、安装与配置详细教程-CSDN博客


🚀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请求中使用的证书已经过期。

  1. 重新设置下【可能有必要,反正用了没坏处哈哈】
npm config set registry http://registry.npm.taobao.org/
  1. 更新npm: 确保你的npm版本是最新的。运行以下命令来更新npm:
npm install -g npm
  1. 清除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)

p4.引入elementUI_哔哩哔哩_bilibili

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

目录
相关文章
|
2月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
270 2
|
2月前
|
C语言 C++
VScode怎么实现c的运行,这里只讲述一些细节
第一步要设置信任模式,否则你后面搞什么都没有用
44 1
|
5天前
|
前端开发 搜索推荐 C++
Marp 教程:如何在 VSCode 中引入自定义样式和主题
本文介绍了如何在 Marp 中引入自定义样式和主题,使你的幻灯片更加个性化和独特。首先,你需要安装 VSCode 和 Marp 插件,了解 Marp 的基本结构。接着,通过创建自定义 CSS 文件并在 Markdown 文件中引入,实现样式定制。此外,还可以创建和使用自定义主题,以及进行高级自定义,如调整布局、引入自定义字体和定义复杂动画。最后,使用 Marp 的预览功能实时查看效果。
14 0
|
5天前
|
前端开发 C++
Marp 教程:使用 VSCode 编写专业 PPT
Marp 是一款基于 Markdown 的幻灯片制作工具,结合 VSCode 的强大编辑功能,可让你高效地创建专业 PPT。本教程将指导你如何在 VSCode 中安装 Marp 插件、配置主题和样式,并使用 Markdown 语法创建和美化幻灯片。内容包括基本结构、布局、图片与图表插入、表格制作,以及高级功能如动画效果、数学公式和代码高亮。最后,你将学会如何预览和导出幻灯片。
19 0
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
453 4
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
142 1
|
2月前
|
JavaScript 前端开发 开发者
如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。
【10月更文挑战第9天】随着前端开发技术的发展,代码规范和格式化工具变得至关重要。本文介绍如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。通过安装插件、配置 ESLint 和 Prettier,以及设置 VSCode,实现代码实时检查和格式化,确保代码风格一致。
255 2
|
2月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。
【10月更文挑战第8天】本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。通过安装 VSCode 插件、配置 ESLint 和 Prettier,实现代码规范检查和自动格式化,确保代码风格一致,提高可读性和维护性。
108 2
|
2月前
|
编译器 C语言 C++
VSCode安装配置C语言(保姆级教程)
VSCode安装配置C语言(保姆级教程)
|
2月前
|
Linux C语言 C++
vsCode远程执行c和c++代码并操控linux服务器完整教程
这篇文章提供了一个完整的教程,介绍如何在Visual Studio Code中配置和使用插件来远程执行C和C++代码,并操控Linux服务器,包括安装VSCode、安装插件、配置插件、配置编译工具、升级glibc和编写代码进行调试的步骤。
362 0
vsCode远程执行c和c++代码并操控linux服务器完整教程