202X刚学前端？用Vue3+Vite从零到能跑通Hello World到底该怎么弄？

terry 1小时前阅读数 19 #Vue

其实现在很多新手刚摸前端工具链,都会在Webpack和Vite之间纠结，先不说打包速度那些老生常谈的，单说创建项目的流畅度和新手友好的提示信息，Vite真的能甩Webpack脚手架三条街——毕竟前者是浏览器原生ES模块开发时代的产物，后者是为了解决CommonJS兼容、多文件合并这些上古问题（至少对现在的前端生态来说是“上古入门级遗留坑”）才搞出来的重型工具，今天咱们就从“电脑里啥都没有”到“打开浏览器能看到自己改的彩色Vue3 Hello World动画”，一步一步用大白话讲明白，路上遇到的常见报错也提前踩坑给你填好。

第一步：先把电脑的“基础环境”配齐，这是前提

你肯定听过“工欲善其事必先利其器”，但具体Vue3+Vite需要啥“器”？其实就两个核心：Node.js（用来跑JavaScript后端逻辑和安装npm/yarn/pnpm这些包管理器），还有一个顺手的代码编辑器（推荐VS Code，免费、插件多、生态顶，新手别折腾其他小众编辑器）。

Node.js怎么装？直接装LTS版本就行

别去网上搜乱七八糟的破解版、绿色版，官方版最稳，打开浏览器直接搜“Node.js下载”，进入那个全英文但布局很清晰的官网，顶部导航栏会标“LTS（长期支持版）”和“Current（尝鲜版）”，新手直接选LTS就行——尝鲜版可能有新功能，但不稳定，万一装完Vite报错找不到依赖库，哭都没地方哭。

下载完安装包,Windows系统直接双击下一步到底（注意：安装路径别选有中文的文件夹，D:\前端资料\Node.js”这种就不行，改成“D:\front-end-tools\Node.js”更稳妥，很多前端工具都对中文路径过敏）；Mac系统拖到应用程序文件夹就行。

装完之后得验证一下是不是真的装成功了,不然白忙活，打开电脑的命令行工具：Windows用Win+R键输入cmd回车，Mac按Command+空格搜Terminal回车，然后分别输入这两个命令（注意不要漏了后面的空格加短杠加字母，大小写也别错）：

node -v
npm -v

如果分别跳出一串数字（比如v20.18.0和10.8.2），说明Node.js和自带的npm包管理器都装好了；如果跳出“不是内部或外部命令”这种提示，别慌，大概率是环境变量没配置好——Windows的话可以重启电脑试试（很多时候重启能解决90%的环境变量问题），不行就搜“Node.js Windows环境变量配置”按步骤来；Mac的话一般拖到应用程序文件夹会自动配，要是没配好就搜对应的教程调整终端的配置文件。

要不要换更快的包管理器？pnpm新手也能用

自带的npm虽然能用,但下载依赖包的时候经常慢到怀疑人生，特别是遇到海外的依赖源，那怎么办？可以换国内的淘宝镜像，或者直接装个pnpm——pnpm是现在前端圈公认的“最快最省空间”的包管理器，它会把相同的依赖包只存一份在电脑里，多个项目共用，能节省不少硬盘空间，下载速度也比淘宝镜像的npm还要快一点。

装pnpm的话也很简单,不用单独去官网下载，直接在刚才的命令行里输入：

npm install -g pnpm

这里的-g是“全局安装”的意思，装完之后你在电脑的任何文件夹里都能用pnpm命令，装完同样验证一下：

pnpm -v

跳出数字就ok了,如果怕用不惯pnpm，那可以继续用npm，但记得先把npm的默认镜像换成淘宝的，输入这个命令：

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

验证镜像有没有换成功的话,输入：

npm config get registry

跳出刚才那个淘宝的链接就没问题了。

VS Code怎么装？顺手的插件也顺便装几个

VS Code的下载更简单，直接搜“VS Code下载”选官网的下载对应系统的版本就行，Windows下一步到底，Mac拖到应用程序文件夹。

