使用Vue.js CLI可以完成4个令人敬畏的事情

转载来自http://baijiahao.baidu.com/s?id=1595169306107212739&wfr=spider&for=pc

CLI提供了一些很酷的功能，用于定制新项目，原型，添加插件以及检查Webpack配置，而无需重新弹出。

到目前为止，您可能已经听说过Vue.js，这是前端世界中一个相对较新的孩子，在过去的几年里，Angular和React一直主导着这个孩子。实际上，你们中的许多人可能会强烈地认同Angular或React作为您的选择框架。虽然我从来没有试图说出你的偏好，但我认为你应该考虑将Vue.js添加到你的工具栏中，即使只是为了原型和尝试新的想法。

编者注：如果您正在规划Vue项目，我们建议您在开始之前阅读“ 规划Vue应用程序 ”白皮书Brandon Satrom。

有很多关于Vue的热爱。我个人最喜欢的一个是CLI，它提供了一些很酷的功能，用于定制新项目，原型，添加插件以及检查Webpack配置，而无需重新弹出。这是每个这些的简要说明。

首先，安装Vue CLI

在我们开始之前，如果您想在家中继续使用，您需要安装Vue CLI。这将是你整天做的最简单的事情，甚至比刷牙，取出垃圾，或要求Alexa播放Kenny G深度播放列表更容易。

打开一个终端窗口并输入以下内容：

npm install -g @ vue.cli

或者，如果您更喜欢纱线作为包管理器：

yarn global add @vue/cli

对于这篇文章，我假设您安装了Vue CLI的版本3或更高版本。如果您不确定您拥有哪个版本，请输入以下命令：

vue --version

如果它小于版本3，请运行上述命令之一来安装最新版本。

现在，你已经准备好与Vue一起推出。

在创建时自定义您的项目

与Angular和React（create-react-app）CLI一样，Vue的CLI可以轻松创建新的应用程序。Vue最酷的特点是你可以根据你想要做的事情来定制你得到的样板工程。

让我们试试看。在终端中输入以下内容：

vue create my-app

CLI会询问你的第一件事是如果你想使用其预设中的一个预设babel或eslint，或手动选择你想要使用的功能。如果您选择手动，您将看到以下屏幕。

想用Vue使用TypeScript？凉。想要建立一个PWA，这是最近的愤怒？有一个模板。想要Vue路由器，Vuex进行状态管理和一些测试样板吗？完成。

尝试使用空格键选择一些功能，然后按回车。接下来的提示会要求您根据您选择的功能进行其他选择。我为我的项目选择了一切，因此下面的图片显示了您可能会问到的所有问题。

一旦你回答了一切，Vue会下载并安装你需要的一切。从那里，你可以进入目录并运行``npm run serve```来查看项目或者在你的编辑器中打开它。下面的图片显示了如果您选择了许多或所有可用功能，您的脚手架项目可能看起来像什么。

与轻松的原型

vue create非常适合搭建完整的应用程序，以备严肃的开发，但有时候您只是想构建一个快速的原型，并且希望快速创建一些东西，而无需在程序中添加一大堆样板。

Vue的优点在于您可以创建HTML文件，为Vue添加脚本标记并开始编码，但Vue CLI的功能更快，其中包括用于运行原型的开发服务器。

首先使用以下命令安装Vue CLI服务：

npm install -g @ vue / cli-service-global

然后，使用.vue扩展名创建一个文件，并为其添加一些Vue代码。如果您想要，您可以从命令行轻松完成此操作：

echo'Hello Vue.js CLIthis is cool' > App.vue

然后，您可以运行vue serve并查看您的快速原型！

即时添加插件

通常，我们不知道我们开始之前需要的所有功能。例如，您可能认为您需要赛普拉斯在您的应用中进行端到端，但您不确定，而且您宁愿不从一开始就将依赖项添加到您的项目中。

值得庆幸的是，Vue CLI可以轻松地将这些插件添加到您的应用程序中，即使您在此vue create过程中跳过了它们。

首先，您需要在应用的根目录下运行以下命令来添加问题插件：

npm install @ vue / cli-plugin-e2e-cypress

安装完成后，您可以使用该、invoke命令将赛普拉斯开始测试所需的一切脚本化：

vue invoke e2e-cypress

该插件将添加测试所需的依赖项和新文件和文件夹。它还会在package.json文件中添加一些脚本条目以进行端到端测试。通过跑步试试npm run e2e！

在不弹出的情况下检查您的Webpack配置

就像create-react-app一样，Vue CLI创建一个围绕Webpack的抽象，使您无需手动修改Webpack配置即可使用功能和依赖关系。然而，想要对该配置进行调整的情况并不少见，并且没有任何CLI可以预见到您可能想要使用或修改的所有功能。

为此，Vue CLI允许您查看Webpack配置并查看CLI生成的内容，如果您正在进行更改并希望确保输出结果符合您的期望，这可能会有所帮助。在任何Vue CLI生成的项目中，只需运行以下命令：

vue inspect

默认情况下，将配置输出到您的控制台，但您可以将其指向文件，如下所示：

vue inspect > webpack.config.js

你也可以通过传递一个点符号的路径来检查配置的一部分：

vue inspect resolveLoader.modules

请注意，该命令仅用于检查。对生成的文件所做的任何更改都不会影响Vue在运行vue serve或配置时依赖的配置vue build。

Vue.js可能是该块上的新（ish）小子，但不可否认它有一些很酷且有光泽的工具。无论您选择的图书馆还是框架，我都建议您今天尝试使用Vue创建新内容。