code前端网一、Vue2 创建项目前，得先准备好什么环境？
现在不少想入门前端开发的同学，都会从 Vue2 开始学起，毕竟 Vue2 生态成熟、资料多，企业里也还有大量存量项目在用，但“怎么创建 Vue2 项目”这个问题，新手往往一头雾水——不同场景（做 Demo、正式项目、团队协作）适合的创建方式不一样，环境准备、工具选择里也藏着不少细节，这篇文章用问答形式，把 Vue2 创建项目从前期准备到后期拓展的关键问题讲透,帮你少踩坑。
想顺利创建 Vue2 项目，得先把“基础环境”搭好，核心是 Node.js 和包管理器：
-
安装 Node.js
Vue2 项目常用的工具（vue-cli 脚手架）都依赖 Node.js 环境，建议选v10+版本（版本太旧容易和新依赖打架），去 Node.js 官网下载对应系统的安装包，一路点“下一步”装完后，打开命令行（Windows 用 cmd/PowerShell，Mac/Linux 用终端），输入node -v和npm -v，能看到版本号就说明装成功了。 -
选装 yarn（可选但推荐）
npm 是 Node 自带的包管理器，但有时候下载慢、版本兼容容易出问题，yarn 是更高效的替代方案，装完 Node 后，用npm install -g yarn装 yarn，再输入yarn -v验证，之后装项目依赖时，用 yarn 往往更顺畅。 -
清理旧版 Vue CLI（如果之前装过）
要是之前装过老版本的vue-cli（2.x 版本），得先卸载干净：执行npm uninstall -g vue-cli，再装新版（Vue2 用 vue-cli 3+ 也能创建项目，后面详细讲）。
Vue2 创建项目有哪几种常用方式？各自适合啥场景？
不同开发场景下，选对创建方式能省超多事儿，常见有三种思路：
-
vue-cli 脚手架（新手优先选）
官方出的脚手架工具，能一键生成项目结构，还帮你配好 webpack、Babel 这些复杂工具，适合做中大型项目（需要路由、状态管理、代码规范的那种），尤其是团队协作场景——不用每个人手动配环境，拉取代码后装依赖就能跑。 -
webpack 手动搭建（想练工程化能力选）
完全自己配置 webpack、babel、vue-loader 这些工具，能彻底搞懂“项目咋跑起来的”，但步骤多、门槛高，适合想深入理解前端工程化的同学，或者需要高度自定义配置的项目（比如公司内部有特殊打包规则）。 -
CDN 引入（快速写 Demo 选）
不用在本地装任何工具，直接在 HTML 里通过 CDN 链接引入 Vue2 库，写点简单交互，优点是“秒级启动”，缺点是搞不了复杂工程化（比如组件拆分、路由管理），适合新手快速验证想法（比如试试插值、指令语法）。
用 vue-cli 快速创建 Vue2 项目，步骤是啥？
vue-cli 是最省心的方式，跟着步骤走就行：
-
装 Vue CLI 工具
打开命令行，执行npm install -g @vue/cli（全局安装 Vue CLI），装完后输入vue --version，能看到版本号（5.x 版本也能创建 Vue2 项目）就说明成了。 -
创建项目
在想放项目的文件夹里，执行vue create 项目名（vue create my-vue2-app），这时会进入“选择模板”界面：- 选 Manually select features（手动选特性），因为要确保用 Vue2；
- 然后勾选需要的功能（Babel、Router、Vuex、CSS 预处理器），按空格选中，回车确认；
- 接下来选 Vue 版本，一定要选 x（毕竟咱要创建 Vue2 项目）；
- 后面的配置（Babel 配置放哪、路由是否用 history 模式），新手选默认选项就行，一路回车。
-
启动项目
创建完后，进入项目文件夹cd my-vue2-app，然后执行npm run serve（或yarn serve），等命令行显示Compiled successfully，打开浏览器访问http://localhost:8080，就能看到 Vue2 的默认页面啦～
不用脚手架，手动用 webpack 搭 Vue2 项目要咋做？
想搞懂“项目为啥能跑”，手动搭 webpack 是个好方法，核心步骤如下：
-
初始化项目目录
新建空文件夹（my-vue2-webpack），进去后执行npm init -y，生成package.json（项目依赖的配置文件）。 -
装核心依赖
得装这些包（版本对应 Vue2 更稳）：
vue@2：Vue2 核心库；webpack@4、webpack-cli：打包工具（Vue2 项目常用 webpack 4，新版本容易有兼容问题）；vue-loader@15、vue-template-compiler：处理 .vue 文件的 loader；babel-loader、@babel/core、@babel/preset-env：把 ES6+ 语法转成 ES5；html-webpack-plugin：生成 HTML 并自动引入打包后的 JS。
执行命令：
npm install vue@2 webpack@4 webpack-cli vue-loader@15 vue-template-compiler babel-loader @babel/core @babel/preset-env html-webpack-plugin --save-dev
- 配 webpack（新建
webpack.config.js）
核心配置示例（跟着抄就行，理解后再改）：const path = require('path'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { entry: './src/main.js', // 项目入口文件 output: { path: path.resolve(__dirname, 'dist'), // 打包后文件输出到 dist 文件夹 filename: 'bundle.js' // 打包后的 JS 文件名 }, module: { rules: [ { test: /.vue$/, // 处理 .vue 文件 loader: 'vue-loader' }, { test: /.js$/, // 处理 JS 文件，转码 ES6+ exclude: /node_modules/, loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } ] }, plugins: [ new VueLoaderPlugin(), // vue-loader 必须的插件 new HtmlWebpackPlugin({ template: './public/index.html', // 模板 HTML 文件 title: 'Vue2 Webpack Demo' // 页面标题 }) ], resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' // 让 webpack 识别“完整版 Vue”（支持模板编译） } } };
4. **搭项目结构**
新建这些文件夹和文件（按规范放代码）：
- <code>src/</code>：放项目源码
- <code>main.js</code>：入口文件，创建 Vue 实例；
- <code>App.vue</code>：根组件；
- <code>public/</code>：放静态资源（比如图片、favicon.ico）
- <code>index.html</code>：HTML 模板。
举个栗子：
<code>main.js</code> 内容：
```js
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#app',
render: h => h(App)
});App.vue 内容：
<template>
<div id="app">
<h1>手动搭建的 Vue2 项目</h1>
</div>
</template>
<script>
export default {
name: 'App'
};
</script>
<style>
/* 这里写样式 */
</style>
public/index.html 内容：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"><%= htmlWebpackPlugin.options.title %></title> </head> <body> <div id="app"></div> </body> </html>
- 运行项目
在package.json里加脚本："scripts": { "dev": "webpack --mode development", "build": "webpack --mode production" }执行
npm run dev，打包后打开dist/index.html就能看到页面，要是想实时热更新，还能装webpack-dev-server配开发服务器（这里先讲基础流程，后续自己拓展～）。
只想快速写 Demo，用 CDN 引入 Vue2 咋操作？
这种方式不用装任何工具，适合“10 分钟验证想法”：
-
选 CDN 链接
Vue2 的 CDN 可以用 unpkg 或 jsDelivr，<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
（如果是生产环境，用压缩版
vue.min.js：https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js） -
写 HTML 文件
新建index.html，复制下面内容：<!DOCTYPE html> <html> <head> <meta charset="UTF-8">Vue2 CDN Demo</title> </head> <body> <div id="app"> {{ message }} <button @click="changeMsg">点我改文字</button> </div>