新手用VS Code写Vue3代码，这几个插件是必备的，能帮你省超多时间：

Volar：专门给Vue3写的语言服务插件，能高亮语法、自动补全、检查代码错误，注意别再装Vetur了，Vetur是给Vue2用的，装了两个会冲突报错；
Prettier - Code formatter：自动格式化代码的插件，比如你写的代码换行、空格乱了，保存的时候它能自动帮你整理得干干净净；
ESLint：虽然Prettier负责格式，但ESLint负责代码语法和逻辑检查，比如你漏写了分号或者定义了一个没用的变量，它会给你标红提醒；
Auto Rename Tag：自动同步修改HTML标签的插件，比如你把开头的<div>改成<section>，结尾的</div>会自动变成</section>；
Live Server：虽然Vite自带热更新，但写纯HTML的时候用Live Server还是很方便的。

装插件的话,打开VS Code，左边侧边栏有个四个小方块组成的图标（扩展商店），点进去搜索插件名字，找到对应的直接点“Install”就行，装完有些插件需要重启VS Code才能生效。

第二步：正式用Vite创建Vue3项目，别选错模板

现在环境都配好了,终于可以开始创建项目了！首先得找个地方放你的项目，别放在C盘的桌面或者Program Files里，C盘满了电脑会变卡，Program Files需要管理员权限，容易出问题，比如在D盘建个叫“vue3-projects”的文件夹，专门放你的Vue3练习项目。

接下来打开命令行工具,Windows的话可以直接在刚才建的文件夹里空白处右键，选“在终端中打开”（如果是Win10或Win11自带的PowerShell更方便，没有的话就用cmd，然后用cd命令切换到文件夹路径，比如cd D:\vue3-projects）；Mac的话打开Terminal，用cd命令拖文件夹进去（直接把文件夹图标拖到Terminal窗口里，它会自动输入完整路径）回车就行。

切换到目标文件夹之后,终于可以输入创建项目的命令了——新手最容易在这里踩坑，因为Vite的命令更新过好几次，现在202X年下半年的最新命令是这样的：

用npm创建：npm create vite@latest
用yarn创建：yarn create vite
用pnpm创建：pnpm create vite

推荐用pnpm或者yarn,速度更快，这里咱们就用pnpm举例吧，输入命令之后，会跳出几个提示框让你选，咱们一个一个说：

第一个提示框是“Project name:”——也就是你的项目名字，不能有中文、空格、大写字母，只能用小写字母、数字、短横线或者下划线，比如my-first-vue3-vite-app或者vue3-hello-world，随便起一个好记的就行，输完回车；
第二个提示框是“Select a framework:”——选你要用的框架，这里咱们按键盘的上下箭头键找到“Vue”，回车；
第三个提示框是“Select a variant:”——选你要用的Vue变体，新手的话直接选“JavaScript”就行，别选TypeScript，虽然TS现在是趋势，但刚入门先把Vue3的基本语法搞懂再碰TS；也别选那些带“+ Router”“+ Pinia”“+ Vitest”的变体，那些是带路由、状态管理、测试工具的模板，新手用空的JavaScript模板就行，等后面需要了再自己装。

选完之后,Vite会自动帮你创建项目文件夹、下载基础依赖包，几秒钟就搞定了——要是用Webpack的话，至少得等个几分钟，这就是Vite香的地方之一。

第三步：进入项目文件夹、安装依赖、启动开发服务器

项目创建好之后,命令行里会给你提示下一步该做什么，新手直接跟着提示走就行，但我还是给你拆成大白话解释一下：

首先得“进入项目文件夹”——刚才创建的是my-first-vue3-vite-app，所以输入cd my-first-vue3-vite-app回车；
然后得“安装项目依赖”——刚才Vite只下载了最基础的框架文件，很多运行需要的依赖包还没装，所以输入pnpm install（如果用npm的话是npm install，yarn的话直接yarn就行）回车，这个步骤的速度取决于你的网络和包管理器，pnpm的话一般十几秒到一分钟就能搞定；
启动开发服务器”——输入pnpm dev（npm是npm run dev，yarn是yarn dev）回车，几秒钟之后你会看到命令行里跳出一个类似“Local: http://localhost:5173/”的链接，按住Ctrl键（Windows）或者Command键（Mac）点击这个链接，就能打开浏览器看到Vite+Vue3的默认欢迎页面了！

