30 Days of Vue
This post is part of the series 30 Days of Vue.
In this series, we're starting from the very basics and walk through everything you need to know to get started with Vue. If you've ever wanted to learn Vue, this is the place to start!
Today, we're going to discuss Vue's official development tool in helping build and scaffold Webpack bundled Vue applications rapidly.
Yesterday - we talked about single-file components, the advantages they provide, and how we’re only able to use them with build tools like Webpack. Today, we’ll talk about how we can rapidly scaffold a brand new Webpack bundled Vue application with the Vue CLI (i.e. the Vue Command Line interface).
The Vue CLI
vue-cli is a tool built by the Vue core team to help facilitate the rapid building and developing of Vue applications. The Vue command line interface allows us to get started right away without having us worry about all the steps needed to set up the different build tools in a module based Vue app.
Before use, the
@vue/cli package needs to be installed globally:
npm install -g @vue/cli
vue-cli is installed globally, a new Vue project can be created by running
vue create within a certain directory and specifying the name of the project we'd want to create. For this article, we’ll create a project with the name of
vue create default_project
When the vue create command is run; we’re provided with a prompt allowing us to select a default preset or manually pick series of features that we might find useful when building our Vue app (like TypeScript, PWA support, etc.).
We’ll select the default preset for this article. Once the selection is made, the Vue CLI will then begin to install all the necessary dependencies and create the project.
When complete, we’re provided with a new project directory that has a scaffold similar to this:
default_project/ README.md babel.config.js node_modules/ package.json public/ src/
Here’s a a quick walkthrough of some of the main files and folders that are scaffolded in a default Vue CLI project:
All extra information/run steps are listed in the
package.json file lists all the locally installed npm packages in our application for us to manage in addition to having some built-in scripts already created for us (e.g.
public/ folder contains the root markup page (
index.html) where our Vue application is to be mounted upon.
index.html is where we can also add additional webfonts, style tags, etc. that we might need in our app.
In addition to these files/folders, we would also see other files/directories for the extra build tools that we can set-up during a manual set-up (eg.
tsconfig.json file for the TypeScript compiler options).
vue-cli packaged app comes with a few built-in scripts it creates for us (which can be seen in the
package.json file). Once the setup of our newly created project is complete, we can navigate into the project (cd
default_project) and start our app using the
npm run serve command.
npm run serve
With the Webpack server running, we’re then able to view our app at http://localhost:8080/.
If we open up the project
src/ folder in the code editor of our choice, we’ll see a simple Vue app constructed with single-file components. The
src/App.vue file can be seen to be a basic Vue component that displays the Vue logo image and renders the
HelloWorld component created in the
The Vue CLI scaffolded project is hot-module reloaded which allows the application UI to automatically update when there’s a change (and save) in Vue code without the need to make a hard refresh.
How awesome is that! And when it comes to configuration, we’re able to continue configuring the build tools of our app as much as we want with no issues. There is no concept of ejecting.
Get started now
Join us on our 30-day journey in Vue. Join thousands of other professional Vue developers and learn one of the most powerful web application development frameworks available today.