【前端 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的配置文件