源本科技 | 码上会

logo
源本科技 码上会
一站式数字化转型技能学习平台

Vue3 快速入门

2026/04/21
2
0

前提条件

开始学习前，请确保你的开发环境满足以下要求：

  1. 掌握基础命令行操作：可在终端中切换目录、执行指令

  2. 已安装 Node.js：版本要求 18.0 及以上，推荐搭配 npm 8.0+ 包管理器

  3. 网络环境正常：可正常访问 npm 官方源（若遇网络问题，可关闭全局代理）

创建 Vue 应用

我们使用 Vite 官方脚手架 create-vite 创建项目，这是 Vue 3 官方推荐的最新项目初始化方式，替代了传统的 Vue CLI。

初始化项目

  1. 打开终端，切换到你想存放项目的文件夹

  2. 执行项目创建命令：

    npm create vite@latest
    # 命令执行效果案例
Need to install the following packages:
create-vite@9.0.5
Ok to proceed? (y) y


> npx
> create-vite

│
◇  Project name:
│  my-vue-app
│
◇  Select a framework:
│  Vue
│
◇  Select a variant:
│  TypeScript
│
◇  Install with npm and start now? # 直接安装依赖
│  Yes

  3. 按照终端交互提示完成配置（核心步骤）：

    • 输入项目名称（例：my-vue-app）

    • 选择框架：Vue

    • 选择开发语言：JavaScript / TypeScript

安装依赖与启动项目

项目创建完成后，依次执行以下命令：

# 进入项目根目录
cd my-vue-app

# 安装项目依赖（必须执行）
npm install

# 启动开发服务器
npm run dev

启动成功后，在浏览器访问 http://localhost:5173，即可看到默认的 Vue 应用页面。

精简项目结构

Vite 默认生成的模板包含示例文件，我们删除冗余文件，保留最简洁的项目结构，方便从零开发。

删除无用文件

删除以下 2 个文件即可：

  • src/components/HelloWorld.vue（示例组件）

  • src/style.css（默认全局样式）

修改入口文件

打开 src/main.ts（TS 项目）或 src/main.js（JS 项目），保留最简代码：

// 导入 Vue 核心创建应用方法
import { createApp } from 'vue'
// 导入根组件
import App from './App.vue'

// 创建 Vue 实例并挂载到页面 #app 节点
createApp(App).mount('#app')

重置根组件

打开 src/App.vue，清空默认内容，保留 Vue 单文件组件（SFC）的基础结构：

<!-- 脚本：组合式 API 语法糖（Vue 3 最新标准） -->
<script setup lang="ts">

</script>

<!-- 模板：页面结构 -->
<template>

</template>

<!-- 样式：scoped 表示样式仅作用于当前组件 -->
<style scoped>

</style>

核心特性

我们通过极简代码，快速掌握 Vue 3 最核心的特性，所有写法均为最新标准，无任何旧版兼容代码。

核心知识点

  1. 组合式 API：Vue 3 官方推荐的代码组织方式，<script setup> 是其语法糖，简洁高效

  2. SFC 单文件组件：一个 .vue 文件包含 模板 + 脚本 + 样式，是 Vue 的核心特色

  3. 响应式数据：使用 ref 创建基础类型响应式数据

  4. 事件绑定：使用 @ 简写绑定点击等事件

  5. 双向绑定：使用 v-model 实现数据与视图自动同步

  6. 局部样式：scoped 关键字防止样式污染其他组件

案例代码

将以下代码写入 App.vue，直接运行查看效果：

<script setup lang="ts">
// 从 Vue 中导入 ref 工具（创建响应式数据）
import { ref } from "vue"

// 定义响应式变量：计数器，初始值为 0
const count = ref<number>(0)

// 定义方法：修改计数器的值
const addCount = () => {
  // ref 创建的变量，必须通过 .value 访问/修改值
  count.value++
}
</script>

<template>
  <div>
    <!-- 插值表达式：渲染数据 -->
    <h1>计数器：{{ count }}</h1>
    <!-- 事件绑定：直接简写修改数据 -->
    <button @click="count++">点击 + 1</button>
    <!-- 事件绑定：调用方法 -->
    <button @click="addCount">调用方法 + 1</button>
    <!-- 双向绑定：输入框修改会同步更新 count 变量 -->
    <input type="number" v-model="count" placeholder="输入数字修改计数器">
  </div>
</template>

<style scoped>
/* 局部样式：仅当前组件生效 */
button {
  margin: 0 8px;
  padding: 4px 12px;
  cursor: pointer;
}
</style>

TypeScript 类型支持

使用 TypeScript 的项目中，需要为 .vue 文件提供类型声明，让编辑器获得代码提示和类型检查。

类型声明文件

文件路径：src/vite-env.d.ts 最新版 Vite + Vue 项目会自动生成该文件，无需手动修改，代码如下：

/// <reference types="vite/client" />

// 声明 .vue 组件的模块类型
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

作用说明

该文件告诉 TypeScript：.vue 是合法的模块，避免编辑器报错，同时提供组件类型提示。

数据绑定

数据绑定是 Vue 的核心能力，分为 插值表达式、单向绑定、双向绑定 三种，用法和场景各不相同。

插值表达式

最基础的数据渲染方式，使用 {{ 变量名 }} 直接将数据渲染到模板中：

<template>
  <p>姓名：{{ name }}</p>
</template>

单向数据绑定

使用 v-bind:（简写为 :）将数据绑定到 HTML 属性上，数据 → 视图 单向同步：

  • 适用场景：标签属性（src、class、disabled 等）

  • 特点：视图修改不会影响原始数据

<!-- 完整写法 -->
<input v-bind:value="name">
<!-- 简写写法（推荐） -->
<input :value="name">

双向数据绑定

使用 v-model 实现 数据 ↔ 视图 自动同步，是表单元素的专用指令：

  • 适用场景：input、textarea、select 等表单控件

  • 原理：v-model 是 :value + @input 的语法糖

<input v-model="name">

补充说明

  1. 网络问题：执行 npm install 失败时，关闭全局代理 / 梯子，或切换淘宝 npm 镜像

  2. 开发规范：始终使用 <script setup> 语法，不使用旧版选项式 API

  3. 热更新：Vite 支持极速热更新，修改代码后浏览器会自动刷新，无需重启服务

  4. 生产构建：开发完成后，执行 npm run build 打包项目，生成可部署的静态文件