如何使用 Vue CLI 快速搭建 Vue 项目

Vue CLI 是一个基于 Vue.js 的标准化工具，可以帮助开发者快速创建和管理 Vue 项目。Vue CLI 提供了一个图形化界面和一个命令行界面，让开发者可以方便地进行项目的初始化、开发、构建和部署。

本文将介绍如何使用 Vue CLI 的命令行界面来搭建一个简单的 Vue 项目，并介绍一些常用的命令和选项。

安装 Vue CLI

要使用 Vue CLI，首先需要安装 Node.js，版本要求是 8.9 或以上（推荐 10 以上）。然后可以使用 npm 或 yarn 来全局安装 Vue CLI：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装完成后，可以在命令行中输入 vue 来查看所有可用的命令和帮助信息。也可以输入 vue --version 来查看 Vue CLI 的版本。

创建项目

要创建一个新的 Vue 项目，可以使用 vue create 命令，并指定项目的名称：

vue create my-project

这个命令会在当前目录下创建一个名为 my-project 的文件夹，并在其中初始化一个基本的 Vue 项目。在创建过程中，会让开发者选择一个预设的配置，或者自定义配置。预设的配置包括：

default：默认配置，包含了 Babel 和 ESLint。
default (Vue 3 Preview)：默认配置，但是使用了 Vue 3 的预览版。
Manually select features：手动选择特性，可以自己选择需要的插件和配置。

如果选择了手动选择特性，那么会出现一系列的选项，让开发者根据自己的需求来勾选。例如：

Choose Vue version：选择 Vue 的版本，可以是 2.x 或者 3.x。
Babel：是否使用 Babel 来转译代码。
TypeScript：是否使用 TypeScript 来编写代码。
Progressive Web App (PWA) Support：是否支持 PWA。
Router：是否使用 Vue Router 来管理路由。
Vuex：是否使用 Vuex 来管理状态。
CSS Pre-processors：是否使用 CSS 预处理器，例如 Sass、Less 或 Stylus。
Linter / Formatter：是否使用 ESLint 或 Prettier 来规范和格式化代码。
Unit Testing：是否使用单元测试框架，例如 Jest 或 Mocha。
E2E Testing：是否使用端到端测试框架，例如 Cypress 或 Nightwatch。

在选择完特性后，还会有一些额外的选项，例如：

Use class-style component syntax：是否使用类风格的组件语法。
Use Babel alongside TypeScript：是否在 TypeScript 中使用 Babel。
Use history mode for router：是否在路由中使用 history 模式。
Pick a CSS pre-processor：选择一个 CSS 预处理器。
Pick a linter / formatter config：选择一个代码规范和格式化配置。
Pick additional lint features：选择额外的代码检查特性。
Pick a unit testing solution：选择一个单元测试解决方案。
Pick an E2E testing solution：选择一个端到端测试解决方案。

最后，还会让开发者选择是否将当前的配置保存为一个新的预设，以便下次使用。

创建项目完成后，可以进入项目目录，并使用 npm run serve 或 yarn serve 命令来启动一个开发服务器，然后在浏览器中访问 http://localhost:8080 来查看项目的效果。

其他命令

除了 vue create 命令，Vue CLI 还提供了一些其他的命令，例如：

vue add：添加一个插件到已有的项目中。
vue invoke：调用一个插件的生成器。
vue inspect：检查一个项目的 webpack 配置。
vue serve：在开发环境下快速预览一个文件。
vue build：在生产环境下构建一个文件。
vue ui：启动一个图形化界面来管理项目。
vue upgrade：升级项目中的 Vue CLI 相关模块。

更多的命令和选项可以参考 Vue CLI 的官方文档：https://cli.vuejs.org/zh/

总结

Vue CLI 是一个非常强大和灵活的工具，可以帮助开发者快速搭建和管理 Vue 项目。它提供了丰富的特性和插件，让开发者可以根据自己的需求来定制项目的配置。它也提供了一个图形化界面，让开发者可以更直观地操作和监控项目。Vue CLI 是 Vue.js 开发的标准化工具，值得每个 Vue.js 开发者学习和使用。