Building a Vue app? Start with a template!

Installation

First, we need to install vue-cli, the Command Line Interface that will help you scaffold a web app with all the necessary tools needed in a robust and modern web app.

You can install vue-cli globally with NPM:

npm install -g vue-cli

To generate your project, you will then run the following command:

vue init <template> <name>

With template, the name of the <template> you want to use and <name> the name of your project.

Templates are defined on vueJS templates github.

You have the choice between for example webpack or another module bundler like browserify, or you can choose to use pwa to build a progressive web app or something more simple with the simple template.

Depending on the chosen template, you will have different yes / no question to customize your app.

Let’s run the command with the webpack template:

vue init webpack my-vue-app

You will be asked basic questions about the project name (that you already set by using the command), a description, the author (should already be set to your email address).

The interesting question is wether to install Vue-Router or not:

? Install vue-router? (Y/n)

If you want to build an app with many components, it would be good for you to answer yes to navigate between views.

? Use ESLint to lint your code? (Y/n)

ESLint will help you keep your code clean and less prone to errors.

❯ Standard (https://github.com/standard/standard)
  Airbnb (https://github.com/airbnb/javascript)
  none (configure it yourself)

You have the choice between 2 standards or you can build your configuration. Choose whatever suits you. With ESLint, you will see warnings if you don’t follow your standards.

You have your project ready now, let’s take a look at the folder structure.

Folder structure

These are the most important files and folders to us:

• /src/main.js - Application entry point.
• /src/App.vue - Base component
• /router/index.js - Application routes (if you chose Y to router)
• /src/components - All our components go here
• /src/assets - All our image assets go here. They won’t be processed by webpack
• /config/index.js - Application configuration information
• /build - Build configuration information for both the development server and the production webpack build.
• /test/unit- Unit test related files (if you chose Y to unit test)
• /test/e2e- e2e test related files (if you chose Y to e2e)
• package.json- All your dependencies and build commands

You’re good to go, just type npm run dev to launch your app.

Summary

We manage to quickly scaffold a Vue App with routing. Our code should be well formatted with ESLint. It’s a great start.

Happy building!

I’m building a Vue ebook with lot of tips! Subscribe here!