默认欢迎页面一般是Vue3的标志、Vite的标志，还有几个链接和提示信息，恭喜你，第一步从零到能跑通已经成功了！

第四步：自己动手改改代码，感受一下Vite的“热更新”有多爽

现在咱们不能只看默认页面,得自己动手写点东西，感受一下Vue3的语法和Vite的核心优势——热更新（Hot Module Replacement，简称HMR），什么是热更新？就是你改了代码之后，不用手动刷新浏览器，页面会自动更新，而且只更新你改的那部分，不会刷新整个页面，开发体验超级棒。

先看看项目的文件夹结构，别瞎改文件

打开VS Code，点击“文件”菜单，选“打开文件夹”，找到刚才创建的my-first-vue3-vite-app文件夹打开，左边侧边栏就会显示项目的文件夹结构，新手不用把所有文件都搞懂，先记住这几个核心的就行：

node_modules文件夹：存放所有安装的依赖包，别手动改里面的任何东西，删除的话可以用pnpm install重新装；
public文件夹：存放静态资源，比如图片、音频、视频、favicon.ico（网站的小图标），这里的文件不会被Vite处理，打包的时候会直接复制到根目录；
src文件夹：存放咱们自己写的代码，这是最重要的文件夹：
- assets文件夹：存放需要被Vite处理的静态资源，比如CSS文件、小图片（一般小于10kb的图片Vite会自动转成Base64编码，减少HTTP请求）；
- components文件夹：存放Vue3的组件，比如导航栏组件、卡片组件；
- App.vue：Vue3的根组件，整个页面的内容都是从这里渲染的；
- main.js：Vue3的入口文件，用来初始化Vue应用；
index.html：整个项目的HTML入口文件，注意这个文件不在public文件夹里，而是在根目录，因为Vite会把它作为构建的入口；
package.json：项目的配置文件，里面记录了项目的名字、版本、依赖包、启动命令等信息，别手动改依赖包的版本号。

把默认欢迎页面删掉，写自己的彩色Hello World动画

首先咱们来改App.vue文件，因为这是根组件，整个页面的内容都在这里，打开App.vue，你会看到里面有三个部分：

<template>标签：存放HTML结构，这是Vue3的模板语法，和普通HTML差不多，但有一些特殊的指令；
<script setup>标签：存放JavaScript逻辑，这是Vue3的组合式API（Composition API）的推荐写法，比之前的选项式API（Options API）更灵活、更易复用；
<style scoped>标签：存放CSS样式，这里的scoped属性很重要，加上之后，这里的CSS只会作用于当前组件，不会影响其他组件，避免样式冲突。

新手可以先把App.vue里的所有内容都删掉，然后自己写一段简单的代码，比如下面这个带旋转动画的彩色Hello World：

<template>
  <!-- 根div，class是container -->
  <div class="container">
    <!-- 用Vue3的插值语法{{ }}显示message变量的值 -->
    <h1 class="hello-text">{{ message }}</h1>
    <!-- 用Vue3的v-model双向绑定input输入框和inputValue变量 -->
    <input type="text" v-model="inputValue" placeholder="输入你想显示的内容" class="input-box">
  </div>
