2、开发环境搭建：Vite 的安装与使用，创建第一个 Vue3 项目

好，咱们正式开始动手了。

搭建开发环境这件事，说实话，在 Vue2 时代大家习惯用 Vue CLI。但到了 Vue3，官方推荐的是 Vite。为什么？一个字：快。两个字：真快。

我第一次用 Vite 启动项目时，说实话有点懵——怎么瞬间就起来了？以前用 webpack 至少得等个十几秒，Vite 几乎是秒开。后来我才明白，它用的是浏览器原生 ES 模块，开发时根本不做打包。

2.1 环境准备：Node.js 版本检查

在装 Vite 之前，先确认你的 Node.js 版本。Vite 要求 Node.js 版本 >= 12.0.0，但我个人建议用 16+ 的 LTS 版本，省心。

打开终端，输入：

node -v
npm -v

如果版本太低，去 nodejs.org 下载最新的 LTS 版本就行。嗯，这一步没什么技术含量，但很多人会卡在这里——我见过一个同事，折腾了半天发现是 Node 版本太老，Vite 直接报错。

注意： 如果你用的是 Windows，建议用 nvm-windows 管理 Node 版本。我曾经因为版本切换问题浪费过一下午，后来老老实实装了 nvm。

2.2 使用 Vite 创建第一个 Vue3 项目

环境准备好了，咱们直接创建项目。Vite 提供了一个脚手架命令，非常简单：

npm create vite@latest my-vue3-app -- --template vue

这里解释一下：

  • my-vue3-app 是你的项目名，可以随便改
  • --template vue 指定使用 Vue 模板

运行后，你会看到类似这样的输出：

✔ Project created!
  cd my-vue3-app
  npm install
  npm run dev

按提示操作：

cd my-vue3-app
npm install
npm run dev

然后打开浏览器，访问 http://localhost:5173，就能看到你的第一个 Vue3 项目了。

小技巧： 如果你不想每次都输入 --template vue，可以用 npm create vite@latest 然后选择 Vue 模板。我个人习惯用命令行参数，因为快。

2.3 项目结构解析

创建完成后，咱们看看项目长什么样。用 VS Code 打开，你会看到这样的目录结构：

my-vue3-app/
├── index.html
├── package.json
├── vite.config.js
├── src/
│   ├── main.js
│   ├── App.vue
│   └── components/
│       └── HelloWorld.vue
└── public/
    └── favicon.ico

这里有几个关键文件：

文件/目录 作用
index.html 入口 HTML 文件，Vite 把它当作真正的入口
vite.config.js Vite 配置文件，类似 Vue CLI 的 vue.config.js
src/main.js 应用入口 JS 文件，创建 Vue 实例
src/App.vue 根组件，所有组件都挂载到这里
src/components/ 存放组件的目录

你可能会问：为什么 index.html 在根目录而不是 public 里？

这是因为 Vite 把 index.html 当作真正的入口文件，而不是像 webpack 那样把它当作模板。说白了，Vite 更贴近浏览器的工作方式。

2.4 启动与热更新体验

现在项目已经跑起来了。试着修改 src/App.vue 里的内容，比如把 Hello World 改成 我的第一个 Vue3 项目。

保存后，你会发现浏览器页面自动更新了。这就是 Vite 的 HMR（热模块替换），而且速度极快——我实测过，修改一个组件，刷新时间基本在 50ms 以内。

核心优势： Vite 的 HMR 是基于 ESM 的，只更新修改的模块，不像 webpack 那样需要重新打包整个 chunk。所以项目越大，Vite 的优势越明显。

2.5 常用 Vite 命令

开发过程中，这几个命令你会经常用到：

npm run dev      # 启动开发服务器
npm run build    # 构建生产版本
npm run preview  # 预览构建后的结果

其中 npm run preview 我建议你养成习惯。因为 npm run dev 和 npm run build 的行为有时不一样，预览一下能提前发现问题。我曾经在构建后才发现某个图片路径不对，就是因为没做预览。

2.6 配置 Vite：vite.config.js

Vite 的配置非常简洁。打开 vite.config.js，默认是这样的：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

如果你需要配置别名、代理等，可以这样：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
})

这里我特别说一下别名配置。在 Vue2 时代，配置别名需要各种折腾，Vite 里直接写 @/components/xxx 就能用，非常直观。

个人习惯： 我一般会把 server.port 改成 3000，因为 5173 这个端口我老是记不住。另外，代理配置在前后端联调时几乎是必备的，建议提前配好。

2.7 从 Vue CLI 迁移到 Vite

如果你之前用的是 Vue CLI，想迁移到 Vite，其实不难。核心步骤就这几步：

  1. 删除 node_modules 和 package-lock.json
  2. 修改 package.json，把 vue-cli-service 相关的脚本换成 Vite 的
  3. 把 public/index.html 移到根目录，并调整路径
  4. 把 vue.config.js 的配置迁移到 vite.config.js
  5. 重新 npm install 并启动

我在迁移一个中型项目时，整个过程大概花了 2 小时。最麻烦的是处理一些 webpack 特有的 loader 和插件，但大部分都有 Vite 的替代方案。

避坑指南： 我曾经在迁移时遇到一个问题——项目里用了 require 引入图片，Vite 默认不支持 CommonJS。解决方案是把 require 改成 import，或者在 vite.config.js 里开启 commonjsOptions。

2.8 小结

好了，环境搭建这部分就到这里。总结一下：

  • Vite 是 Vue3 官方推荐的构建工具，快是它的核心优势
  • 用 npm create vite@latest 创建项目，简单直接
  • 项目结构清晰，配置灵活
  • 从 Vue CLI 迁移过来也不复杂，但要注意一些细节

下一章，咱们会深入 Vue3 的核心——Composition API。说实话，这才是 Vue3 最让我兴奋的部分。准备好了吗？

← 上一章 📖 返回目录 下一章 →