Vue2 入门与环境搭建
从理解 Vue 的核心理念到搭建第一个可运行的 Vue 应用，本章将带你完成 Vue2 学习之旅的第一步。
一、前言
Vue.js 是一款用于构建用户界面的渐进式 JavaScript 框架。所谓"渐进式"，意味着你可以根据项目需求逐步引入 Vue 的功能——从简单的页面增强到复杂的单页应用（SPA），Vue 都能胜任。
自 2014 年发布以来，Vue 凭借易学易用、灵活高效、生态丰富三大优势，成为前端开发领域最受欢迎的技术之一。在国内，Vue 更是占据了前端框架的半壁江山，是面试和工作中绕不开的必学技术。
二、Vue 的核心理念
2.1 MVVM 架构模式
Vue 的设计深受MVVM（Model-View-ViewModel）模式的影响。理解这一架构，有助于你从根本上把握 Vue 的工作方式。
| 层级 | 职责 | Vue 中的对应 |
|---|---|---|
| Model | 数据层，定义业务数据和逻辑 | data选项中的数据 |
| View | 视图层，负责UI呈现 | 模板（template）中的 HTML |
| ViewModel | 连接 Model 和 View 的桥梁 | Vue 实例（new Vue()） |
Vue 的 ViewModel 通过响应式系统自动监听 Model 的变化，并驱动 View 更新；同时捕获 View 上的用户交互，反馈给 Model。开发者只需关注数据本身，无需手动操作 DOM。
2.2 声明式渲染 vs 命令式渲染
传统 jQuery 开发属于命令式编程：你需要一步步告诉浏览器"先选这个元素，再改那个属性"。而 Vue 采用声明式编程：你只需声明"数据长什么样，视图就该怎么呈现"，Vue 会自动处理更新细节。
// 命令式（jQuery）$('#message').text('Hello');$('#message').css('color','red');// 声明式（Vue）data:{message:'Hello',color:'red'}// 模板中：{{ message }}2.3 组件化思想
Vue 应用由一个个组件构成，每个组件封装了自己的模板、逻辑和样式。组件可以嵌套、复用、组合，就像搭积木一样构建复杂的用户界面。
三、环境搭建
3.1 方式一：CDN 引入（最简单，适合学习）
对于学习阶段或简单的页面增强，直接在 HTML 中引入 Vue 的 CDN 链接即可。
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>第一个 Vue 应用</title></head><body><divid="app">{{ message }}</div><!-- 引入 Vue2 --><scriptsrc="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>newVue({el:'#app',data:{message:'Hello, Vue!'}});</script></body></html>开发版 vs 生产版：
| 版本 | 文件名 | 特点 |
|---|---|---|
| 开发版 | vue.js | 包含完整的警告和调试模式，体积大（约 340KB） |
| 生产版 | vue.min.js | 删除了警告，压缩后体积小（约 94KB），适合线上 |
3.2 方式二：Vue CLI（推荐，适合工程化项目）
Vue CLI 是 Vue 官方提供的脚手架工具，用于快速搭建基于 Webpack 的工程化项目。
安装要求：
- Node.js >= 14.x
- npm >= 6.x 或 yarn
安装步骤：
# 全局安装 Vue CLInpminstall-g@vue/cli# 验证安装vue--version# 创建项目vue create hello-vue# 启动开发服务器cdhello-vuenpmrun servevue create会引导你选择预设配置。初学者建议选择Default (Vue 2)预设。
创建完成后，项目结构如下：
hello-vue/ ├── node_modules/ # 依赖包 ├── public/ # 静态资源 │ ├── index.html # 入口 HTML │ └── favicon.ico ├── src/ # 源码目录 │ ├── assets/ # 图片、字体等资源 │ ├── components/ # 组件目录 │ ├── App.vue # 根组件 │ └── main.js # 入口 JS ├── package.json # 项目配置 ├── babel.config.js # Babel 配置 └── vue.config.js # Vue CLI 配置（可选）3.3 方式三：Vite + Vue2（现代构建工具）
如果你更喜欢 Vite 的极速冷启动，也可以使用 Vite 创建 Vue2 项目：
npmcreate vite@latest hello-vue2 ----templatevue不过需要注意的是，Vite 的默认模板通常是 Vue3。创建 Vue2 项目需要使用社区插件如@vitejs/plugin-vue2。
3.4 三种方式对比
| 方式 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| CDN | 学习、简单页面 | 零配置、即引即用 | 不适合大型项目 |
| Vue CLI | 企业级项目 | 生态完善、配置成熟 | 基于 Webpack，启动较慢 |
| Vite | 现代项目 | 启动快、配置简单 | Vue2 支持需要额外配置 |
四、第一个 Vue 应用详解
让我们深入拆解 CDN 方式创建的第一个 Vue 应用，理解每个部分的作用。
4.1 挂载点
<divid="app">{{ message }}</div>这是 Vue 实例的挂载点（Mount Point）。Vue 会接管这个 DOM 元素及其子元素，将其内部的模板语法编译为渲染函数。
4.2 Vue 实例
newVue({el:'#app',data:{message:'Hello, Vue!'}});| 选项 | 说明 |
|---|---|
el | 挂载点选择器，支持 CSS 选择器字符串或 DOM 元素 |
data | 数据对象，Vue 会将其转换为响应式数据 |
4.3 数据驱动视图的工作流程
这就是 Vue 最核心的特性——响应式数据绑定。你只需操作数据，Vue 会自动将变化同步到视图上。
4.4 一个更完整的入门示例
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Vue 入门示例</title><style>.container{max-width:600px;margin:50px auto;font-family:Arial;}.card{border:1px solid #ddd;padding:20px;border-radius:8px;}.btn{padding:10px 20px;background:#42b983;color:white;border:none;border-radius:4px;cursor:pointer;}</style></head><body><divid="app"class="container"><divclass="card"><h1>{{ title }}</h1><p>点击次数：{{ count }}</p><buttonclass="btn"@click="increment">点击我</button></div></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>newVue({el:'#app',data:{title:'我的第一个 Vue 应用',count:0},methods:{increment(){this.count++;}}});</script></body></html>这个示例展示了 Vue 的三个核心概念：数据绑定（{{ }}）、事件处理（@click）和方法定义（methods）。
五、Vue Devtools 浏览器调试工具
Vue Devtools 是 Vue 官方提供的浏览器扩展，可以极大地提升开发调试效率。
功能亮点：
- 实时查看组件树结构
- 检查和编辑组件的 data、props、computed 属性
- 追踪事件触发和 Vuex 状态变化
- 性能分析
安装方式：
- Chrome 商店搜索 “Vue.js devtools”
- 或使用 Edge 浏览器的扩展商店
- 安装后，在访问 Vue 页面时，按
F12打开开发者工具，即可看到 Vue 标签页
六、常见问题
Q1：Vue2 和 Vue3 我该学哪个？
建议先学 Vue2，再过渡到 Vue3。理由如下：
- Vue2 的 Options API 更直观，适合初学者建立概念
- 国内大量存量项目仍在使用 Vue2
- 学会 Vue2 后，Vue3 的新特性（Composition API）只是多了一个写法选择
Q2：{{ }}里可以写什么？
插值表达式内部可以写单个 JavaScript 表达式，但不能写语句（如if、for）。合法的示例：
<!-- 合法 -->{{ count + 1 }} {{ message.split('').reverse().join('') }} {{ ok ? 'YES' : 'NO' }}<!-- 非法 -->{{ if (ok) { return message } }} {{ var a = 1 }}Q3：Vue 实例创建后，如何动态挂载？
除了通过el选项挂载，也可以手动调用$mount方法：
constvm=newVue({data:{message:'Hello'}});vm.$mount('#app');// 手动挂载// 或vm.$mount(document.getElementById('app'));七、总结
本章我们学习了：
- MVVM 架构：理解 Vue 的数据驱动视图原理
- 三种环境搭建方式：CDN（学习）、Vue CLI（工程化）、Vite（现代工具）
- Vue 实例：
el、data、methods等核心选项 - Vue Devtools：调试利器
下一章我们将深入 Vue 的模板语法，学习插值表达式、指令、计算属性等核心概念。
八、练习
- 使用 CDN 方式创建一个 Vue 应用，展示你的姓名、年龄和爱好三个数据
- 在页面上添加一个按钮，点击后年龄增加 1 岁
- 安装 Vue Devtools，在浏览器中查看你的 Vue 应用结构
