Vue.js CLI: Learn how to use it

Vue is a very impressive project. In addition to the core of the framework, it also maintains many useful tools that make the life of Vue programmers easier. One of them is Vue CLI.


Vue is a very impressive project. In addition to the core of the framework, it also maintains many useful tools that make the life of Vue programmers easier.

One of them is Vue CLI.

CLI stands for Command Line Interface.

Note: Now, from version 2 to version 3, a large number of CLI revisions are in progress. Although it is not stable yet, I will introduce version 3 because it is a huge improvement over version 2 and is very different.

installation

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

npm install -g @vue/cli

Or use yarn:

yarn global add @vue/cli

When you are done, you can callvuecommand.

What does Vue CLI provide?

CLI is essential for rapid Vue.js development.

Its main goal is to ensure that all required tools can work properly, perform the required work, and abstract out all the details required to use each tool individually.

It can perform initial project setup and scaffolding.

It is a flexible tool: After creating a project with CLI, you can make configuration adjustments without the need to perform the following operations:injectionYour application (just as you docreate-react-app).

When popping up from create-react-app, you can update and adjust what you need, but you cannot rely on the excellent features provided by create-react-app

You can configure anything, but you can still upgrade easily.

After the application is created and configured, it acts as a runtime dependency tool based on Webpack.

The first contact with CLI was when creating a new Vue project.

How to create a new Vue project using CLI

The first thing to do with the CLI is to create a Vue application:

vue create example

The great thing is that it is an interactive process. You need to choose a preset. By default, there is a preset that provides Babel and ESLint integration:

I will press the down arrow ⬇️ and manually select the desired function:

pressspaceActivate one of the items you need, then pressentercarry on. Since I chose linter/formatter, Vue CLI will prompt me to configure. I chose ESLint + Prettier because this is my favorite setting:

The next thing is to choose how to apply the lint. I chooseLint when stored.

Next up: testing. I chose to test, and Vue CLI provided me with a choice between the two most popular solutions: Mocha + Chai vs Jest.

Vue CLI asked me where to put all the configuration: if inpackage.jsonFile or dedicated configuration file, one for each tool. I chose the latter.

Next, Vue CLI asks me if I want to save these presets and allows me to select them the next time I create a new application using Vue CLI. This is a very convenient feature, because quick settings according to my preferences can ease the complexity:

Then, Vue CLI asked me if I would prefer to use Yarn or npm:

This is the last thing it asked me, and then proceeded to download the dependencies and create the Vue application:

How to start a newly created Vue CLI application

Vue CLI has created the application for us, we can enterexampleFolder and runyarn serveStart our first application in development mode:

The getting started sample application source contains some files, includingpackage.json:

This is where all CLI commands are defined, includingyarn serve, This is what we used a minute ago. Other commands are

  • yarn build, Start production build
  • yarn lint, Run lint
  • yarn test:unitTo run unit tests

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

Git repository

notemasterThe word in the lower left corner of VS Code? This is because Vue CLI automatically creates a repository and makes the first commit, so we can go directly in and make changes, and know the content of the changes:

That's cool. How many times have you invested and made changes before you realized that when you were about to submit the results, you did not submit the initial state?

Use presets from the command line

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

vue create -p favourite example-2

Where are the presets stored

Presets are stored in.vuejsThe files are placed in your home directory. After creating the first "Favorites" preset, this is mine

{
  "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
    }
  }
}

Plug-in

As you can see from reading the configuration, the preset is basically a collection of plug-ins with some optional configurations.

After creating the project, you can add more plugins by usingvue add:

vue add @vue/cli-plugin-babel

All these plugins are used in the latest version available. You can force Vue CLI to use a specific version by passing the version attribute:

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

This feature is useful if there are major changes or bugs in the new version and you need to wait a while before using it.

Store presets remotely

You can store presets in GitHub (or other services) by creating a repository with the following content:preset.jsonFile, which contains a preset configuration. From the above excerpt, I amhttps://github.com/flaviocopes/vue-cli-preset/blob/master/preset.jsonIt contains the following configuration:

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

You can use the following command to boot the new application:

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

Another use of Vue CLI: rapid prototyping

So far, I have explained how to use Vue CLI to create all projects from scratch. However, for really fast prototyping, you can create a very simple Vue application, or even an application contained in a single .vue file, and you can provide the application without having to download all of the application Dependencies.node_modulesfolder.

how is it? First installcli-service-globalGlobal packaging:

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

//or

yarn global add @vue/cli-service-global

Create an app.vue file:

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

Then run

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: