Vue 是一套用于构建用户界面的渐进式框架。本教程面向有 JavaScript 基础的前端开发者，帮助你从零搭建 Vue 3 项目并掌握日常开发所需的核心能力。

环境准备

必备工具

工具说明
Node.js推荐 LTS 版本（18+），可用 nvm 管理多版本
包管理器npm / pnpm / yarn 任选其一，本教程以 npm 为例
编辑器VS Code + Vue - Official 插件
浏览器Chrome，配合开发者工具调试

创建项目

npm create vue@latest my-vue-app
cd my-vue-app
npm install
npm run dev

脚手架会询问是否启用 TypeScript、Router、Pinia 等，初学阶段可全部选「是」，便于后续扩展。

核心概念

单文件组件（SFC）

Vue 组件通常写在 .vue 文件中，包含模板、逻辑与样式三部分：

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

const count = ref(0)
const increment = () => count.value++
</script>

<template>
<button @click="increment">点击 {{ count }} 次</button>
</template>

<style scoped>
button { padding: 8px 16px; }
</style>

响应式数据

Vue 3 推荐使用 Composition API：

  • ref：包装基本类型或对象引用
  • reactive：包装对象，直接修改属性即可触发更新
  • computed：派生状态
  • watch / watchEffect：监听数据变化
import { ref, computed } from 'vue'

const firstName = ref('Livis')
const lastName = ref('Snack')
const fullName = computed(() => `${firstName.value} ${lastName.value}`)

模板语法速查

  • 文本插值：{{ message }}
  • 属性绑定：:href="url" 或 v-bind:href
  • 事件监听：@click="handler" 或 v-on:click
  • 条件渲染：v-if / v-else-if / v-else
  • 列表渲染：v-for="item in list" :key="item.id"
  • 双向绑定：v-model="keyword"

组件通信

场景方案
父 → 子props 向下传递
子 → 父emit 触发事件
跨层级provide / inject
全局状态Pinia 状态管理

父组件示例：

<ChildComponent :title="pageTitle" @save="onSave" />

子组件示例：

<script setup>
const props = defineProps({ title: String })
const emit = defineEmits(['save'])
</script>

路由与页面

安装 Vue Router 后，在 src/router/index.js 中配置：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', name: 'home', component: Home },
{ path: '/about', name: 'about', component: () => import('../views/About.vue') },
],
})

export default router

懒加载路由可减小首屏体积，适合博客、后台等多页面应用。

数据请求

推荐使用 fetch 或 axios：

import { ref, onMounted } from 'vue'

const list = ref([])

onMounted(async () => {
const res = await fetch('/api/posts')
list.value = await res.json()
})

配合 onMounted、onUnmounted 管理副作用，避免在组件销毁后仍更新状态。

项目结构建议

src/
├── assets/        # 静态资源
├── components/    # 通用组件
├── views/         # 页面级组件
├── router/        # 路由配置
├── stores/        # Pinia 状态
├── utils/         # 工具函数
├── App.vue
└── main.js

构建与部署

npm run build    # 输出到 dist/
npm run preview  # 本地预览生产构建

dist 目录可部署到 Nginx、Vercel、GitHub Pages 等静态托管平台。若需对接后端 API，注意配置反向代理或 CORS。

学习路线

  1. 熟悉模板语法与响应式基础
  2. 掌握组件拆分与 props / emit
  3. 学习 Vue Router 与 Pinia
  4. 了解组合式函数（Composables）复用逻辑
  5. 阅读官方文档进阶章节：动画、Teleport、Suspense

本站相关文章

延伸阅读