了解如何使用Vue.js CLI

Interested in learning Vue.js? Get my ebook at vuehandbook.com
有兴趣学习Vue.js吗？在vuehandbook.com上获取我的电子书

One of them is the Vue Command Line Interface (CLI).

其中之一是Vue命令行界面(CLI)。

Note: There is a huge rework of the CLI going on right now, going from version 2 to 3. While not yet stable, I will describe version 3 because it’s a huge improvement over version 2, and quite different.

注意：从版本2到版本3，现在正在对CLI进行大量修改。虽然尚不稳定，但我将介绍版本3，因为它是对版本2的巨大改进，并且有很大的不同。

安装 (Installation)

The Vue CLI is a command line utility, and you install it globally using npm:

Vue CLI是一个命令行实用程序，您可以使用npm在全局安装它：

npm install -g @vue/cli

or using yarn:

或使用纱线：

yarn global add @vue/cli

Once you do so, you can invoke the vue command.

完成后，您可以调用vue命令。

Vue CLI提供了什么？ (What does the Vue CLI provide?)

The CLI is essential for rapid Vue.js development.

CLI对于快速Vue.js开发至关重要。

Its main goal is to make sure all the tools you need are working along, to perform what you need. It abstracts away all the nitty-gritty configuration details that using each tool in isolation would require.

它的主要目标是确保所需的所有工具都可以正常工作，以执行所需的工作。它抽象出了单独使用每个工具所需的所有细节配置细节。

It can perform an initial project setup and scaffolding.

它可以执行初始项目设置和脚手架。

It’s a flexible tool. Once you create a project with the CLI, you can go and tweak the configuration, without having to eject your application (like you’d do with create-react-app). You can configure anything and still be able to upgrade with ease.

这是一个灵活的工具。使用CLI创建项目后，就可以进行配置调整，而不必退出应用程序(就像对create-react-app )。您可以进行任何配置，仍然可以轻松升级。

After you create and configure the app, it acts as a runtime dependency tool, built on top of webpack.

创建和配置应用程序后，它充当基于Webpack的运行时依赖工具。

The first encounter with the CLI is when creating a new Vue project.

与CLI的第一次接触是在创建新的Vue项目时。

如何使用CLI创建新的Vue项目 (How to use the CLI to create a new Vue project)

The first thing you’re going to do with the CLI is to create a Vue app:

使用CLI要做的第一件事是创建一个Vue应用程序：

vue create example

The cool thing is that it’s an interactive process. You need to pick a preset. By default, there is one preset that’s providing Babel and ESLint integration:

最酷的是，这是一个交互式过程。您需要选择一个预设。默认情况下，有一个预设提供Babel和ESLint集成：

I’m going to press the down arrow ⬇️ and manually choose the features I want:

我将按向下箭头⬇️并手动选择所需的功能：

Press space to on each feature you need, and then press enter to go on. Since I chose “Linter/Formatter”, Vue CLI prompts me for the configuration. I chose “ESLint + Prettier” since that’s my favorite setup:

按space选择所需的每个功能，然后按enter继续。由于我选择了“ Linter / Formatter”，因此Vue CLI会提示我进行配置。我选择“ ESLint + Prettier”，因为这是我最喜欢的设置：

The next step is choosing how to apply linting. I chose “Lint on save”.

下一步是选择如何应用棉绒。我选择了“保存时不掉毛”。

Next up: testing. I picked testing, and Vue CLI offers me the two most popular solutions to choose from: “Mocha + Chai” vs “Jest”.

接下来：测试。我选择了测试，Vue CLI为我提供了两种最受欢迎的解决方案供您选择：“ Mocha + Chai”和“ Jest”。

Vue CLI asks me where to put all the configuration. The choices are in the “package.json” file, or in dedicated configuration files, one for each tool. I chose the latter.

Vue CLI询问我将所有配置放在何处。选项位于“ package.json”文件或专用配置文件中，每个工具一个。我选择了后者。

Next, Vue CLI asks me if I want to save these presets, and allows me to pick them as a choice the next time I use Vue CLI to create a new app. It’s a very convenient feature. Having a quick setup with all my preferences is a complexity reliever:

接下来，Vue CLI询问我是否要保存这些预设，并允许我下次使用Vue CLI创建新应用时选择它们。这是一个非常方便的功能。快速设置所有偏好设置可以缓解复杂性：

Vue CLI then asks me if I prefer using yarn or npm:

然后，Vue CLI询问我是否更喜欢使用yarn或npm：

and it’s the last thing it asks me. It then it goes on to download the dependencies and create the Vue app:

这是我要问的最后一件事。然后继续下载依赖项并创建Vue应用程序：

如何启动新创建的Vue CLI应用程序 (How to start the newly created Vue CLI application)

Vue CLI has created the app for us, and we can go in the “example” folder and run yarn serve to start up our first app in development mode:

Vue CLI已经为我们创建了应用程序，我们可以进入“ example”文件夹并运行yarn serve以开发模式启动我们的第一个应用程序：

The starter example application source contains a few files, including “package.json”:

入门示例应用程序源包含一些文件，包括“ package.json”：

This is where all the CLI commands are defined, including yarn serve, which we used a minute ago. The other commands are

这是定义所有CLI命令的地方，包括我们在一分钟前使用的yarn serve 。其他命令是

yarn build, to start a production build
yarn build ，开始生产
yarn lint, to run the linter
yarn lint
yarn test:unit, to run the unit tests
yarn test:unit ，运行单元测试

I will describe the sample application generated by Vue CLI in a separate tutorial.

我将在单独的教程中描述由Vue CLI生成的示例应用程序。

Git仓库 (Git repository)

