# 从 0~1 创建 Vue2 项目（安装@vue/cli + 配置环境变量 + 创建项目）
**引言**
Vue.js，作为一款广受欢迎的渐进式JavaScript框架，以其易上手、灵活性高和强大的生态系统深受开发者喜爱。本文将详细引导你从零开始，一步步使用@vue/cli工具创建并配置一个完整的Vue2项目，让你在实践中深入理解Vue项目的初始化、环境变量设置及项目结构。
## **一、准备工作：安装Node.js与npm**
首先确保已安装最新版本的Node.js，它包含了npm包管理器。访问[Node.js官网](https://nodejs.org/)下载并安装适合你操作系统的版本。安装完成后，在命令行中运行以下命令检查安装情况：
```bash
node -v
npm -v
```
输出版本号即表示安装成功。
## **二、安装Vue CLI**
Vue CLI是官方提供的项目脚手架工具，用于快速构建Vue.js项目。在命令行中输入以下命令进行全局安装：
```bash
npm install -g @vue/cli
```
等待安装完成，然后验证是否安装成功：
```bash
vue --version
```
显示Vue CLI版本号则表明已成功安装。
## **三、创建Vue2项目**
### **1. 初始化项目**
使用Vue CLI创建一个新的Vue2项目，指定使用的Vue版本为2.x：
```bash
vue create my-vue-project --default preset vue2
```
这里`my-vue-project`是你的项目名称，`--default preset vue2`参数确保使用Vue2版本。
### **2. 选择项目特性**
在创建过程中，Vue CLI会提示选择预设或自定义特性，由于我们要创建的是最基础的Vue2项目，可以选择默认预设，也可以手动取消除`Router`和`Vuex`以外的所有特性。
### **3. 安装依赖并启动项目**
进入新创建的项目目录，并启动开发服务器：
```bash
cd my-vue-project
npm run serve
```
此时浏览器会自动打开项目首页，你已成功创建并运行了一个基本的Vue2项目。
## **四、配置环境变量**
### **1. .env文件**
Vue CLI支持`.env`文件来管理不同环境下的环境变量。在项目根目录下创建`.env`文件：
```dotenv
VUE_APP_API_URL=http://localhost:3000/api
```
这里的`VUE_APP_`前缀是Vue CLI识别环境变量的关键标识，`VUE_APP_API_URL`就是我们在项目中可引用的一个环境变量。
### **2. 引用环境变量**
在Vue项目中的任何地方，如组件、路由、axios配置等，都可以通过`process.env.VUE_APP_API_URL`来引用环境变量：
```javascript
// 在main.js中配置axios baseURL
import axios from 'axios';
axios.defaults.baseURL = process.env.VUE_APP_API_URL;
```
### **多环境配置**
针对不同的部署环境（如开发、测试、生产），可以创建`.env.development`、`.env.test`、`.env.production`等文件，Vue CLI会在构建时根据环境加载对应的环境变量。
## **五、项目结构解析**
Vue CLI生成的项目包含以下核心结构：
- `public/`：存放静态资源，如index.html入口文件和favicon。
- `src/`：主要开发目录。
- `assets/`：存放静态资源，会被webpack处理。
- `components/`：存放通用组件。
- `router/`：存放项目路由配置。
- `views/`：存放视图组件（基于路由的页面）。
- `App.vue`：主应用组件。
- `main.js`：应用入口文件，引入Vue实例和其他全局配置。
至此，你已经完成了从零到一创建Vue2项目的关键步骤。随着项目的推进，你可以进一步学习如何添加更多功能模块、优化性能以及部署上线等内容，逐步提升自己的Vue开发技能。持续关注本系列教程，我们将带你探索Vue2更深层次的应用实践和技术要点！