vue-cli 和 vue-cli-service 有哪些区别?

Which are the differences between vue-cli and vue-cli-service?

我已经使用 Vue 一段时间了,但我才刚刚开始使用 CLI,我有点困惑。

我安装了 @vue/cli,如果我在命令行中输入 vue,我会得到:

Usage: vue <command> [options]

Options:
  -V, --version                              output the version number
  -h, --help                                 output usage information

Commands:
  create [options] <app-name>                create a new project powered by vue-cli-service
  add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
  invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
  inspect [options] [paths...]               inspect the webpack config in a project with vue-cli-service
  serve [options] [entry]                    serve a .js or .vue file in development mode with zero config
  build [options] [entry]                    build a .js or .vue file in production mode with zero config
  ui [options]                               start and open the vue-cli ui
  init [options] <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)
  config [options] [value]                   inspect and modify the config
  upgrade [semverLevel]                      upgrade vue cli service / plugins (default semverLevel: minor)
  info                                       print debugging information about your environment

  Run vue <command> --help for detailed usage of given command.

我用 vue 创建了一个项目,我需要安装 @vue/cli-service-global 出于某种我不记得的原因。

然而,在那之后,我注意到:

'vue-cli-service' is not recognized as an internal or external command

那是因为我必须安装 @vue/cli-service。现在,当我在命令行中输入 vue-cli-service 时,我得到:

  Usage: vue-cli-service <command> [options]

  Commands:

    serve     start development server
    build     build for production
    inspect   inspect internal webpack config

  run vue-cli-service help [command] for usage of a specific command.

显然,我可以使用这两种 CLI 工具进行构建、服务和检查。我的问题是 - 它们之间有什么区别? @vue/cli@vue/cli-service 的自述文件只有 link 到 this page 没有给出该问题的答案。

我可以用一个做什么,而另一个不能做什么?我需要两者吗?

@vue/cli-service-global 是一个包,它允许您 运行 vue servevue build 而无需任何本地依赖项 .

@vue/cli-service 是一个实际执行 vue servevue build 的包,@vue/cli-service-global@vue/cli 都依赖于它。

如果你正在使用 @vue/cli 那么你不需要单独安装另外两个,因为它的依赖项中已经有 @vue/cli-service


已添加:为了确定,我会再解释一下:

@vue/cli:

  1. addcreateconfigui等命令
  2. buildserve 命令通过 @vue/cli-service-global
  3. inspect 命令通过 @vue/cli-service 包(本地依赖)

@vue/cli-service-global:

  1. buildinspectserve 命令通过 @vue/cli-service

@vue/cli-service:

  1. buildinspectserve 命令

因此,您只需要安装 @vue/cli 并删除其他两个。


添加: 关于使用 vue-cli-service 的说明: 当您使用 vue create 命令创建项目时,@vue/cli 在创建的项目 ./node_modules/.bin 中生成 link 到 vue-cli-service 二进制文件。

那么你可以这样使用它:

  1. npm 脚本中直接作为 vue-cli-service 访问它 (package.json):

    "scripts": {
      "watch": "vue-cli-service build --watch"
    }
    
  2. 从 shell 访问它:./node_modules/.bin/vue-cli-service build --watch。 您甚至可以将 ./node_modules/.bin 添加到 shell PATH 并从 shell 直接访问它,如 vue-cli-service.