vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)

简介: vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)

下载安装18.0以上版本的 node.js

方案一:通过官网下载安装

https://nodejs.org/en

按安装导航,一直 next 即可。

查看 node 版本

node -v

方案二:通过 nvm 下载安装

前提:已安装了 nvm

  1. 查看当前已存在的 node 版本
nvm list

若显示已存在 18.0 以上的 ndoe.js,则无需安装,直接切换使用即可。

  1. 查看可安装的 node 版本
nvm list available

选择 LTS 稳定版的最新版

  1. 安装目标版本的 node
nvm install 20.12.2
  1. 切换到目标版本的 node
nvm use 20.12.2
  1. 查看 node 版本,确保已成功切换为最新版的 node
node -v

修改 npm 下载源

以前的淘宝源已停止维护,需改成新下载源

npm config set registry https://registry.npmmirror.com

查看下载源

npm get registry

创建项目

npm create vue@latest

进入项目

cd examApply

安装依赖

npm i

启动项目

使用 vscode 打开项目,点击脚本运行按钮,或终端执行

npm run dev

安装 IDE 插件 Vue - Official

vscode 专用

https://marketplace.visualstudio.com/items?itemName=Vue.volar

目录
相关文章
|
3月前
|
前端开发 JavaScript 数据库
VSCode编程助手工程能力体验报告(一):通义灵码 - 帮你高效切入新项目、编码和提升质量
我是一位软件工程师,用通义灵码个人版vscode插件的workspace做项目分析和复盘,对比之前没有灵码,现在提效了80%,本文介绍了具体的使用流程。
314 2
|
4月前
|
JSON JavaScript 小程序
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
`uniapp` 是一个基于 Vue.js 的框架,支持一次开发多端部署,深受前端开发者喜爱。本文详细介绍如何使用 `VSCode` 搭建 `uniapp` 项目,包括安装 `node` 和 `pnpm`、创建项目、安装扩展组件、配置 `Json` 文件注释及安装相关插件。通过这些步骤,你可以高效地使用 `VSCode` 开发 `uniapp` 项目,并享受代码提示和自动补全功能,提高开发效率。
370 24
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
|
3月前
|
Ubuntu Linux 编译器
Linux/Ubuntu下使用VS Code配置C/C++项目环境调用OpenCV
通过以上步骤,您已经成功在Ubuntu系统下的VS Code中配置了C/C++项目环境,并能够调用OpenCV库进行开发。请确保每一步都按照您的系统实际情况进行适当调整。
704 3
|
3月前
|
JavaScript Linux 网络安全
VS Code远程调试Nodejs项目
VS Code远程调试Nodejs项目
|
4月前
|
开发框架 .NET C#
VSCode开发.net项目时调试无效
【9月更文挑战第22天】在使用 VSCode 开发 .NET 项目时遇到调试问题,可从项目配置、调试配置、调试器安装、运行环境、日志和错误信息等方面排查。确认项目类型及文件配置,检查 `launch.json` 文件及配置项,确保调试器扩展已安装并启用,验证 .NET 运行时版本和环境变量,查看 VSCode 输出窗口和项目日志文件,检查权限及代码错误。若问题仍未解决,可查阅官方文档或社区论坛。
|
5月前
|
JavaScript 前端开发 开发者
【颠覆你的前端世界!】VSCode + ESLint + Prettier:一键拯救Vue代码于水深火热之中,打造极致编程体验之旅!
【8月更文挑战第9天】随着前端技术的发展,保持代码规范一致至关重要。本文介绍如何在VSCode中利用ESLint和Prettier检查并格式化Vue.js代码。ESLint检测代码错误,Prettier保证风格统一。首先需安装VSCode插件及Node.js包,然后配置ESLint和Prettier选项。在VSCode设置中启用保存时自动修复与格式化功能。配置完成后,VSCode将自动应用规则,提升编码效率和代码质量。
656 1
|
5月前
|
C# C++
【Azure Function】在VS Code中创建Function项目遇见 No .NET worker runtimes found
【Azure Function】在VS Code中创建Function项目遇见 No .NET worker runtimes found
|
5月前
|
Rust Shell 开发者
7步开始rust(自定义环境安装与vscode开发环境配置)
本文档详细记录了当改变Rust安装路径至特定目录(如 `/home/local_rust`)时,如何在VSCode环境中正确配置Rust开发环境的过程。主要包括:设置环境变量、使用清华大学镜像安装Rust及更新镜像源、手动部署 `rust-analyzer`、安装标准库源码、安装与配置VSCode插件等七个步骤,确保开发者能够顺利搭建并使用定制化的Rust开发环境。
830 0
|
6月前
vscode 生成项目目录结构 directory-tree 实用教程
vscode 生成项目目录结构 directory-tree 实用教程
397 2
|
6月前
|
Web App开发 JavaScript 前端开发
入职必会-开发环境搭建29-Node.js下载和安装
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境,用于在服务器端运行 JavaScript 代码。它提供了一种异步、事件驱动的编程模型,使得开发者能够构建高性能、可扩展的网络应用程序。