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

Question

I've used Vue for some time now, but I'm just getting started with the CLI and I got a bit confused.

I installed @vue/cli and if I type vue in the command line, I get:

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.

I created a project with vue and I needed to install @vue/cli-service-global for some reason that I can't remember.

After that, however, I noticed:

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

And that's because I had to install @vue/cli-service. Now, when I type vue-cli-service in the command line, I get:

  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.

---

Apparently, I can build, serve, and inspect with both CLI tools. My question is - what's the difference between them? Both the readme of @vue/cli and @vue/cli-service have nothing but a link to this page where no answer is given to that question.

What can I do with one that I can't do with the other? Do I need both?

Answer 1

@vue/cli-service-global is a package that allows you to run vue serve and vue build without any local dependencies.

@vue/cli-service is a package that actually doing those vue serve and vue build, both @vue/cli-service-global and @vue/cli depend on it.

If you're using @vue/cli then you don't need to install another two independently, since it already has @vue/cli-service in its dependencies.

---

Added: Just to be sure, I'll explain it more:

@vue/cli:

1. add, create, config, ui and other commands
2. build and serve commands through @vue/cli-service-global package
3. inspect command through @vue/cli-service package (local dependency)

@vue/cli-service-global:

1. build, inspect and serve commands through @vue/cli-service package

@vue/cli-service:

1. build, inspect and serve commands

So, you need to install @vue/cli only and remove other two.

---

Added: Clarification about using vue-cli-service: When you create a project using vue create command, @vue/cli makes a link to vue-cli-service binary inside ./node_modules/.bin of created project.

Then you can use it like this:

1. Access it directly as vue-cli-service inside npm scripts (package.json):

   "scripts": {   "watch": "vue-cli-service build --watch" } 

2. Access it from the shell: ./node_modules/.bin/vue-cli-service build --watch. You can even add ./node_modules/.bin to you shell PATH and access it from the shell directly as vue-cli-service.