Vue2 入门（一）介绍及Demo项目创建
目录
- 一、Vue2 简介
- 二、创建 Vue2 工程
- 2.1 搭建 Node 环境
- 2.2 安装 vue-cli
- 2.3 创建 Vue2 项目
- 2.4 启动项目
- 2.5 打包项目（非压缩包）
- 2.6 打包项目（压缩包）
- 官网地址： 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 的同学可能出于陌生的恐惧，不能很好的消化相关的入门文档，这里小编建议学习路线如下：
-
走通 Vue 官方的互动教程，https://cn.vuejs.org/tutorial/#step-1；
（不需要大篇幅地了解枯燥的 Vue 知识，就像做游戏打怪，只需要学好当前节点的知识，答对题目即可，是非常适合新手入门的钥匙）
-
参考本篇文章进行第一个 Vue2 的 Demo 项目创建；
（把 Demo 环境搭建起来，方便后续本地操作演练。官网的 vue create 脚手架只支持 Vue3，因此这里整理 Vue2 版本的创建。）
-
系统详细整理学习 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