了解如何使用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來訪問它：