✅ 快速开始 Vue 2 项目：
复制
# 1. 安装 Vue CLI
npm install -g @vue/cli
# 2. 创建 Vue 2 项目
vue create my-vue2-app
# 3. 安装组件库
npm i element-ui -S
# 选择 "Default (Vue 2)" 或 手动选 Vue 2 + 需要的功能
# 4. 进入项目并启动
cd my-vue2-app
npm run serve下面是对每一步操作的具体描述解释
一、Vue CLI 是什么？
Vue CLI（Vue 2 脚手架工具） 是 Vue 官方提供的一个全局命令行工具，用于快速初始化和管理 Vue 2.x 的项目。它封装了 webpack、Babel、ESLint、开发服务器等工具，让开发者可以专注于业务代码，而不用手动配置复杂的构建流程。
⚠️ 注意：Vue CLI 默认从 4.x 版本开始依然支持 Vue 2 ，但官方也推出了 Vue CLI 5.x ，它们对 Vue 2 仍然是兼容的。
如果你要创建 Vue 3 项目，也可以使用 Vue CLI，但推荐使用 create-vue（基于 Vite） 或 Vite + Vue 3 获得更快的构建体验。
二、安装 Vue CLI（Vue 2 脚手架）
1. 全局安装 Vue CLI（推荐 Vue CLI 4.x，兼容 Vue 2）
bash
npm install -g @vue/cli
# 或者使用 yarn
yarn global add @vue/cli2. 检查是否安装成功及版本
bash
vue --version推荐版本：
@vue/cli 4.x（如 4.5.x），它完全兼容 Vue 2 项目创建与管理。
三、使用 Vue CLI 创建 Vue 2 项目
1. 创建项目
bash
vue create my-vue2-project2. 选择配置
执行命令后，会出现交互式选项：
sql
? Please pick a preset:
❯ Default ([Vue 2] babel, eslint) ← 推荐，Vue 2 默认配置
Default ([Vue 3] babel, eslint) ← Vue 3 默认配置（不要选）
Manually select features ← 手动选择功能（推荐，灵活配置）✅ 推荐方式一：直接选默认的 Vue 2 预设
-
选择
Default ([Vue 2] babel, eslint)，会快速创建一个包含：- Vue 2
- Babel（ES6+ 转译）
- ESLint（代码规范检查）
- webpack 开发/构建配置
✅ 推荐方式二：手动选择功能（更灵活，可定制 Vue 2 特性）
选择 Manually select features，然后按需勾选：
-
Vue 版本 ：选择 Vue 2
-
其它可选功能：
- Router（路由）
- Vuex（状态管理）
- CSS Pre-processors（如 Sass/Less）
- Babel
- ESLint
- Unit Testing / E2E Testing（单元测试/端到端测试）
按需选择后，CLI 会生成一个高度自定义的 Vue 2 项目模板。
四、安装组件库
npm 安装
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
css
npm i element-ui -S在页面上引入 js 和 css 文件即可开始使用。
xml
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>文件位置
五、启动项目
进入项目目录并启动开发服务器：
arduino
cd my-vue2-project
npm run serve或
bash
yarn serve访问：http://localhost:8080 （端口可能自动变化）
六、Vue CLI 项目结构（Vue 2 默认）
创建完成后，你的项目目录大致如下：
复制
my-vue2-project/
├── public/
│ ├── index.html # 主 HTML 模板
│ └── favicon.ico
├── src/
│ ├── assets/ # 静态资源（图片、字体等）
│ ├── components/ # Vue 组件
│ │ └── HelloWorld.vue
│ ├── App.vue # 根组件
│ └── main.js # 入口 JS 文件（挂载 Vue 实例）
├── package.json # 项目依赖和脚本
├── babel.config.js # Babel 配置
├── vue.config.js # Vue CLI 自定义配置（可选）
└── ...七、vue.config.js（可选，自定义 webpack 配置）
Vue CLI 提供了 vue.config.js 文件，用于自定义 webpack 配置，比如：
- 修改端口号
- 配置代理（解决跨域）
- 配置别名（@ 指向 src）
- 配置打包优化等
示例：配置开发服务器代理和端口
复制
// vue.config.js
module.exports = {
devServer: {
port: 3000, // 修改项目端口
proxy: {
'/api': {
target: 'http://localhost:8080', // 后端代理地址
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
},
configureWebpack: {
resolve: {
alias: {
// 可以在这里添加更多别名
}
}
}
}八、Vue CLI 相关常用命令
| 命令 | 说明 |
|---|---|
vue create <project-name> |
创建一个新的 Vue 项目 |
npm run serve 或 yarn serve |
启动开发服务器（热重载） |
npm run build 或 yarn build |
打包生产环境代码（优化压缩） |
npm run lint |
运行 ESLint 代码检查 |
vue add <plugin-name> |
添加官方插件（如 vue-router、vuex） |
⚠️ 注意：
vue add是 Vue CLI 提供的插件安装方式，会自动修改配置和依赖，比手动安装更安全可靠。
九、Vue CLI 插件（增强功能）
Vue CLI 支持通过插件扩展功能，比如：
@vue/cli-plugin-router→ 添加 Vue Router@vue/cli-plugin-vuex→ 添加 Vuex@vue/cli-plugin-eslint→ 添加 ESLint@vue/cli-plugin-unit-jest→ 单元测试@vue/cli-plugin-pwa→ 添加 PWA 支持
你可以在创建项目时选择，或者之后通过以下命令添加：
复制
vue add router
vue add vuex九、Vue CLI 与 Vite 创建 Vue 2 项目的区别
| 工具 | 构建工具 | 速度 | 适用 Vue 版本 | 推荐度 |
|---|---|---|---|---|
| Vue CLI | webpack | 较慢（但稳定） | Vue 2 / Vue 3 | ⭐⭐⭐⭐（适合 Vue 2 项目） |
Vite + create-vue |
Vite（原生 ES Module） | 极快 | Vue 3（推荐） / Vue 2（需额外配置） | ⭐⭐⭐⭐⭐（Vue 3 推荐） |
如果你是Vue 2 项目 ，Vue CLI 仍然是官方推荐、稳定可靠的脚手架工具。
如果你是新项目且想用 Vue 3 ，推荐使用 Vite + create-vue，启动和热更新速度更快。
十、总结
| 项目 | 说明 |
|---|---|
| Vue 2 脚手架工具 | 官方推荐使用 Vue CLI（支持 Vue 2 和 Vue 3） |
| 安装命令 | npm install -g @vue/cli |
| 创建 Vue 2 项目 | vue create my-project，选择 Vue 2 预设或手动配置 |
| 启动项目 | npm run serve，访问 http://localhost:8080 |
| 项目配置 | 通过 vue.config.js 自定义 webpack 配置 |
| 插件扩展 | 使用 vue add plugin-name 快速添加路由、状态管理等 |
| 适用场景 | 适合开发 Vue 2 的企业级应用、管理后台、组件库等 |
小贴士
下面章节会讲解vue2的语法，表达式以及如何开发一个demo项目😊