Vue 环境搭建

学 Vue 不需要装一堆东西。最简单的体验方式只需一个 HTML 文件和一个浏览器。但要做正经项目,还是得用 Vite 构建工具。本章介绍两种方式,你按需选择。

方式一:CDN 直接引入(适合学习、小工具)

如果只是想快速体验 Vue,或者做一个单页小工具,直接通过 <script> 标签引入 Vue 即可,不需要 Node.js、不需要 npm。新建一个 index.html 文件,内容如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>Vue CDN 体验</title>
  <!-- 方式一:从 CDN 引入 Vue 3 的全局构建版 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">{{ message }}</div>

  <script>
    const { createApp } = Vue;
    createApp({
      data() {
        return { message: "Hello, Vue!" };
      },
    }).mount("#app");
  </script>
</body>
</html>

双击在浏览器打开,就能看到页面上显示 "Hello, Vue!"。这种写法用的是 Vue 的全局构建版(vue.global.js),把 Vue 挂到全局 window.Vue 上,通过解构拿到 createApp。

ESM 写法(更现代)

现代浏览器原生支持 ES 模块,你也可以直接 import:

<!-- 浏览器原生支持 <script type="module">,可直接 import ES 模块 -->
<script type="module">
  // 方式二:用 ESM 版本,适合不想配构建工具的轻量场景
  import { createApp, ref } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";

  createApp({
    setup() {
      const count = ref(0);
      return { count };
    },
  }).mount("#app");
</script>

这种写法的好处是不污染全局,且能用上浏览器的模块缓存。但不能写 .vue 文件——浏览器看不懂 SFC,需要构建工具编译。所以 CDN 方式只适合不写组件的简单页面。

CDN 引入适合:学习教程时跟着敲、做个计算器/小工具、给老项目局部加交互。但只要你想把页面拆成多个组件复用,就得用下面的 Vite。

方式二:Vite 脚手架(推荐,适合正式项目)

Vue 官方推荐的脚手架是基于 Vite 的 create-vue。Vite 是尤雨溪本人写的构建工具,利用浏览器原生 ESM 实现了秒级冷启动和闪电般的热更新,远快于老的 Vue CLI(已停止维护,新项目不要再用)。

前置条件:装好 Node.js 18+(去 nodejs.org 下载 LTS 版,自带 npm)。然后在终端执行:

# 推荐方式:用 Vite 创建 Vue 项目(官方脚手架)
npm create vue@latest

# 交互式问答(可选 TypeScript / Router / Pinia / ESLint 等):
# ? Project name: » my-vue-app
# ? Add TypeScript? » Yes / No
# ? Add JSX Support? » No
# ? Add Vue Router? » Yes
# ? Add Pinia? » Yes
# ? Add Vitest for Unit Testing? » No
# ? Add ESLint for code quality? » Yes

cd my-vue-app
npm install        # 安装依赖
npm run dev        # 启动开发服务器(默认 http://localhost:5173)

执行 npm run dev 后,终端会显示一个本地地址(默认 http://localhost:5173),浏览器打开就能看到欢迎页。试着改一下 src/App.vue 里的内容保存——页面不刷新就实时更新,这就是 Vite 的"热模块替换(HMR)"。

项目目录结构

生成出来的项目结构长这样(src 是你的主战场,其他目录大多自动管理):

my-vue-app/
├── node_modules/         # 依赖包(npm install 后生成)
├── public/               # 静态资源(不参与构建)
│   └── favicon.ico
├── src/                  # 源代码(主要工作目录)
│   ├── assets/           # 会被构建处理的资源
│   ├── components/       # 可复用组件
│   │   └── HelloWorld.vue
│   ├── views/            # 页面级组件
│   ├── router/           # 路由配置
│   │   └── index.js
│   ├── stores/           # Pinia 状态
│   ├── App.vue           # 根组件
│   └── main.js           # 应用入口
├── index.html            # HTML 模板
├── package.json          # 项目依赖与脚本
└── vite.config.js        # Vite 配置

几个关键文件:

入口文件详解

打开 src/main.js,内容大致如下(选装了 Router 和 Pinia 的话):

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { createPinia } from "pinia";

// 1. 创建应用实例
const app = createApp(App);

// 2. 安装插件(顺序不影响)
app.use(createPinia());   // 状态管理
app.use(router);          // 路由

// 3. 挂载到 #app 节点
app.mount("#app");

这是 Vue 应用的"启动流程":创建应用实例 → 安装各种插件 → 挂载到 DOM。Vue 的插件机制让 Router、Pinia、UI 库都能通过 app.use() 接入,非常统一。

开发工具推荐

VS Code 几乎是 Vue 开发的事实标准。装好下面两个扩展,体验会有质的提升:

# VS Code 必装的两个扩展:
# 1. Vue - Official(原 Volar)  —— Vue 3 语言支持、语法高亮、类型检查
# 2. ESLint                       —— 代码规范检查

# 推荐的 VS Code 配置(.vscode/settings.json):
{
  "editor.formatOnSave": true,
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  }
}

另外强烈建议装浏览器扩展 Vue DevTools(Chrome/Firefox/Edge 都有)。它能让你实时看到组件树、当前状态、路由信息、触发的事件——调试效率翻倍,几乎是 Vue 开发者的"第二双眼睛"。

CDN 还是 Vite?怎么选

本系列后续代码示例都假设你在 Vite 项目里写,但示例本身是单文件组件,放到 CDN 项目里也能跑(只需把 import 改成全局变量解构)。

小结

这一章你学会了两种装环境的方法:CDN 引入适合学习,Vite 脚手架适合做项目。还了解了项目目录结构和入口文件的职责。下一篇我们正式进入 Vue 的核心——模板语法,看看双花括号和那些 v- 开头的指令都是干嘛的。

← 上一篇 Vue.js 简介

下一篇 Vue 模板语法 →

✈️💬