【前端 19】使用Vue-CLI脚手架构建Vue2项目

使用Vue CLI构建Vue 2项目

引言

Vue.js 是一个构建用户界面的渐进式JavaScript框架，以其轻量级和易用性受到前端开发者的广泛喜爱。Vue CLI（Vue Command Line Interface）是一个基于Vue.js进行快速开发的完整系统，提供了零配置的项目启动、开发调试、打包部署等功能。本文将详细介绍如何安装Vue CLI，并使用它构建一个Vue 2项目，同时解析Vue CLI构建出的项目目录结构。

安装Vue CLI

首先，确保你的开发环境中已经安装了Node.js和npm（Node.js的包管理器）。你可以通过运行node -v和npm -v来检查它们是否已安装及安装的版本。

接下来，打开你的终端或命令提示符，运行以下命令来全局安装Vue CLI：

npm install -g @vue/cli  
# 或者，如果你使用yarn作为包管理器  
yarn global add @vue/cli

安装完成后，你可以通过运行vue --version来验证Vue CLI是否正确安装。

使用Vue CLI创建Vue 2项目

Vue CLI默认会创建Vue 3项目。但是，你可以通过指定一个预设或手动选择特性来创建一个Vue 2项目。目前最直接的方式是使用Vue CLI 2.x版本或通过在Vue CLI 3/4中指定Vue 2的模板。但考虑到Vue CLI 3/4的广泛使用和灵活性，这里我们采用Vue CLI 3/4，并在创建项目时手动选择Vue 2版本。

运行以下命令来创建一个新的Vue项目：

vue create my-vue2-project

在创建过程中，你会被询问几个问题，包括是否使用预设（preset）还是手动选择特性（Manually select features）。选择“Manually select features”后，你可以取消选择“Vue 3 x”配置，确保项目是基于Vue 2的。

完成配置后，Vue CLI会创建并初始化你的项目。

当然，我们也可以使用图形化界面来创建 Vue2项目

通过命令先进入到图形化界面，然后再进行vue工程的创建

vue ui

Vue CLI项目目录结构

Vue CLI创建的项目具有一个清晰和标准的目录结构，这有助于你理解和组织项目代码。以下是一个典型Vue CLI（Vue 2）项目的基本目录结构：

my-vue2-project/  
│  
├── node_modules/             # 存放项目依赖的第三方模块  
│  
├── public/                   # 静态资源目录，如index.html  
│   ├── index.html            # 项目的入口HTML文件  
│  
├── src/                      # 项目的源代码目录  
│   ├── assets/               # 存放静态资源，如图片、字体等  
│   ├── components/           # 存放Vue组件  
│   ├── router/               # 存放Vue Router配置  
│   ├── store/                # 存放Vuex状态管理配置（如果项目中使用Vuex）  
│   ├── views/                # 存放页面级别的Vue组件  
│   ├── App.vue               # 主Vue组件  
│   ├── main.js               # Vue应用的入口文件  
│  
├── .env                      # 环境变量配置文件  
├── .env.local  
├── .env.[mode]               # 针对不同环境（如开发、生产）的环境变量配置文件  
├── .gitignore                # Git忽略文件  
├── babel.config.js           # Babel配置文件  
├── package.json              # 项目配置文件和依赖列表  
├── package-lock.json         # 锁定安装时的包的版本号  
├── README.md                 # 项目说明文件  
├── vue.config.js             # Vue CLI的配置文件（可选）  
│  
└── ...

对于初学者来说，我们只要知道：

• node_modules/ 存储了项目依赖
• src文件下是我们要写的代码
• vue.config.js是vue-CLI的配置文件