Getting Started With Vue.js: The Vue CLI

Valerie Foster

Follow

Dec 4, 2020 · 5 min read

Over the past few weeks I have talked about Vue.js and some of the things it can do. But I only showed how use Vue in a basic project by adding a script to your HTML, and this is hard to scale up for large applications. That is where the Vue CLI come in. Using the CLI, you can relatively easily create a large single page application that uses Vue . That is what I will be talking about today.

I mentioned before that React.js was the first front-end framework I learned, and I am now very accustomed to using create-react-app whenever I want to start a new project with React. Create React App takes care of installing and configuring everything you need for a basic React application so you can immediately get started working on the code you want to create. Vue CLI is the equivalent way to scaffold large projects in Vue. But, make sure you already have a basic grasp of how Vue works, or everything the files the CLI gives you will go over your head.

To use the CLI, you first have to download it by running using whichever package manager you prefer:

// ♥ > npm install -g @vue/cli
# OR
// ♥ > yarn global add @vue/cli

Once it’s downloaded, to start a new project, you run one of these commands:

// ♥ > vue create <project-name>
# OR
// ♥ > vue ui

Using vue ui will open a browser window with a GUI to walk you through creating a project. I prefer using vue create, because you can go through the steps of creating the project from the command line. While the CLI goes through the process of creating the project, it will prompt you to choose a preset, either the default or you can manually select features, but unless you have something specific in mind that you’ll need for the project, you should just use the default.

Once the CLI is finished creating the project, it tells you that to get started you should navigate into the new project and run this command:

// ♥ > npm run serve

When you run the command and open the app at the location it tells you (probably http://localhost:8080/), you can see a webpage with the Vue logo and some links to resources about Vue. Going back to the project, you can see the way the files and folders are set up. Most of the work you will be doing is in the src folder. The structure in the src folder after you’ve just run the vue-cli command will look like this:

v src
  > assets
  > components
  - App.vue
  - main.js

We can see from here that there is a new type of file, with the .vue extension. These are called single-file components, and they basically act as Vue components defined by a file. Their format looks roughly like this:

<template>
  <!-- the html template for your component -->
</template><script>
// the JavaScript, like the data or props with a name
</script><style>
/* the css styling for the component */
</style>

With these single-file components, you get a few useful things. One is that the syntax highlighting is better than the highlighting you get when you use Vue.component. The file knows that it should treat the template like HTML for highlighting, the script like JavaScript, and the style like CSS. Another useful thing is that everything you need for each component is in one file, both the HTML and CSS, and the JavaScript. This way you know exactly where to write anything related to each component, and you know exactly where to look if you want to find anything related to the component.

Now, going back to the src folder, the App.vue file is the only .vue file at the top level of the folder because it will be the main, top level component for the application, while the components folder will have files with other components you will need. The App.vue file looks like this at the start:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template><script>
import HelloWorld from './components/HelloWorld.vue'export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script><style>
/* some css styling */
</style>

To break this down a bit, you can see that the script tag has an export statement with the name on the component, which should match the name of the file. It also has a place to list all the other components you will use in the App component, in this case just HelloWorld, and you access these components by importing them from other files. If you look at the top of the script tag, you can see there is an import statement for a component called HelloWorld in the components folder. If you look in the components folder, you’ll see there is one file there, HelloWorld.vue, the only other component file the Vue CLI gives you. That file looks something like this:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <!-- lots of links to Vue resources -->
  </div>
</template><script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script><style>
/* some css styling */
</style>

In this file we start seeing some things that should be familiar from learning the basics of Vue. In the script tag we see a key for all the props that the HelloWorld component needs. In the template tag, you can see the msg prop used in the h1 tag. If you look back in App.vue’s template you can see that the HelloWord component is directly passed the msg prop the way we are used to seeing props used. So from the two files that the Vue CLI gives you, you can get a pretty good idea of what is going on in these single-file components and how to use them.

One thing that we are used to from basic Vue that this doesn’t show you though, is how to use the data part of the component. Similar to the way you use data with regular components, you have to have a function that returns an object instead of just defining a data object, like so:

// in App.vue's script tag
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data () {
    return {
      msg: "Welcome to Your Vue.js App"
    }
  }
}

And from this you should be able to figure out how to use the basics of Vue you learned by using a small project. Starting a project with vue-cli isn’t too different or difficult to figure out, especially if you have some prior experience using a different front-end framework.

With this blog post I think I’ve covered most everything I can about getting started with Vue.js. I’ve talked about the Vue instance and how it keeps track of the data you need, Vue’s directives and how they can be used to make you webpages more interactive to your data, and now I’ve talked about how to use Vue in both a simple project and one started using the Vue CLI. With all of my blogposts over the past few weeks, I have now talked about everything I plan on covering about Vue.js. I hope these posts have convinced you that starting to work on projects using Vue is not too high a hurdle to overcome.