Vue CLI 3: Everything you need to know
In this tutorial we’ll explore the Vue CLI 3, along with the sleek new Vue UI, in order to quickly scaffold a Vue app. We’ll then take a tour of the project the CLI creates for us to get comfortable working within these files and folders later.
This post is a free lesson from Vue Mastery’s Real World Vue course, where we walk through building a production-level Vue.js application from installation to deployment.
🤔 Why a CLI?
As you probably know, CLI stands for Command Line Interface, and the Vue CLI provides a full system for rapid Vue.js development. This means it does a lot of tedious work for us and provides us with valuable features out-of-the-box, such as:
It allows us to select which libraries our project will be using, then it automatically plugs them into the project.
It Configures Webpack. When we build our app with Webpack, all of our JavaScript files, our CSS, and our dependencies get properly bundled together, minified and optimized.
It allows us to write our HTML, CSS & JavaScript however we like. We can use single-file .vue components, TypeScript, SCSS, Pug, the latest versions of ECMAScript, etc.
It enables Hot Module Replacement (HMR). So when you save your project, changes appear instantly in the browser. This configuration is based on webpack-dev-server.
⬇️ Installing the CLI
In order to use the CLI, you’ll need to have Node.js version 8 or above installed (8.10.0+ is recommended).
To install the CLI, run this command in your terminal:
npm i -g @vue/cliOnce it is installed, you’ll have access to the vue binary in your command line. We’ll use this to create our project.
💥 Creating a Vue project
There are two ways we can create our project. With the newer Vue UI, or directly from the command line, which we’ll do now with:
vue create real-world-vueThis command will start the creation of a Vue project, with the name of “real-world-vue”.
We’ll then be prompted with the option to pick a default preset or to manually select features. Using the down arrow key, we’ll highlight Manually select features, then hit enter.
We’ll then be presented with a list of feature options. Using the down arrow key, we’ll move down and use the spacebar to select the features we need for our project: Router, Vuex and Linter / Formatter. Then hit enter.
We’ll then choose a Linter / Formatter. For this project, we’ll be using ESLint + Prettier.
We’ll add the additional feature of Lint on save.
And we’ll choose to have dedicated config files.
We have the option to save all of these settings as a preset. We’ll choose not to with N.
If you’d like to save this as a preset, however, it will be stored in a JSON file named .vuerc in your user home directory.
If you have yarn installed, you’ll be prompted to choose a package manager. I’ll choose npm.
When we hit enter, our project will be created automatically.
💻 Serving our Project
Once our project is done being created, we can cd into. In order to view it live in our browser, we’ll run this command: npm run serve
Above is our app, running live in the browser. It already has two pages, the Home page and the About page, which you can navigate between because it’s using Vue Router. To learn more about Vue Router, check out Vue Mastery’s Real World Vue Course.
🌈 Now with Vue UI
Now that we understand how to create a Vue project from the command line, let’s repeat this same process but with the Vue UI instead.
Since we now have access to the vue binary, we can type vue ui in our terminal, which will start up the Vue UI in our browser.
Our first step is to click the Create tab, select the location where we want to save our project, then click Create a new project here.
We’ll then give our project a name, in this case, “real-world-vue”. We have the option to select a package manager, but we’ll stick with the default.
Just like from the terminal, we’ll Manually select features.
We’ll select Router, Vuex, and make sure that Babel and Linter / Formatter are also selected and choose Dedicated Config Files.
On the next page, we want to make sure Lint on save is selected, and in the right-hand dropdown, select ESLint + Prettier.
We also have the option to save these settings as a preset, but we can choose not to by clicking Continue without saving.
Now our project will be created.
Vue UI Features
The UI provides the ability to alter our configurations, as well as run tasks, like the serve task that we ran earlier from the terminal. The difference here is that we get a lot more information about what is happening with that task.
You can also add plugins to your project from the Vue UI, which makes it very simple to add a library that you may need.
If you need to import a project that you hadn’t originally created from the Vue UI, you can easily do so from the Import tab of the Project Manager. Just locate your project, and click Import this folder.
🚌 Touring our Vue Project
Now that we know how to create our project from the terminal and also from the UI, let’s take a look at the project that was created for us.
The node_modules directory is where all of the libraries we need to build Vue are stored.
In the public directory, you place any static assets you don’t want to be run through Webpack when we build our project.
You’ll want to put the majority of your assets, such as images and fonts, in the assets directory so they can be optimized by Webpack.
The components directory is where we store the components, or building blocks, of our Vue app.
The views directory is where we store files for the different views, or pages, of our app.
The App.vue file is the root component that all other components are nested within.
The main.js file is what renders our App.vue component (and everything nested within it) and mounts it to the DOM.
Below that we have a router.js file, which we’ll cover more in the lesson on Vue Router, and the store.js file is for Vuex, which we’ll also cover in future lessons.
Finally, we have a .gitignore file where we can specify what we want git to ignore, along with a babel.config.js file and our package.json, which helps npm identify the project and handle its dependencies.
⏫ How the App is Loaded
You might be wondering now, how is the app being loaded? Let’s take a look at that process by opening our main.js file:
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store"; Vue.config.productionTip = false; new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
We see that we’re importing Vue, along with our root App.js component, as well as our router and store. We are then creating a new Vue instance, telling it to use the router and store, and to render App (our root component) and mount it to the DOM, where this id of app is.
If we peek inside our Index.html file, we can see there’s a div with the id of "app", which means this is where our App will be mounted.
<div id="app">Our App will be mounted here</div>Let’s take a look at this process more visually:
🏗 The Build Process
Now that we understand how the App gets rendered and mounted, let’s take a look at the build process. Because remember? Webpack will be bundling our files together.
If we take a closer look at our index.html file, we see this comment: built files will be auto-injected.
So what does that mean?
Let’s explore that by heading back to our terminal, and running the command:
npm run build
This will build our project, and when it’s complete, we see it says, “The dist directory is ready to be deployed”.
Hmm. Let’s open up the dist directory that was created for us.
As we see here in the js directory, Webpack has packaged our app and given us these new bundled JavaScript files.
And if we open up our index.html, we can see that there are now two script tags, which have been auto-injected, where that comment used to be (“built files will be auto injected”).
<script src=/js/chunk-vendors.24971a46.js></script> <script src=/js/app.5f694b83.js></script>The chunk-vendors.24971a46.js file contains all of our dependencies.
The app.5f694b83.js file below it contains all of our application-specific code, including the code that was in our main.js, which renders and mounts our App.
So when our project is deployed, and the browser reads this app.5f694b83.js file, that will trigger the process we just looked at visually, where our Vue instance is created and our App is rendered and then mounted to the DOM.
⏭ What’s next?
If you’re just getting started with Vue, be sure to check out my free Intro to Vue.js course over on Vue Mastery which has 11 lessons to get started.
We also have a free Vue cheat sheet containing all the essential syntax you need when you’re coding Vue.
Lastly, if you’re ready to code along and build this real world app with me, you might consider a Vue Mastery subscription. In the next paid lesson of the course, we’ll be exploring how to set up our code editor for an optimal development environment.
Originally published at www.vuemastery.com.
