Vue3 小白入门教程：从零基础到实战-复习

Vue3 小白入门教程：从零基础到实战（附完整项目 demo）

哈喽！这篇教程全程抛弃 Vue2 老旧写法，只讲 Vue3 官方标准 <script setup> 语法，全程贴合完整项目 demo 学习，先看懂项目目录、再逐文件写代码，无复杂术语、无跳跃步骤，新手复制粘贴就能跑通，看完直接上手做简易项目～

一、Vue3 极简认知（小白先看懂）

Vue3 是一款前端网页框架，主打响应式交互，不用繁琐操作 DOM，修改数据页面就能自动更新，是当下前端求职、项目开发的主流框架，上手难度极低，适合零基础入门。

二、5 分钟搭建 Vue3 项目 + 完整目录详解

2.1 前置准备

安装 Node.js（版本 ≥18.0 LTS），官网直达：https://nodejs.org/，全程默认安装即可，无需额外配置。

2.2 3 行命令创建 + 启动项目

打开电脑命令行（CMD / 终端），依次输入以下代码，项目名可自定义，这里统一用 vue3-demo：

# 创建 Vue3 最新项目
npm create vue@latest

# 进入项目文件夹
cd vue3-demo

# 安装依赖 + 本地启动
npm install
npm run dev

启动成功后，浏览器打开 http://localhost:5173/，看到 Vue3 默认页面，代表项目搭建成功！

2.3 【核心】Vue3 标准项目目录（小白必看懂）

创建完项目后，文件夹结构固定如下，每个目录都有明确作用，后续 demo 全部对应以下文件位置，学习时直接找对应文件夹即可：

vue3-demo/
├── node_modules/       # 项目依赖包（不用动）
├── public/             # 静态资源（不用动）
├── src/                # 核心开发文件夹（所有代码都在这里写）
│   ├── assets/         # 存放图片、公共样式
│   ├── components/     # 存放子组件（页面拆分后写这里）
│   ├── pages/          # 新建文件夹！存放路由页面（首页/关于页）
│   ├── router/         # 新建文件夹！存放路由配置
│   ├── store/          # 新建文件夹！存放全局状态
│   ├── App.vue         # 根组件（项目主页面，最先改这里）
│   └── main.js         # 项目入口文件（全局配置写这里）
├── index.html          # 项目入口页面（不用动）
└── package.json        # 项目配置（不用动）

小白学习提示：后续所有实操代码，都严格对应以上目录，不用乱找文件，跟着步骤写就行！

三、Vue3 核心：单文件组件标准写法

Vue3 所有页面都是 .vue 后缀的单文件，固定分为三部分，也是全程唯一写法，直接套用即可：

<template>
  <!-- 页面结构：写按钮、输入框、文字等内容 -->
  <div class="demo-box">Vue3 项目 demo</div>
</template>

<!-- Vue3 唯一推荐语法糖，全程用这个，不用记其他写法 -->
<script setup>
// 页面逻辑：写数据、方法、功能实现
</script>

<style scoped>
/* 页面样式：scoped 代表样式只在当前组件生效 */
</style>

后续所有 demo，都在这个模板基础上添加代码，优先修改根组件 src/App.vue。

四、demo1：响应式数据（页面自动更新）

Vue3 核心就是响应式，小白只需要记两个 API：ref（基础数据：数字 / 字符串 / 布尔值）、reactive（对象 / 数组），修改数据后页面自动刷新。

操作文件：src/App.vue

4.1 ref 定义基础数据

<template>
  <div>
    <h3>姓名：{{ name }}</h3>
    <p>年龄：{{ age }}</p>
  </div>
</template>

<script setup>
// 第一步：导入 ref
import { ref } from 'vue'

// 第二步：定义响应式数据
const name = ref('Vue小白')
const age = ref(18)

// 第三步：脚本内修改数据，必须加.value
age.value = 20
</script>

4.2 reactive 定义对象 / 数组

<template>
  <div>
    <p>用户名：{{ userInfo.username }}</p>
    <p>学习进度：{{ userInfo.progress }}%</p>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

// 定义响应式对象
const userInfo = reactive({
  username: '前端新手',
  progress: 30
})

// 直接修改数据，无需加.value
userInfo.progress = 50
</script>

五、demo2：页面交互（点击 + 双向绑定）

学会数据后，直接做页面交互，这是日常开发最常用的功能，全程无复杂逻辑，复制就能用。

操作文件：src/App.vue

5.1 点击事件（@click）

点击按钮修改数据，实现数字累加效果：

<template>
  <p>当前数字：{{ count }}</p>
  <!-- 绑定点击事件 -->
  <button @click="addCount">点我+1</button>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)

// 定义点击方法
const addCount = () => {
  count.value++
}
</script>

5.2 双向绑定（v-model）

输入框打字，页面实时同步显示，Vue3 最实用的功能：

<template>
  <!-- 双向绑定输入框 -->
  <input type="text" v-model="inputVal" placeholder="请输入内容" />
  <p>实时输入：{{ inputVal }}</p>
</template>

<script setup>
import { ref } from 'vue'
const inputVal = ref('')
</script>

六、demo3：组件拆分（父传子 + 子传父）

项目页面变复杂后，需要拆分组件，方便代码复用，对应项目目录 src/components/ 文件夹。

6.1 新建子组件

操作文件：src/components/Child.vue

<template>
  <div class="child-box">
    <h4>我是子组件</h4>
  </div>
</template>

<script setup>
</script>

6.2 父传子（父组件给子组件传值）

子组件 Child.vue 接收数据：

<template>
  <div>
    <p>父组件传来的数据：{{ msg }}</p>
  </div>
</template>

