11.2.2 通过@vue/cli搭建项目-Webpack实战：入门、进阶与调优(下)

当前位置:　首页>> 技术小册>> Webpack实战：入门、进阶与调优(下)

### 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是否已安装以及其版本信息：

```bash
node -v
npm -v
```

如果你的环境中还没有安装Node.js，请访问[Node.js官网](https://nodejs.org/)下载并安装适合你操作系统的版本。

#### 11.2.2.2 安装Vue CLI

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

```bash
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项目。打开你的命令行工具，导航到你希望存放项目的目录，然后运行以下命令来创建一个新项目：

```bash
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 项目结构概览

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

```bash
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 运行和测试项目

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

```bash
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开发者。

该分类下的相关小册推荐：

全解webpack前端开发环境定制

Webpack零基础入门

Webpack实战：入门、进阶与调优(中)

Webpack实战：入门、进阶与调优(上)

webpack指南