Vue3怎么安装？新手零坑全流程指南，从环境准备到项目跑起来

terry 4小时前阅读数 57 #Vue

现在前端项目里用Vue3的人越来越多了,很多刚接触Vue的朋友，或者是从Vue2转过来想试试新语法的开发者，第一步都会被「怎么正确安装Vue3」拦住——毕竟装错一步，后面要么报错一堆，要么用不了组合式API这些核心功能，今天就把所有可能踩的坑都理清楚，用大白话一步步说透。

先确认你的电脑有没有必要的环境？

很多新手上来就直接搜“Vue3下载安装包”，其实这是个误区：Vue3现在很少直接用CDN引入做正式项目了（除非是单页测试小demo），主流开发方式都是用脚手架，而脚手架运行的前提是Node.js环境。

先打开你的电脑终端（Windows是cmd或者PowerShell，Mac/Linux是Terminal），输入两个命令检查一下：第一个是node -v，如果能弹出一串类似v20.14.0的数字（注意是小写v开头，中间有两个点，后面是版本号），说明Node.js已经装了；如果报错说“node不是内部或外部命令”，那就得先去官网下载安装。第二个是npm -v，或者更推荐用pnpm -v——pnpm是现在前端常用的包管理器，比npm快很多，还能省硬盘空间，如果pnpm没装，可以用npm install -g pnpm全局安装（记得如果npm权限不够，Windows要以管理员身份开终端，Mac/Linux前面加sudo）。

这里有个小建议：Node.js的版本不要选太新的LTS（长期支持版）后面的预览版，也不要选太老的，比如低于v18的版本，因为Vue3的最新脚手架对Node版本有要求，太老了会不兼容，建议直接选LTS版本里的最新稳定版，现在大概是v20.x或者v22.x的LTS，官网首页都会标出来，直接下载对应系统的安装包就行，安装的时候一路点“下一步”，默认勾选“Add to PATH”很重要，不然终端还是找不到Node。

选哪种Vue3脚手架？Vite还是Vue CLI？

新手最容易纠结的就是这个问题：以前Vue2用的是Vue CLI，现在怎么冒出来个Vite？

先给结论：不管是新手还是老手，只要做Vue3正式项目，都优先选Vite，为什么？因为Vite的启动速度和热更新速度太快了——Vue CLI创建的大项目，启动可能要等三五分钟，改个代码要等好几秒才会刷新页面；Vite创建的项目，哪怕是上千个组件，启动也只要几秒钟，热更新几乎是“秒更”，开发体验差太多了。

那Vue CLI现在还有用吗？有用，比如要维护一些旧的Vue2转Vue3的混合项目，或者项目需要依赖很多只有Vue CLI插件生态里才有的东西，但这种情况很少见了，新手不用考虑。

用Vite创建Vue3项目的全流程（图文补充不了，就把细节说死）

确认环境没问题,脚手架选Vite之后，就可以正式创建项目了，这里分两种情况：一种是用npm/yarn/pnpm直接启动创建命令，另一种是用npm create vite@latest这种更规范的方式——其实两种本质一样，但推荐后者，因为可以确保用的是Vite的最新版本。

第一步：打开终端，cd到你想放项目的文件夹

比如我想把项目放在D盘的Frontend文件夹里,Windows就输入d:回车，再输入cd Frontend回车；Mac/Linux比如放在用户的Documents文件夹里，就输入cd ~/Documents回车，这里一定要记得，文件夹路径里不要有中文！不要有空格！不然后面很容易出现奇奇怪怪的报错，找不到文件”或者“命令执行失败”。

第二步：执行Vite创建命令

终端里输入npm create vite@latest（如果是yarn就输入yarn create vite，pnpm就输入pnpm create vite），然后按回车。

接下来会出现一系列交互式提问,新手跟着我选就行：

Project name：这里是项目的名字，比如你想做一个个人博客，就输入my-vue3-blog，注意只能用小写字母、数字、下划线和短横线，不能有中文、大写字母开头或者全是数字，按回车确认。
Select a framework：这里用上下方向键选Vue，不要选其他的（比如React、Svelte），按回车确认。
Select a variant：这里是选语言和语法格式，新手如果没学过TypeScript，就选JavaScript；如果想提前学TypeScript，也可以选TypeScript，后面的Customize with create-vue、Nuxt这些，新手暂时不用碰，选纯JavaScript或者纯TypeScript就行，按回车确认。

这时候终端会提示你创建成功,还会给你下一步的三个命令，一定要严格按照顺序来：第一个是cd my-vue3-blog（这里的名字要和你刚才输入的一致，别写错），进入项目文件夹；第二个是npm install（或者yarn/pnpm install），安装项目依赖的各种包——这一步是下载文件，速度取决于你的网络，如果网络不好，可以换国内的镜像源，比如npm换淘宝镜像源的命令是npm config set registry https://registry.npmmirror.com，pnpm换的话是pnpm config set registry https://registry.npmmirror.com；第三个是npm run dev（或者yarn/pnpm dev），启动开发服务器——启动成功之后，终端会显示一个Local的地址，比如http://localhost:5173/，还有一个Network的地址（如果你的电脑和手机在同一个WiFi下，手机也能打开这个地址看效果）。

