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：
npm install -g @vue/cli
注意：
-g参数表示全局安装，这样Vue CLI就可以在你的计算机上的任何地方被调用了。验证安装：安装完成后，通过输入
vue --version或vue -V命令来检查Vue CLI是否正确安装及其版本号。
3. Vue CLI的基本使用
Vue CLI不仅提供了项目初始化的能力，还内置了一系列实用的命令来帮助开发者进行项目开发和维护。以下是一些基本用法的介绍。
3.1 创建一个新的Vue项目
使用Vue CLI创建新项目非常简单，只需在终端或命令提示符中运行以下命令：
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 进入项目并启动开发服务器
项目创建完成后，进入项目目录，并启动开发服务器：
cd my-project-namenpm run serve
Vue CLI会启动一个热重载的开发服务器，并默认在浏览器中打开项目首页（通常是http://localhost:8080/）。此时，你可以开始开发你的Vue应用了。
3.3 构建和部署
当你的应用开发完成，准备部署到生产环境时，可以使用以下命令来构建项目：
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应用。
