Vue2 入门（一）介绍及Demo项目创建

• 官网地址： https://vuejs.org/
• 中文官网： https://cn.vuejs.org/
• 官方文档： https://vuejs.org/guide/introduction.html
• 中文文档： https://cn.vuejs.org/guide/introduction.html
• 在线演练： https://play.vuejs.org/
• 在线示例： https://cn.vuejs.org/examples/#hello-world

背景：

你是否也曾有货这样的想法：“我想做个动态网站，但用纯 JavaScript 操作 DOM 实在太繁琐了！” 数据的任何一点变化，都需要小心翼翼地找到对应的元素并更新它，代码很快就变得难以维护了。别担心，这正是 Vue.js 所要解决的问题。它通过 数据驱动 的概念，让你只需关心数据本身，视图会自动更新。虽然 Vue 3 已成为未来主流，但 Vue 2 因其生态稳定、资料丰富，至今仍是维护大量现有项目的基石。本章我们将从零开始，介绍并创建你的第一个 Vue 2 项目，亲身感受它带来的开发效率提升。

一、Vue2 简介

Vue（发音为 /vjuː/，类似 view）是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

• Vue2 已经于 2023年12月31日 停止维护。有条件的话还是建议升级到 Vue 3.0 版本。打包更小，内存更少，渲染更快。（Vue3 向下兼容 Vue2 的语法）

如果是第一次接触 Vue 的同学可能出于陌生的恐惧，不能很好的消化相关的入门文档，这里小编建议学习路线如下：

1. 走通 Vue 官方的互动教程，https://cn.vuejs.org/tutorial/#step-1；

   （不需要大篇幅地了解枯燥的 Vue 知识，就像做游戏打怪，只需要学好当前节点的知识，答对题目即可，是非常适合新手入门的钥匙）

2. 参考本篇文章进行第一个 Vue2 的 Demo 项目创建；

   （把 Demo 环境搭建起来，方便后续本地操作演练。官网的 vue create 脚手架只支持 Vue3，因此这里整理 Vue2 版本的创建。）

3. 系统详细整理学习 Vue2 的常见用法、高阶用法。

   （耗时较长，如果直接学习收效较慢）

---

二、创建 Vue2 工程

2.1 搭建 Node 环境

前置：安装 NodeJS。（NodeJS 版本 18.0 以上）

• NodeJS 官网下载： https://nodejs.org/zh-cn/download

建议设置 Node 镜像源为阿里镜像源，设置命令如下：

npm config set registry https://registry.npmmirror.com

检查配置：

npm config list

以上就完成了 Node 环境的准备。

2.2 安装 vue-cli

Vue 官方提供了一个命令行工具 vue-cli，可用于快速搭建大型单页应用。

• vue-cli 官网地址： https://cli.vuejs.org/zh/guide/

该工具提供开箱即用的构建工具配置，只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。具体命令如下：

# 全局安装 vue-cli
$ npm install --global vue-cli

执行结果：

使用如下命令，查看安装结果：

$ npm list --global

2.3 创建 Vue2 项目

安装好 vue-cli 工具之后，使用如下命令创建一个基于 webpack 模板的 Vue2 新项目：

# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-vue2

执行结果如下：

命令执行后，会在当前文件夹创建一个 my-vue2 的目录，内容如下：

my-vue2/                          # 项目根目录
├── build/                        # Webpack构建配置目录
│   ├── webpack.base.conf.js      # 基础Webpack配置
│   ├── webpack.dev.conf.js       # 开发环境Webpack配置
│   └── webpack.prod.conf.js      # 生产环境Webpack配置
├── config/                       # 项目配置文件目录
│   ├── index.js                  # 主要配置文件(开发服务器设置、构建选项)
│   └── dev.env.js               # 开发环境变量配置
├── node_modules/                 # 项目依赖包目录(npm安装的所有第三方库)
├── src/                          # 源代码目录(核心开发目录)
│   ├── assets/                   # 静态资源目录(需要Webpack处理的文件)
│   │   └── logo.png              # 示例Logo图片
│   ├── components/               # 可复用组件目录
│   │   └── HelloWorld.vue        # 示例组件
│   ├── router/                   # 路由配置目录
│   │   └── index.js              # 路由定义和配置
│   ├── App.vue                   # 应用根组件(定义整体布局结构)
│   └── main.js                   # 应用入口文件(初始化Vue实例)
├── static/                       # 纯静态资源目录(直接复制不经过Webpack处理)
├── .babelrc                      # Babel配置文件(ES6+转译设置)
├── .editorconfig                 # 编辑器配置(统一代码风格)
├── .eslintignore                 # ESLint忽略配置(指定不需要检查的文件)
├── .eslintrc.js                  # ESLint规则配置(代码质量检查规则)
├── .gitignore                    # Git忽略配置(指定不纳入版本控制的文件)
├── .postcssrc.js                 # PostCSS配置(CSS后处理器配置)
├── index.html                    # HTML入口模板(应用挂载点)
├── package-lock.json             # 依赖版本锁定文件(确保依赖一致性)
├── package.json                  # 项目配置文件(依赖管理和脚本命令)
└── README.md                     # 项目说明文档(使用方法和介绍)

用 VS Code 打开如下所示：

下一步，我们在终端进入 my-vue2 文件夹，执行如下命令安装依赖：

$ cd my-vue2
$ npm install

命令执行结果：

2.4 启动项目

依赖安装好之后，我们就可以启动项目了，命令如下：

$ npm run dev

命令执行结果：

访问命令行中的地址，就可以看到 vue-cli 为我们生成的示例页面了：

2.5 打包项目（非压缩包）

一般情况下，我们开发时都是使用 localhost 进行本地访问和调试。但是在生产环境中，我们需要将前端代码进行打包，以便用户通过 Nginx、Tomcat 等中间件进行转发访问。具体打包命令如下：

$ npm run build

执行结果如下，其中红框 ⭕ 中的部分为生成内容：

完整目录结构如下所示：

2.6 打包项目（压缩包）

如果我们想把项目打包为一个 .zip 压缩包，我们可以直接修改 package.json 中的 scripts 部分，增加 build:zip 命令，如下所示：

  "scripts": {..."build": "node build/build.js","build:zip": "node build/build.js && zip -r dist.zip dist/"},

执行如下打包命令：

$ npm run build:zip

执行结果：

可以看到，命令执行之后，顺利生成了一个 dist.zip 名称的 ZIP 压缩包。

整理完毕，完结撒花～🌻

参考地址：

1.【Vue3极简2025版教程】2个半小时快速学会Vue，效率最高，用时最短！https://www.bilibili.com/video/BV13tjqzmEDZ

2.Vue.js 2.0 安装，https://www.w3cschool.cn/vuejs2/installation.html