11.2.2 通过@vue/cli搭建Vue项目

在Vue.js的生态系统中，@vue/cli（Vue CLI）是一个基于Vue.js进行快速开发的完整系统，它提供了零配置启动新项目的能力，并可通过图形界面或命令行工具轻松管理项目依赖、构建配置和插件。对于想要快速上手Vue项目开发的开发者而言，使用Vue CLI无疑是一个高效且便捷的选择。本章节将详细介绍如何使用@vue/cli来搭建一个Vue项目，从环境准备到项目初始化，再到基本配置调整，最后简要介绍如何运行和测试你的项目。

11.2.2.1 环境准备

在开始之前，请确保你的开发环境中已经安装了Node.js和npm（或yarn，如果你更偏好使用yarn作为包管理器）。你可以通过打开终端或命令提示符，输入以下命令来检查Node.js和npm是否已安装以及其版本信息：

node -v
npm -v

如果你的环境中还没有安装Node.js，请访问Node.js官网下载并安装适合你操作系统的版本。

11.2.2.2 安装Vue CLI

安装Vue CLI非常简单，只需要在命令行中运行以下npm命令即可全局安装Vue CLI：

npm install -g @vue/cli
# 或者如果你使用yarn
yarn global add @vue/cli

安装完成后，你可以通过运行vue --version或vue -V来验证Vue CLI是否安装成功及其版本信息。

11.2.2.3 创建Vue项目

现在，你已经准备好了使用Vue CLI来创建一个新的Vue项目。打开你的命令行工具，导航到你希望存放项目的目录，然后运行以下命令来创建一个新项目：

vue create my-vue-project

这里的my-vue-project是你的项目名称，你可以根据需要替换成任何你喜欢的名字。运行此命令后，Vue CLI会启动一个交互式会话，询问你一些配置选项。默认情况下，Vue CLI会提供一个预设（default preset），它包括Babel、ESLint等常用工具的配置。然而，Vue CLI也支持通过图形界面（GUI）或手动选择特性（features）来创建项目。

• 图形界面（GUI）模式：如果你更喜欢通过图形界面来选择配置，可以在命令后添加--gui标志，即vue create my-vue-project --gui。这将会打开一个图形化的配置向导，引导你完成项目的配置。

• 手动选择特性（Features）：在交互式会话中，你也可以通过键盘选择Manually select features来自定义你的项目配置。Vue CLI提供了多种特性供你选择，如Babel、TypeScript、Router、Vuex、Linter/Formatter等。根据你的项目需求，选择合适的特性并继续配置。

完成配置选择后，Vue CLI将自动安装所有必要的依赖，并设置项目结构。这可能需要一些时间，具体取决于你的网络速度和所选特性的数量。

11.2.2.4 项目结构概览

项目创建完成后，你可以通过命令行进入项目目录，并查看其结构：

cd my-vue-project
ls -la

Vue CLI生成的项目结构大致如下（可能会因版本和所选特性有所不同）：

• node_modules/：存放项目依赖的npm包。
• public/：存放静态资源文件，如index.html入口文件。
• src/：项目的源代码目录。
  • assets/：存放静态资源，如图片、字体等。
  • components/：存放Vue组件。
  • router/：存放Vue Router配置（如果选择了Router特性）。
  • store/：存放Vuex状态管理配置（如果选择了Vuex特性）。
  • views/：存放页面级组件（如果你选择了Vue Router并采用了基于视图的路由配置）。
  • App.vue：根组件文件。
  • main.js（或main.ts，如果你选择了TypeScript）：项目入口文件，用于创建Vue实例并挂载到DOM上。
• .env.*：环境变量配置文件（可选，根据配置生成）。
• babel.config.js：Babel配置文件（如果选择了Babel特性）。
• package.json：项目的npm包配置文件，包含项目依赖、脚本等信息。
• vue.config.js：Vue CLI的配置文件，用于覆盖Vue CLI的默认配置（可选）。

11.2.2.5 运行和测试项目

在项目目录中，你可以通过运行以下命令来启动开发服务器：

npm run serve
# 或者如果你使用yarn
yarn serve

Vue CLI将启动一个热重载的开发服务器，并默认在浏览器中打开http://localhost:8080/地址来预览你的项目。你可以通过修改源代码来实时查看更改效果，因为开发服务器支持热重载功能。

此外，Vue CLI还提供了多种命令来帮助你进行项目的构建、测试等操作。例如，你可以使用npm run build来构建生产版本的项目，或者使用npm run lint来运行ESLint代码检查。

11.2.2.6 自定义配置

虽然Vue CLI提供了丰富的默认配置，但在实际开发中，你可能需要根据项目需求进行一些自定义配置。这时，你可以利用vue.config.js文件来覆盖Vue CLI的默认配置。例如，你可以修改webpack的配置、设置代理服务器、调整输出目录等。

在vue.config.js中，你可以直接导出一个对象，该对象将合并到Vue CLI的内部webpack配置中。Vue CLI也提供了一些内置的API，允许你以更声明式的方式配置你的项目。

11.2.2.7 小结

通过本章节的学习，你应该已经掌握了如何使用@vue/cli来快速搭建一个Vue项目。从环境准备到项目创建，再到项目结构的概览和运行测试，每一步都为你详细介绍了Vue CLI的使用方法和注意事项。当然，Vue CLI的功能远不止于此，它还支持插件系统、图形界面配置等高级特性，你可以根据自己的需要进一步探索和学习。

在后续的章节中，我们将继续深入Vue项目的开发，探讨Vue组件的编写、Vue Router和Vuex的使用、Vue CLI插件的扩展等更多高级话题。希望你在Vue.js的旅程中能够收获满满，成为一名优秀的Vue开发者。