Vue.js 开发入门指南：从零开始构建你的第一个前端应用

最新推荐文章于 2025-04-16 09:24:20 发布

zru_9602

最新推荐文章于 2025-04-16 09:24:20 发布

阅读量2.1k

点赞数 43

分类专栏：热门话题文章标签：前端 vue.js javascript

本文链接：https://blog.youkuaiyun.com/zru_9602/article/details/145489902

版权

热门话题专栏收录该内容

30 篇文章

订阅专栏

Vue.js 开发入门指南：从零开始构建你的第一个前端应用

Vue.js 是一个流行的渐进式 JavaScript 框架，它以简单、灵活、性能优秀而著称，非常适合构建现代 Web 应用。对于前端新手来说，Vue 也是一个很友好的选择。

在本教程中，你将学习：

Vue.js 的基本概念
如何搭建 Vue 开发环境
编写你的第一个 Vue 应用
Vue 的核心功能（模板语法、响应式、指令、组件）

1. Vue.js 简介

Vue.js 是由 尤雨溪 开发的一个轻量级前端框架，主要用于构建用户界面（UI）。它的核心思想是：

数据驱动视图（MVVM 模型）
组件化开发
双向数据绑定

相比于 React 和 Angular，Vue 更加易学易用，适合快速上手。

2. 搭建 Vue 开发环境

方式 1：直接使用 `<script>` 引入（适合快速试验）

你可以在 HTML 文件中直接引入 Vue：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 入门</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
    </div>

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

打开浏览器，你会看到 Hello, Vue! 这个文本，它是 Vue 根据 message 变量动态渲染的。

方式 2：使用 Vue CLI 搭建项目（适合正式开发）

Vue CLI 是 Vue 提供的命令行工具，它能帮助我们快速搭建 Vue 项目。安装方法：

# 安装 Vue CLI（如果已经安装，可以跳过）
npm install -g @vue/cli

# 创建 Vue 项目
vue create my-vue-app

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

# 启动开发服务器
npm run dev

然后，在浏览器中访问 http://localhost:5173/，你就可以看到 Vue 的默认页面了！

3. Vue 的核心功能介绍

3.1 模板语法（Template Syntax）

Vue 使用 HTML 作为模板，并通过 双大括号 {{ }} 进行数据绑定：

<div id="app">
    <p>你好，{{ name }}！</p>
</div>

<script>
const app = Vue.createApp({
    data() {
        return {
            name: "小明"
        };
    }
}).mount("#app");
</script>

你可以更改 name 的值，Vue 会自动更新 UI。

3.2 响应式数据（Reactivity）

Vue 通过 data() 函数管理响应式数据，任何数据的变化都会自动反映到界面上：

<div id="app">
    <p>当前计数：{{ count }}</p>
    <button @click="count++">增加</button>
</div>

<script>
const app = Vue.createApp({
    data() {
        return {
            count: 0
        };
    }
}).mount("#app");
</script>

点击按钮后，count 的值会实时更新，无需手动操作 DOM。

3.3 Vue 指令（Directives）

Vue 提供了一些指令（以 v- 开头）来帮助开发，比如：

v-bind 绑定属性
v-if / v-else 条件渲染
v-for 列表渲染
v-model 双向数据绑定

示例：

<div id="app">
    <input v-model="name" placeholder="请输入你的名字">
    <p v-if="name">你好，{{ name }}！</p>
    <ul>
        <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
</div>

<script>
const app = Vue.createApp({
    data() {
        return {
            name: "",
            items: ["苹果", "香蕉", "橙子"]
        };
    }
}).mount("#app");
</script>

当你在输入框中输入内容，<p> 里的文本会实时更新。

3.4 组件化开发（Components）

Vue 组件化让代码更可复用。例如，我们可以创建一个 Counter 组件：

<div id="app">
    <counter></counter>
    <counter></counter>
</div>

<script>
const Counter = {
    template: `
        <div>
            <p>计数：{{ count }}</p>
            <button @click="count++">增加</button>
        </div>
    `,
    data() {
        return { count: 0 };
    }
};

const app = Vue.createApp({});
app.component("counter", Counter);
app.mount("#app");
</script>

这样，每个 <counter> 组件都有自己的 count 变量，实现了复用。

4. Vue Router 与 Vuex（进阶）

4.1 Vue Router（路由管理）

Vue Router 让 Vue 支持单页面应用（SPA）。可以这样定义路由：

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

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

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

export default router

然后在 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')

4.2 Vuex / Pinia（状态管理）

Vuex（Vue 2）和 Pinia（Vue 3 推荐）用于管理全局状态：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
    state: () => ({ count: 0 }),
    actions: {
        increment() {
            this.count++
        }
    }
})

然后在组件中使用：

<script setup>
import { useCounterStore } from './store'

const store = useCounterStore()
</script>

<template>
  <p>Count: {{ store.count }}</p>
  <button @click="store.increment">增加</button>
</template>