</template>
<script setup>
// 从vue包里导入ref函数，用来创建响应式变量
import { ref } from 'vue'
// 创建响应式变量message，初始值是'Hello Vue3 + Vite!'
const message = ref('Hello Vue3 + Vite!')
// 创建响应式变量inputValue，初始值是空字符串
const inputValue = ref('')
// 用watch函数监听inputValue的变化，一旦变化就把message的值改成inputValue的值
// 这里的watch也可以不用，因为后面可以直接把v-model绑到message上，但新手可以先试试watch
import { watch } from 'vue'
watch(inputValue, (newVal) => {
  if (newVal) {
    message.value = newVal
  } else {
    message.value = 'Hello Vue3 + Vite!'
  }
})
</script>
<style scoped>
/* 给整个页面设置样式，让内容居中显示 */
.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
/* 给Hello World文本设置样式，加旋转动画 */
.hello-text {
  font-size: 3rem;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  animation: rotate 3s linear infinite;
}
/* 给输入框设置样式 */
.input-box {
  padding: 10px 20px;
  font-size: 1.2rem;
  border: none;
  border-radius: 50px;
  outline: none;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
/* 定义旋转动画 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

写完之后保存文件（VS Code的快捷键是Ctrl+S或者Command+S），你会发现浏览器里的页面自动更新了！现在你可以在输入框里输入任何内容，我会用Vue3+Vite了！”，页面上的旋转文本也会自动变成你输入的内容——这就是Vue3的响应式数据和Vite的热更新结合起来的效果，是不是超级爽？

第五步：打包项目，生成可以部署上线的静态文件

现在咱们的项目只是在本地开发服务器上跑,要想让别人也能看到，就得打包项目，生成可以部署到任何静态服务器上的静态文件（比如GitHub Pages、Gitee Pages、阿里云OSS、腾讯云COS等等）。

打包项目的命令也很简单,在命令行里输入：

用npm打包：npm run build
用yarn打包：yarn build
用pnpm打包：pnpm build

输入命令之后,Vite会自动帮你压缩、合并、优化代码，几秒钟之后就会在项目根目录生成一个叫dist的文件夹，这个文件夹里的内容就是可以部署上线的静态文件了。

打包完之后,你可以用Vite自带的预览命令，在本地先预览一下打包后的效果，避免部署之后出问题：

用npm预览：npm run preview
用yarn预览：yarn preview
用pnpm预览：pnpm preview

按住Ctrl键或者Command键点击命令行里跳出的链接,就能看到和开发服务器上一样的效果，但打包后的代码是压缩过的，加载速度会更快。

新手常遇到的几个报错及解决办法

报错1：输入`pnpm create vite`之后跳出“无法将 pnpm 项识别为 cmdlet、函数、脚本文件或可运行程序的名称”

这个报错的原因是pnpm没有全局安装成功,或者环境变量没配置好，解决办法：

先检查一下是不是真的没安装成功,输入npm list -g pnpm看看有没有显示pnpm的版本号；
如果没显示,重新输入npm install -g pnpm安装；
如果显示了但还是报错,重启电脑试试；
重启之后还是不行,就搜对应的教程调整环境变量。

报错2：输入`pnpm install`之后下载依赖包很慢或者报错

这个报错的原因一般是网络不好,或者依赖源不是国内的，解决办法：

先确认一下pnpm的依赖源是不是淘宝的,输入pnpm config get registry看看，如果不是的话，输入pnpm config set registry https://registry.npmmirror.com切换；
如果还是慢或者报错,可以试试用cnpm，但不太推荐，因为cnpm有时候会和pnpm冲突；
还可以试试挂梯子,但要注意安全。

报错3：启动开发服务器之后打开浏览器一片空白，或者控制台里报错

这个报错的原因有很多,新手最常见的是：

路径写错了,比如<img>标签的src路径写错了；
代码语法错误,比如漏写了括号、分号、引号；
没有从vue包里导入ref、watch这些函数；
在<script setup>标签里用了this关键字（组合式API里不用this，直接用变量名.value就行）。

解决办法：

先打开浏览器的开发者工具（Windows按F12，Mac按Command+Option+I），看看Console控制台里有没有报错，根据报错信息找问题；
检查一下<template>标签里的路径是不是正确，特别是public和src/assets文件夹里的静态资源路径——public文件夹里的资源直接用根路径，比如<img src="/favicon.ico">；src/assets文件夹里的资源需要用相对路径或者import导入，比如<img src="./assets/vue.svg">或者import vueLogo from './assets/vue.svg'然后<img :src="vueLogo">；
检查一下代码语法,有没有漏写东西；
检查一下有没有导入需要的函数；
检查一下有没有用this关键字。