In this section, we'll see the quickest and the easiest way to start using Vue CLI. It includes no configuration whatsoever! The reason to use Vue CLI without configuration is to run some quick experiments without having to answer prompts about our project's configuration that Vue CLI normally asks when we run a project with configuration steps included (which is the default approach to building apps using Vue CLI).
To begin, hold down the Shift key and right-click on an empty area on your desktop. From the contextual menu that pops up, click the Open Command window here command.
Once open, type the following command:
mkdir noConfig
This will make a new directory called noConfig. Next, let's change into that directory with the cd command:
cd noConfig
Finally, start VS Code from Command Prompt with this command:
code .
The dot in the preceding command means open VS Code in the current folder. Feel free to close the Welcome tab.
Next, use the Alt + F keyboard shortcut to open the File menu, and press the N key to open a brand new file.
In the new file, which opens in the tab that reads Untitled-1, type the following code:
<template>
<h1>What's up, Vue CLI 3?</h1>
<hr>
</template>
Next, press the Ctrl + S keyboard shortcut, and save the file as App.vue.
VS Code will save the file. It will give a new icon, the Vue logo icon, a visual cue that the file you just saved is indeed a Vue file.
VS Code might also prompt you to install an extension, Vetur, with the following prompt:
The 'Vetur' extension is recommended for this file type.
Go ahead and install the extension by clicking the Install button at the bottom of the popup.
Now we can serve our Vue app by running vue serve. But, before we actually run the command, let's use the -h flag to see what we have available:
vue serve -h
This is what we'll get back:
Usage: serve [options] [entry]
serve a .js or .vue file in development mode with zero config
Options:
-o, --open Open browser
-c, --copy Copy local url to clipboard
-h, --help Output usage information
Now that we know what to expect, let's serve our Vue app with the following command:
vue serve -o -c
So, as we can see as mentioned previously, this command will serve our Vue app and open it in the browser. It will also copy the served URL to the clipboard. This allows us to, for example, open a different, non-default browser, and easily paste in the URL in the browser's address bar, so that we can preview our app there as well.
However, we'll come across a minor stumbling block.
Instead of our Vue app being served, we'll get this notification in our command:
Command vue serve requires a global addon to be installed.
Please run npm install -g @vue/cli-service-global and try again.
This is an easy fix. Better yet, we'll extend the preceding command with --loglevel verbose:
npm install -g @vue/cli-service-global --loglevel verbose
After some time, depending on your download speed, you'll get the npm info ok message.
This means that you can now run the vue serve command again:
vue serve -o -c
This time it works! Kind of...
Now we get an error that reads Failed to compile with 1 errors. And then, further down, we see the root cause:
Component template should contain exactly one root element.
There are a few ways to solve this issue, but what it basically says is that we can wrap our h1 and hr tags inside a div tag, and we'll be good to go. So, let's update the App.vue file in VS Code to this:
<template>
<div>
<h1>What's up, Vue CLI 3?</h1>
<hr>
</div>
</template>
Make sure to save your changes, and now, finally, let's serve it again:
vue serve -o -c
You might get a bit of a surprise, because a new tab will open with the app loaded automatically, in your default browser.
Let's say that your default browser is Chrome. Let's open another browser (for example, Firefox), click inside the admin bar, and press the Ctrl + V shortcut to paste in the contents of the clipboard. Of course, it's going to be http://localhost:8080/.
The ease with which we've performed these repetitive tasks of opening our app in the browser and copying its URL with the help of -o and -c flags is just the tip of the iceberg. Vue CLI 3 has a lot more in store to help us code our apps faster and easier.
For example, let's get back to our code and erase the line with the hr tag, and then save the file. Look at your browser tab, the one with our Vue app open. It will auto-refresh, reflecting the changes in code. That's webpack in action, running under the hood of Vue CLI 3, watching for changes to our Vue files, and hot-reloading the app in the browser accordingly.
If you've been coding for more than a couple of years, you'll appreciate the ease of this workflow. In the past, we either had to set up our tools so that they performed the auto-refresh of our apps in the browser whenever we save our files, or we had to set up our IDE or code editor, or both. Even up until recently, we still had to tinker with webpack to automate this kind of a workflow, and this as with anything coding-related, sometimes did not go as smoothly as we'd hope.
With Vue CLI 3, this is all automated and made very simple.
Let's see some other ways in which Vue CLI 3 helps us code better and be more productive.