Vue.js CLI:学习如何使用它

Vue是一个非常令人印象深刻的项目,除了框架的核心之外,它还维护了许多实用工具,这些工具使Vue程序员的生活更加轻松。其中之一是Vue CLI。


Vue是一个非常令人印象深刻的项目,除了框架的核心之外,它还维护了许多实用工具,这些工具使Vue程序员的生活更加轻松。

其中之一是Vue CLI。

CLI代表命令行界面。

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

安装

Vue CLI是一个命令行实用程序,您可以使用npm在全球范围内安装它:

npm install -g @vue/cli

或使用纱线:

yarn global add @vue/cli

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

Vue CLI提供了什么?

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

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

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

它是一种灵活的工具:使用CLI创建项目后,您可以进行配置调整,而无需执行以下操作:喷射您的应用程序(就像您要做的那样create-react-app)。

从create-react-app弹出时,您可以更新和调整所需内容,但不能依赖create-react-app提供的出色功能

您可以配置任何内容,但仍然可以轻松升级。

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

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

如何使用CLI创建新的Vue项目

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

vue create example

很棒的事情是它是一个交互过程。您需要选择一个预设。默认情况下,有一个预设提供Babel和ESLint集成:

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

space启用您需要的其中一项,然后按enter继续。由于我选择了linter / formatter,因此Vue CLI会提示我进行配置。我选择了ESLint + Prettier,因为这是我最喜欢的设置:

接下来的事情是选择如何应用棉绒。我选择保存时的皮棉

接下来:测试。我选择了测试,Vue CLI为我提供了两种最受欢迎的解决方案之间的选择:Mocha + Chai vs Jest。

Vue CLI询问我将所有配置放在哪里:如果在package.json文件或专用配置文件中,每个工具一个。我选择了后者。

接下来,Vue CLI询问我是否要保存这些预设,并允许我下次使用Vue CLI创建新应用时选择它们。这是一个非常方便的功能,因为根据我的喜好进行快速设置可以缓解复杂性:

然后,Vue CLI询问我是否更喜欢使用Yarn或npm:

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

如何启动新创建的Vue CLI应用程序

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

入门示例应用程序源包含一些文件,包括package.json

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

  • yarn build,开始生产构建
  • yarn lint,运行lint
  • yarn test:unit,以运行单元测试

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

Git存储库

注意masterVS Code左下角的单词?这是因为Vue CLI自动创建一个存储库,并进行第一次提交,因此我们可以直接进入并进行更改,并且知道更改的内容:

这很酷。您投入了多少次并进行了更改,才意识到当您要提交结果时,您没有提交初始状态?

从命令行使用预设

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

vue create -p favourite example-2

预设存储在哪里

预设存储在.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
    }
  }
}

外挂程式

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

创建项目后,您可以通过使用添加更多插件vue add

vue add @vue/cli-plugin-babel

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

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

如果新版本有重大更改或错误,并且在使用前需要稍等片刻,则此功能很有用。

远程存储预设

通过创建包含以下内容的存储库,可以将预设存储在GitHub(或其他服务)中:preset.json文件,其中包含一个预设配置。从以上摘录中,我在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
}

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

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

Vue CLI的另一种用法:快速原型制作

到目前为止,我已经解释了如何使用Vue CLI从头开始创建所有项目。但是,对于真正快速的原型制作,您可以创建一个非常简单的Vue应用程序,甚至是一个包含在单个.vue文件中的应用程序,也可以提供该应用程序,而不必下载该应用程序中的所有依赖项。node_modules文件夹。

如何?首先安装cli-service-global全局包装:

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

//or

yarn global add @vue/cli-service-global

创建一个app.vue文件:

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

然后运行

vue serve app.vue

The standalone app

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, and you can have a package.json and any tool configuration set up. vue serve will pick it up.

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

Running vue build will prepare the project for deployment in dist/, and generate all the corresponding code, also for vendor dependencies.

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 have access to it by calling vue inspect:

Download my free Vue Handbook


More vue tutorials: