Vue 2 入门与安装

详细讲解 Vue 2.0 简介、MVVM 模式及常见安装方式，助你快速入门 Vue 开发。

🎯 引言

学会这篇文章，你将了解 Vue 2.0 框架的核心理念和设计模式，掌握如何通过多种方式安装 Vue 2.0 并快速开始前端开发。Vue 2.0 是目前非常流行的渐进式 JavaScript 框架，适合构建交互式网页应用。理解它的基本原理和安装方法后，你可以轻松开发各种响应式的前端项目。

🔍 Vue 2.0 简介

Vue 2.0 是一款采用渐进式架构的 JavaScript 框架，专注于构建用户界面。它由尤雨溪在 2016 年发布，凭借其灵活、高效和易学的特点，迅速赢得了广泛的关注和应用。

Vue 的设计目标是让开发者能够以声明式的方式构建页面，通过简洁的模板语法和强大的响应式系统，极大地降低前端开发的复杂度。与其他大型框架相比，Vue 2.0 更加轻量且灵活，既可单页面应用使用，也可以渐进式引入到现有项目中。

Vue 2.0 的核心优势在于：

响应式数据绑定：数据变化自动驱动视图更新，不用手动操作 DOM。
组件化开发：构建可复用的组件，提高代码组织性和维护性。
简单易学：使用 HTML 模板和 JavaScript 编写逻辑，门槛低。
生态丰富：支持 Vue Router、Vuex 等官方配套库，满足多样需求。

🧩 MVVM 模式

Vue 2.0 遵循的是 MVVM（Model-View-ViewModel）设计模式。这个模式听起来有点拗口，简单来说，就是帮你把“数据”和“界面”分开管理，让代码更清晰，也更容易维护。

MVVM 三个部分分别代表什么？

Model（模型）：就是你的数据，比如用户信息、商品列表等等。
View（视图）：就是用户看到的界面，是 HTML 和 CSS 组成的页面。
ViewModel（视图模型）：连接 Model 和 View 的“中间人”。它负责监听数据的变化，并自动更新视图，同时也处理用户的操作反馈给数据。

这种设计的好处是：

你只需要关注数据的变化，视图会自动更新，不用手动写复杂的 DOM 操作。
数据和视图解耦，提高代码复用性和可测试性。

用生活中的例子理解 MVVM：想象你正在写一封信（视图），信上写的是你想传达的信息（数据）。你有个秘书（视图模型）负责把你想说的话变成漂亮的信件，当你修改内容时，秘书会立刻更新信纸上的文字；当有人读信给你反馈时，秘书又会把信息告诉你。这就是 MVVM 的精髓。

🚀 Vue 2 安装方式

Vue 2 提供了多种方式安装和使用，主要分为 CDN 引入和 Vue CLI 脚手架工具两种。

🌐 通过 CDN 引入

这是最简单的方式，不需要任何构建工具，只要在 HTML 文件里通过 <script> 标签引入 Vue 的库文件，就能直接使用。

示例：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>Vue 2 CDN 示例</title>
    </head>
    <body>
        <div id="app">{{ message }}</div>

        <!-- 引入 Vue 2.x 的 CDN -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

        <script>
            new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue 2.0!',
                },
            });
        </script>
    </body>
</html>

CDN 方式适合快速试验或学习，缺点是项目大型化后维护和性能优化不便。

⚙️ 通过 Vue CLI 安装

Vue CLI 是官方脚手架工具，可以帮你快速生成 Vue 项目骨架，支持模块化开发、热重载等现代开发体验。它依赖于 Node.js 环境。Vue CLI 4.x 需要 Node.js v8.9 或更高版本

使用 npm 或 yarn 全局安装 Vue CLI

yarn global add @vue/cli

npm install -g @vue/cli

创建一个新的 Vue 2 项目

vue create my-vue-app

命令执行后选择 Vue2 版本，以及使用 npm 或者 yarn 安装依赖。最终 CLI 会帮你生成一个包含 webpack、babel、eslint 等配置的完整项目

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint)
❯ Default ([Vue 2] babel, eslint)
  Manually select features

npm run serve

打开浏览器访问 http://localhost:8080，你就能看到 Vue 2 项目运行效果。

Vue CLI 方式适合正式开发，支持组件化、模块化，方便后续项目维护。

🧾 小节总结

Vue 2.0 是一个轻量、灵活的渐进式 JavaScript 框架，适合构建各种前端应用。
它基于 MVVM 模式，通过数据驱动视图，实现响应式的用户界面。
安装方式包括 CDN 快速引入和 Vue CLI 脚手架两种，前者简单方便，后者功能强大适合项目开发。

❓ 知识问答（Q&A）

Q：Vue 2.0 为什么采用 MVVM 模式？

A：因为 MVVM 让数据和视图分离，数据改变自动更新视图，简化了前端开发流程。

Q：CDN 安装方式适合用在哪些场景？

A：适合简单演示和快速测试，不适合大型项目开发。

Q：如何通过 Vue CLI 创建 Vue 2 项目？

A：安装 Vue CLI 后，创建项目时选择手动配置并指定 Vue 2 版本即可。

🧪 小练习

使用 CDN 方式创建一个简单的 Vue 应用，实现动态显示当前时间。

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>Vue 时间显示</title>
    </head>
    <body>
        <div id="app">当前时间：{{ currentTime }}</div>

        <!-- 引入 Vue 2 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

        <script>
            new Vue({
                el: '#app',
                data: {
                    currentTime: '',
                },
                mounted() {
                    // 在这里实现时间动态更新功能
                },
            });
        </script>
    </body>
</html>

用 Vue CLI 新建项目后，尝试修改 App.vue 文件的模板部分，显示“欢迎学习 Vue 2.0”。

🎉 恭喜你已经掌握 Vue 2.0 的基础概念、MVVM 模式及安装方法技能啦！开始动手写代码，体验 Vue 的乐趣吧！

接下来对你进行考核

所有考核题目都是由博主亲自编写，考核内容来源于本门课程。

模板语法与指令详解

本文系统讲解前端模板语法、常用指令、自定义指令、过滤器及动态 Class 与 Style 绑定，帮助前端初学者快速掌握这些核心技能。