Notice the master word in the lower-left corner of VS Code? That’s because Vue CLI automatically creates a repository, and makes a first commit. We can jump right in, change things, and we know what we changed:

注意VS Code左下角的master词吗？这是因为Vue CLI自动创建存储库并进行第一次提交。我们可以直接进入，进行更改，我们知道更改了什么：

This is pretty cool. How many times do you dive in and change things only to realize, when you want to commit the result, that you didn’t commit the initial state?

这很酷。当您要提交结果时，您潜入了多少次并进行更改以仅意识到自己没有提交初始状态？

从命令行使用预设 (Use a preset from the command line)

You can skip the interactive panel and instruct Vue CLI to use a particular preset:

您可以跳过交互式面板，并指示Vue CLI使用特定的预设：

vue create -p favourite example-2

预设存储在哪里 (Where presets are stored)

Presets are stored in the “.vuejs” file in your home directory. Here’s mine after creating the first “favourite” preset:

预设存储在主目录中的“ .vuejs”文件中。创建第一个“收藏夹”预设后，这是我的：

{  "useTaobaoRegistry": false,  "packageManager": "yarn",  "presets": {    "favourite": {      "useConfigFiles": true,      "plugins": {        "@vue/cli-plugin-babel": {},        "@vue/cli-plugin-eslint": {          "config": "prettier",          "lintOn": [            "save"          ]        },        "@vue/cli-plugin-unit-jest": {}      },      "router": true,      "vuex": true    }  }}

外挂程式 (Plugins)

As you can see from reading the configuration, a preset is basically a collection of plugins, with some optional configuration.

从阅读配置可以看到，预设基本上是插件的集合，带有一些可选配置。

Once a project is created, you can add more plugins by using vue add:

创建项目后，您可以使用vue add添加更多插件：

vue add @vue/cli-plugin-babel

All those plugins are used at the latest version available. You can force Vue CLI to use a specific version by passing the version property:

所有这些插件均以可用的最新版本使用。您可以通过传递version属性来强制Vue CLI使用特定版本：

"@vue/cli-plugin-eslint": {  "version": "^3.0.0"}

This is useful if a new version has breaking changes or a bug, and you need to wait a little bit before using it.

如果新版本具有重大更改或错误，并且您需要稍等片刻才能使用它，这很有用。

远程存储预设 (Remotely store presets)

A preset can be stored in GitHub (or on other services) by creating a repository that contains a “preset.json” file, which contains a single preset configuration.

通过创建包含“ preset.json”文件的存储库，可以将预置存储在GitHub(或其他服务)中，该文件包含一个预置配置。

Extracted from the above, I made a sample preset in https://github.com/flaviocopes/vue-cli-preset/blob/master/preset.json which contains this configuration:

从上面提取的内容，我在https://github.com/flaviocopes/vue-cli-preset/blob/master/preset.json中进行了一个示例预置，其中包含以下配置：

{  "useConfigFiles": true,  "plugins": {    "@vue/cli-plugin-babel": {},    "@vue/cli-plugin-eslint": {      "config": "prettier",      "lintOn": [        "save"      ]    },    "@vue/cli-plugin-unit-jest": {}  },  "router": true,  "vuex": true}

It can be used to bootstrap a new application using:

可以使用以下命令来引导新应用程序：

vue create --preset flaviocopes/vue-cli-preset example3

Vue CLI的另一种用法：快速原型制作 (Another use of the Vue CLI: rapid prototyping)

Until now, I’ve explained how to use the Vue CLI to create a new project from scratch, with all the bells and whistles. But for really quick prototyping, you can create a really simple Vue application — one that’s self-contained in a single .vue file — and serve that, without having to download all the dependencies in the node_modules folder.

到目前为止，我已经解释了如何使用Vue CLI从头开始创建所有项目。但是，要真正快速地进行原型制作，您可以创建一个非常简单的Vue应用程序-一个独立包含在单个.vue文件中的应用程序-并为其提供服务，而不必下载node_modules文件夹中的所有依赖node_modules 。

How? First install the cli-service-global global package:

怎么样？首先安装cli-service-global全局软件包：

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

//or yarn

global add @vue/cli-service-global

Create an “app.vue” file:

创建一个“ app.vue”文件：

<template>    <div>        <h2>Hello world!</h2>        <marquee>Heyyy<;/marquee>    </div></template>

and then run

然后运行

vue serve app.vue

You can serve more organized projects, composed by JavaScript and HTML files as well. Vue CLI by default uses “main.js” / “index.js” as its entry point. You can have a “package.json” and any tool configuration set up. vue serve will pick it up.

您还可以提供由JavaScript和HTML文件组成的更有条理的项目。默认情况下，Vue CLI使用“ main.js” /“ index.js”作为其入口点。您可以设置“ package.json”和任何工具配置。 vue serve会捡起来。

Since this uses global dependencies, it’s not an optimal approach for anything more than demonstration or quick testing.

由于这使用了全局依赖关系，因此除了演示或快速测试之外，它不是最佳方法。

Running the vue build command will prepare the project for deployment, and generate the resulting JavaScript files in the dist/ folder, so that it will be production-ready. All the warnings that Vue.js generates during development are removed, and the code is optimized for real-world usage.

运行vue build命令将为项目做好部署准备，并在dist/文件夹中生成生成JavaScript文件，以便将其投入生产。 Vue.js在开发过程中生成的所有警告均已删除，并且代码已针对实际使用进行了优化。

Webpack (Webpack)

Internally, Vue CLI uses Webpack, but the configuration is abstracted and we don’t even see the config file in our folder. You can still access it by calling vue inspect:

在内部，Vue CLI使用Webpack，但是配置是抽象的，我们甚至在文件夹中都看不到配置文件。您仍然可以通过调用vue inspect来访问它：