想自己把一个 Vue2 项目从零跑起来，很多人第一步卡的并不是写组件，而是脚手架该怎么选、命令按什么顺序执行、生成出来的一堆目录各自管什么。本文按“创建项目、运行项目、看懂结构、准备打包”的顺序，把基于 webpack 模板的 Vue2 初始化流程重新梳理一遍，方便你在实际动手时知道每一步为什么要做，以及最后该看到什么结果才算搭建成功。
创建 Vue2 webpack 项目
这套流程面向已经装好 Node.js 和 npm、并且对前端构建有基础认知的读者。如果你在国内网络环境下安装依赖较慢，文中的 npm 也可以按原文提示替换为 cnpm。
第一步先安装官方旧版脚手架工具 vue-cli，然后基于 webpack 模板创建项目：
## 如果使用cnpm，将npm替换成cnpm即可。
## 全局安装 vue-cli
npm install --global vue-cli
## 创建一个基于 webpack 模板的新项目，my-project为项目目录名称
vue init webpack my-project
## 接着会提示一些选项，根据自己的需求填写或选择y/n
## 项目名称
? Project name (my-project)
? Project name my-project
## 项目描述
? Project description (A Vue.js project)
? Project description A Vue.js project
## 项目作者
? Author (techlee <xxx@xxx.com>)
? Author xxx@xxx.com
? Vue build standalone
## 是否安装vue-router路由，这里选是
? Install vue-router? (Y/n) y
? Install vue-router? Yes
## 是否需要ESLint代码检查，这里选否
? Use ESLint to lint your code? (Y/n) n
? Use ESLint to lint your code? No
## 是否需要unit单元测试，这里选否
? Setup unit tests with Karma + Mocha? (Y/n) n
? Setup unit tests with Karma + Mocha? No
## 是否需要e2e，这里选否
? Setup e2e tests with Nightwatch? (Y/n) n
? Setup e2e tests with Nightwatch? No
这一步的关键不只是把命令敲完，而是明确你创建的是一个“Vue2 + webpack 模板”项目。文中的选择也比较直接：安装 vue-router，但不启用 ESLint、单元测试和 e2e 测试。这样生成出来的工程更轻，适合先把基本运行链路搭起来。
如果你后面需要更严格的代码规范或测试体系，可以再补充配置；但对于刚开始练手或快速验证页面功能的场景，这组选择足够把项目跑起来。
安装依赖并启动开发环境
项目骨架生成后，还需要进入目录安装依赖，然后启动开发服务器：
## 走你
## 切换到项目目录
cd my-project
## 使用npm安装依赖
npm install
## 运行项目
npm run dev这里的顺序不要跳。vue init webpack my-project 只是生成项目模板，真正把依赖包拉下来的是 npm install；而 npm run dev 则会调用模板里已经配置好的开发脚本，启动本地调试环境。
如果整个过程没有报错，浏览器通常会自动打开 http://localhost:8080/#/。能看到页面正常加载，说明这个 Vue2 项目已经具备本地开发能力，后续就可以直接在 src 目录里继续写组件和页面逻辑。
项目目录怎么看
脚手架生成后的目录不算复杂，但第一次接触时容易被文件夹名字绕住。原始结构如下：
.
├── build/ # webpack config files
│ └── ...
├── config/
│ ├── index.js # main project config
│ └── ...
├── src/
│ ├── main.js # app entry file
│ ├── App.vue # main app component
│ ├── components/ # ui components
│ │ └── ...
│ └── assets/ # module assets (processed by webpack)
│ └── ...
├── static/ # pure static assets (directly copied)
├── .babelrc # babel config
├── .postcssrc.js # postcss config
├── .eslintrc.js # eslint config
├── .editorconfig # editor config
├── index.html # index.html template
└── package.json # build scripts and dependencies可以重点抓住几块：
1. src/ 是你最常改动的业务目录
main.js 是应用入口，App.vue 是主组件，components/ 用来放拆分出来的界面组件。平时开发页面时，大多数改动都会落在这里。
2. build/ 和 config/ 管的是 webpack 构建规则
这两个目录决定开发环境和打包过程怎么运作。对于刚入门的读者，可以先知道它们负责“构建配置”就够了，等需要改代理、输出路径、压缩策略时再深入看具体文件。
3. assets/ 与 static/ 的职责不同
src/assets/ 中的资源会经过 webpack 处理；static/ 里的内容则更接近“原样复制”的静态文件。这种区分会影响资源打包方式，也关系到你后面怎么引用图片、字体等文件。
4. 根目录配置文件决定工具链行为
比如 .babelrc 负责 Babel 转译配置，.postcssrc.js 负责 PostCSS，package.json 则记录脚本命令和依赖版本。即使暂时不修改它们，也应该知道问题出现时去哪里排查。
如何打包到生产环境
当本地开发没有问题后，下一步通常就是生成可部署的产物。原文提到，生产环境会借助 Webpack 的 DefinePlugin 指定环境，以便压缩时让 UglifyJS 自动去掉代码块中的警告语句。
给出的命令如下：
webpack --config build/webpack.dev.conf.js
命令执行成功后，会生成 dist 目录，这就是打包后的输出目录。从文章本身的意图看，这一步强调的是“成功产出构建结果”这个判断标准，也就是你最终部署时真正要带走的文件集合。
如果你只是想确认项目链路是否完整，那么看到 dist 被正常生成，基本就说明从初始化、开发到构建这条线已经跑通了。
这套流程适合什么场景
这篇内容更像是一份 Vue2 老脚手架的入门记录，重点不在高级工程化，而在快速搭起一个基于 webpack 的可运行项目。它适合已经具备 Node.js、npm 基础，希望亲手理解 Vue2 工程最小闭环的读者。
如果你的目标是维护旧项目、学习 Vue2 工程结构，或者想弄清楚“脚手架生成后到底有哪些文件在起作用”，这套步骤就够用了：先完成创建和运行，再看目录，最后验证打包结果。这样比只记命令更有用，因为你能知道每一步成功与否该看什么信号。
