vue3最新开发环境篇

前言

本篇带vue新手从0搭建最新vue3开发环境，提供工具整合的最佳实践，为后续vue学习以及项目开发效率提速。

vite脚手架与各种工具最新版的整合教程已更新完成！
视频学习地址：vite5整合vue3开发环境实战
配套思维导图：

node安装与配置

1.下载与安装

node版本选择要考虑所使用工具和框架（最新版）整合的兼容性。可参考项目（截止到目前）在github上package.json中对node依赖版本的最低要求，如下一代前端构建工具vite要求"node": "^18.0.0 || >=20.0.0"；主流vue3 ui框架element plus要求"node": ">= 18"；样式检查工具stylelint要求"node": ">=18.12.0"；

基于这些考虑，选择大版本号18的最新长期稳定版的安装程序：

按机器对应的系统版本自行选择，这里下载下来的安装包为node-v18.20.4-x64.msi，双击安装，全程下一步，也可自行设置安装位置，这里设置为d:\Programs\node\nodejs\。安装完成后该路径会被自动添加到系统环境变量path中，因此可在cmd命令行任意路径下直接使用命令：node、npm：

同时通过npm默认安装第三方node模块的存放路径为~/AppData/Roaming/npm，~代表用户目录，并自动将其配置到用户环境变量path下。

2.调整npm目录

如果不想使用默认的npm目录，如考虑到系统盘的容量，可自行调整。新建两个目录：

打开命令终端，执行：

# 设置第三方node模块安装目录
npm config set prefix "D:\Programs\node\npm"

# 设置npm缓存目录
npm config set cache "D:\Programs\node\npm-cache"

替换npm的用户环境变量path中的配置项为D:\Programs\node\npm。

3.切换npm下载源

全局安装一个好用的npm源管理工具nrm：

npm i -g nrm

使用方式：

# 查看npm源列表
nrm ls

# 切换npm源
nrm use taobao

vite构建项目

基于配置简洁和构建速度快的考虑，选择vite脚手架来创建vue项目。

官方参考文档 - 搭建第一个vite项目

生成步骤

在本地准备一个练习目录：E:\vue_learning\code\001_hello_vue，为便于项目的拷贝和后续迭代，项目名统一叫demo。打开命令终端，执行：

# 切换到路径：E:\vue_learning\code\001_hello_vue
# 调用最新的创建工具
npm create vite@latest

这里通过交互式命令创建了一个使用typescript语言的vue3项目。

运行项目

# 安装依赖
# 进入目录：E:\vue_learning\code\001_hello_vue\demo
npm i

# 启动dev服务
npm run dev

访问地址：http://localhost:5173/

看到经典的双V页面

IDE（集成开发环境）

这里选择最智能、开发效率最高的webstorm。

安装步骤

下载最新版进行安装。

安装位置可自行设定：

添加桌面快捷方式，并设置右键打开项目

执行后续安装。

开始使用

右键打开项目

第一次使用，不导入设置

因为是收费版本，选择30天试用，在弹出对话框中，点信任项目。打开项目开发窗口后，进行webstorm基本设置。

File | Settings，字体设置