<script setup>
// 接收父组件数据
defineProps({
  msg: String
})
</script>

父组件 App.vue 传递数据：

<template>
  <!-- 引入子组件并传值 -->
  <Child msg="我是父组件，我要传值了，请接受" />
</template>

<script setup>
// 导入子组件
import Child from './components/Child.vue'
</script>

6.3 子传父（子组件给父组件传值）

子组件通过自定义事件传值，父组件监听接收即可。

子组件 Child.vue：

<template>
  <button @click="sendToParent">点我传给父组件</button>
</template>

<script setup>
// 1. 声明自定义事件
const emit = defineEmits(['child-event'])

// 2. 触发事件，向父组件传值
const sendToParent = () => {
  emit('child-event', '爸爸，我考了100分！')
}
</script>

父组件 App.vue：

<template>
  <Child msg="我是父组件" @child-event="handleChildMsg" />
  <p v-if="childMsg">子组件传来的数据：{{ childMsg }}</p>
</template>

<script setup>
import { ref } from 'vue'
import Child from './components/Child.vue'

const childMsg = ref('')

// 接收子组件数据
const handleChildMsg = (data) => {
  childMsg.value = data
}
</script>

七、demo4：页面生命周期（加载请求）

小白只需要记最常用的 onMounted：页面加载完成后自动执行，适合刚进页面就请求数据、初始化操作。

操作文件：src/App.vue

<script setup>
import { ref, onMounted } from 'vue'
const pageData = ref('')

// 页面加载完成自动执行
onMounted(() => {
  pageData.value = '页面加载完成，初始化数据成功！'
  console.log('页面渲染完毕')
})
</script>

八、demo5：路由跳转（多页面切换）

实现首页、关于页等多页面切换，对应目录 src/router/、src/pages/。

8.1 安装路由依赖

npm install vue-router@4

8.2 配置路由文件

操作文件：src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
// 导入页面组件
import Home from '../pages/Home.vue'
import About from '../pages/About.vue'

const routes = [
  { path: '/', redirect: '/home' },
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

8.3 入口文件挂载路由

操作文件：src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

8.4 页面跳转使用

操作文件：src/App.vue

<template>
  <!-- 路由跳转 -->
  <router-link to="/home">首页</router-link>
  <router-link to="/about">关于页</router-link>
  <!-- 路由页面展示区域 -->
  <router-view />
</template>

九、demo6：全局状态（Pinia 数据共享）

Vue3 官方推荐全局状态管理，多个页面共用一份数据，对应目录 src/store/。

9.1 安装 Pinia

npm install pinia

9.2 定义全局状态

操作文件：src/store/index.js

import { defineStore } from 'pinia'

export const useDemoStore = defineStore('demo', {
  state: () => ({
    // 全局数据
    token: '123456789'
  }),
  actions: {
    // 修改全局数据的方法
    setToken(val) {
      this.token = val
    }
  }
})

9.3 页面使用全局数据

<script setup>
import { useDemoStore } from './store'
const demoStore = useDemoStore()

// 获取全局数据
console.log(demoStore.token)
// 修改全局数据
demoStore.setToken('987654321')
</script>

十、demo7：快速美化（Element Plus）

不用手写复杂样式，直接用现成 UI 组件，快速做美观页面。

10.1 安装 Element Plus

npm install element-plus

10.2 全局引入

操作文件：src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

10.3 页面使用组件

<template>
  <el-button type="primary">Vue3 按钮</el-button>
  <el-input placeholder="Vue3 输入框"></el-input>
</template>

十一、小白 demo 学习必记总结

全程只用 <script setup> 语法，这是 Vue3 唯一标准写法
基础数据用 ref，对象 / 数组用 reactive，脚本修改 ref 必须加 .value
点击用 @click，输入框同步用 v-model，零基础必掌握
严格对照项目目录写代码，组件、路由、状态各司其职
所有 demo 代码均可直接复制运行，先跑通再理解逻辑

按照这个目录 + demo 顺序，从头到尾敲一遍代码，就能彻底掌握 Vue3 基础开发，后续直接上手做项目完全无压力～🎉

posted @ 2026-04-05 23:05 橘子偏爱橙子阅读(33) 评论(0) 收藏举报

刷新页面返回顶部

橘子偏爱橙子

Vue3 小白入门教程：从零基础到实战-复习

Vue3 小白入门教程：从零基础到实战（附完整项目 demo）

一、Vue3 极简认知（小白先看懂）

二、5 分钟搭建 Vue3 项目 + 完整目录详解

2.1 前置准备

2.2 3 行命令创建 + 启动项目

2.3 【核心】Vue3 标准项目目录（小白必看懂）

三、Vue3 核心：单文件组件标准写法

四、demo1：响应式数据（页面自动更新）

4.1 ref 定义基础数据

4.2 reactive 定义对象 / 数组

五、demo2：页面交互（点击 + 双向绑定）

5.1 点击事件（@click）

5.2 双向绑定（v-model）

六、demo3：组件拆分（父传子 + 子传父）

6.1 新建子组件

6.2 父传子（父组件给子组件传值）

6.3 子传父（子组件给父组件传值）

七、demo4：页面生命周期（加载请求）

八、demo5：路由跳转（多页面切换）

8.1 安装路由依赖

8.2 配置路由文件

8.3 入口文件挂载路由

8.4 页面跳转使用

九、demo6：全局状态（Pinia 数据共享）

9.1 安装 Pinia

9.2 定义全局状态

9.3 页面使用全局数据

十、demo7：快速美化（Element Plus）

10.1 安装 Element Plus

10.2 全局引入

10.3 页面使用组件

十一、小白 demo 学习必记总结

公告