12.1.1 Vue CLI工具的安装 -TypeScript和Vue从入门到精通(四)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(四)

### 12.1.1 Vue CLI工具的安装

在Vue.js的开发旅程中，Vue CLI（Vue命令行界面）是一个不可或缺的工具，它极大地简化了项目创建、开发和构建的过程。Vue CLI提供了一个基于webpack的现代化构建系统，内置了对TypeScript、ES6+、单文件组件（SFCs）、热重载、CSS预处理器等多种现代开发特性的支持。本章节将详细介绍如何在你的开发环境中安装Vue CLI，并简要概述其基础用法，为后续使用Vue和TypeScript进行项目开发打下坚实的基础。

#### 1. 安装Node.js和npm

在安装Vue CLI之前，确保你的开发环境已安装了Node.js和npm（Node包管理器）。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，npm则是Node.js的包管理工具，用于安装和管理项目依赖。

- **访问Node.js官网**（https://nodejs.org/）：在官网下载适合你操作系统的Node.js安装程序，并按照指引完成安装。安装过程中，npm通常会作为Node.js的一部分被自动安装。

- **验证安装**：安装完成后，打开终端或命令提示符，输入`node -v`和`npm -v`命令，如果分别显示了Node.js和npm的版本号，则表示安装成功。

#### 2. 安装Vue CLI

Vue CLI是一个全局安装的npm包，这意味着它可以在你的计算机上的任何位置被调用。

- **使用npm安装Vue CLI**：在终端或命令提示符中，输入以下命令来全局安装Vue CLI：

```bash
  npm install -g @vue/cli
  ```

注意：`-g`参数表示全局安装，这样Vue CLI就可以在你的计算机上的任何地方被调用了。

- **验证安装**：安装完成后，通过输入`vue --version`或`vue -V`命令来检查Vue CLI是否正确安装及其版本号。

#### 3. Vue CLI的基本使用

Vue CLI不仅提供了项目初始化的能力，还内置了一系列实用的命令来帮助开发者进行项目开发和维护。以下是一些基本用法的介绍。

##### 3.1 创建一个新的Vue项目

使用Vue CLI创建新项目非常简单，只需在终端或命令提示符中运行以下命令：

```bash
vue create my-project-name
```

将`my-project-name`替换为你想要的项目名称。运行该命令后，Vue CLI会启动一个交互式会话，询问你一些选项，比如是否使用预设的配置（如Babel, ESLint等），或者手动选择特性。

- **预设配置**：Vue CLI提供了几个预设配置选项，如默认预设（Babel, ESLint）、Manually select features等。对于初学者，选择默认预设是一个不错的选择，因为它会为你配置好最常用的工具。

- **手动选择特性**：如果你需要更细粒度的控制，可以选择手动选择特性。Vue CLI会列出所有可用的特性，如Vuex（状态管理）、Vue Router（路由管理）、TypeScript支持等，你可以根据项目需求进行选择。

##### 3.2 进入项目并启动开发服务器

项目创建完成后，进入项目目录，并启动开发服务器：

```bash
cd my-project-name
npm run serve
```

Vue CLI会启动一个热重载的开发服务器，并默认在浏览器中打开项目首页（通常是`http://localhost:8080/`）。此时，你可以开始开发你的Vue应用了。

##### 3.3 构建和部署

当你的应用开发完成，准备部署到生产环境时，可以使用以下命令来构建项目：

```bash
npm run build
```

Vue CLI会根据你的配置（如环境变量、插件等）来构建项目，并生成一个`dist/`目录，里面包含了所有用于生产环境的文件。你可以将`dist/`目录中的内容部署到你的服务器或任何静态文件托管服务上。

#### 4. Vue CLI与TypeScript的集成

对于希望使用TypeScript进行Vue开发的开发者来说，Vue CLI提供了非常便捷的支持。在创建项目时，只需在手动选择特性时勾选“TypeScript”选项，Vue CLI就会为你配置好TypeScript环境，包括tsconfig.json配置文件、TypeScript编译器选项等。

- **tsconfig.json**：这是TypeScript的配置文件，你可以在其中定义TypeScript的编译选项，如目标版本（target）、模块系统（module）、严格模式（strict）等。

- **Vue组件中的TypeScript**：在Vue CLI创建的项目中，`.vue`文件中的`<script>`标签可以配置为`lang="ts"`来使用TypeScript编写Vue组件。Vue CLI会处理`.vue`文件中的TypeScript代码，确保它们能够被正确编译和执行。

#### 5. 小结

通过本章节的学习，你应该已经掌握了Vue CLI的安装方法及其基本用法。Vue CLI作为Vue.js开发的核心工具之一，极大地简化了项目的创建、开发和构建过程。此外，Vue CLI对TypeScript的内置支持使得开发者能够轻松地将TypeScript集成到Vue项目中，享受TypeScript带来的类型安全和代码质量提升。在接下来的章节中，我们将进一步探索Vue CLI的高级特性和最佳实践，帮助你更好地利用Vue CLI来构建高质量的Vue应用。

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

TypeScript和Vue从入门到精通(三)

移动端开发指南

TypeScript和Vue从入门到精通(二)

TypeScript和Vue从入门到精通(一)

Vue.js从入门到精通(四)

VUE组件基础与实战

Vue面试指南

vuejs组件实例与底层原理精讲

Vue原理与源码解析

Vue3技术解密

vue项目构建基础入门与实战

Vue源码完全解析