第三步：验证项目是否跑起来了

把Local地址复制到浏览器里打开,如果能看到Vue3的官方欢迎界面，上面有组合式API的演示，还有“恭喜你！你成功创建了一个Vue3项目”之类的提示（可能版本不同，界面有点不一样，但核心是Vue3的标志），那就说明安装成功了！

踩过无数坑总结的避坑指南

前面说的是正常流程,但很多新手总会遇到各种各样的问题，这里把最常见的几个坑列出来，告诉你怎么解决：

坑1：npm install半天没反应，或者报错说“网络连接失败”

刚才说了,这大概率是网络问题，换国内镜像源就行，除了淘宝镜像源，还有腾讯云镜像源、华为云镜像源可以选，但淘宝镜像源更新最快，用的人最多，换完之后记得再执行一次npm install，如果还是不行，可以试试删掉项目文件夹里的node_modules文件夹和package-lock.json/yarn.lock/pnpm-lock.yaml文件，然后重新换镜像源安装。

坑2：npm run dev之后浏览器打不开Local地址

首先检查一下终端里的Local地址是不是真的存在,有没有报错说“端口被占用”——如果有，终端会提示你换一个端口，比如http://localhost:5174/，直接复制那个新的地址就行；如果没报错，那可能是浏览器的问题，换一个浏览器试试，比如Chrome、Edge；还有一种可能是终端没有正确进入项目文件夹，再仔细检查一下cd的命令，输入pwd（Mac/Linux）或者cd（Windows）看一下当前路径是不是项目的根目录。

坑3：创建项目的时候选了TypeScript，但后来后悔了想换成JavaScript

这个其实不用重新创建项目,直接把项目里所有的.ts和.tsx文件改成.js和.jsx就行，然后把tsconfig.json和tsconfig.node.json这两个TypeScript的配置文件删掉，再重新安装一下依赖，不过还是建议新手如果没学过TypeScript，一开始就选JavaScript，等熟练了Vue3的基础语法之后再转TypeScript。

坑4：想用CDN引入做小demo，怎么操作？

虽然主流开发方式是脚手架,但有时候想快速测试一个Vue3的小功能，比如写个计数器，用CDN引入确实更方便，直接在HTML文件的<head>标签里引入Vue3的CDN链接就行，然后在<body>标签里写代码，CDN链接有两种：一种是完整版，支持模板编译器，也就是可以直接在HTML里写<template>标签；另一种是运行时版，体积更小，但不支持模板编译器，只能用render函数，新手做小demo用完整版就行，链接可以直接去查权威的前端资源库。

安装成功之后，接下来该做什么？

项目跑起来了,不要急着写代码，先看看项目的结构是什么样的，知道每个文件夹和文件是干嘛的：

node_modules：存放所有依赖的包，这个文件夹很大，不要手动修改里面的内容；
public：存放静态资源，比如图片、音频、视频，还有favicon.ico（浏览器标签页的小图标），这些资源不会被Vite打包处理，路径直接用根路径就行；
src：存放源代码，这是你以后写代码最多的地方：
- assets：存放需要被Vite打包处理的静态资源，比如CSS样式文件、图标文件；
- components：存放可复用的组件；
- App.vue：根组件，整个项目的入口组件；
- main.js：整个项目的入口文件，用来挂载根组件；
index.html：整个项目的HTML入口文件，Vite会从这里开始打包；
package.json：存放项目的基本信息，比如项目名字、版本号、依赖包的信息、脚本命令；
vite.config.js：Vite的配置文件，比如可以配置端口号、代理、别名等。

了解完项目结构之后,可以试着修改一下App.vue文件，比如把里面的欢迎文字改成你自己的名字，然后保存，看看浏览器是不是秒更——如果是，那说明你已经初步掌握了Vue3的开发环境，可以开始学基础语法了。

补充：如何全局安装Vue CLI？

虽然前面说新手优先选Vite,但还是有必要提一下怎么安装Vue CLI，万一以后要用呢？全局安装Vue CLI的命令是npm install -g @vue/cli（或者yarn/pnpm加全局安装的参数），安装完成之后，输入vue -V检查一下版本号（注意是大写V），如果能弹出一串数字，说明安装成功了。用Vue CLI创建Vue3项目的命令是vue create my-vue3-project，然后按照交互式提问选就行，记得一定要选Vue3的版本，不要选Vue2的。

最后想说的话

Vue3的安装其实并不难,只要按照正确的流程来，避开那些常见的坑，几分钟就能把项目跑起来，关键是不要着急，遇到问题的时候先仔细看终端的报错信息，大部分报错信息都会告诉你问题出在哪里，缺少某个依赖包”“端口被占用”“路径有问题”，然后根据报错信息去解决就行，如果实在解决不了，可以去搜一下报错信息，网上肯定有很多人遇到过同样的问题，解决方案也很成熟。

希望这篇文章能帮到正在准备安装Vue3的你,如果你还有其他问题，欢迎在评论区留言讨论。