Create a project using Vue.js: Beginners Guide

Learn to build an application using Vue.js with CLI in easy steps. Follow the steps to create a basic Vuejs app without hustle. 

Prerequisites

Install Node.js on Windows. It will allow you to install Vue.js by using Node Package Manager (npm).

Install Vue.js

In order to install Vue.js on your system:

Open the command prompt

Create a project folder: mkdir VueProjects and now enter that directory: cd VueProjects

Use Node Package Manager (npm) and install Vue.js. 

PowerShell

npm install vue

Note: Use the command vue --version and check the version of Vue.js before installing it.

Install Vue CLI

Vue CLI is a tool in the Vue command line/ terminal that helps you to create an interactive project. It allows you to quickly scaffold a new Vuejs project, manage a project using Vue UI, or prototype brand-new ideas 

Use npm to install Vue CLI. You need to use the -g flag to install globally and upgrade (vue upgrade --next): 

PowerShell

npm install -g @vue/cli

Step 1: Create a project

In order to create a new project, run the below command

vue create hello-world

Note: In case you use Git Bash with minTTY on Windows, the above command might not work. You need to enter a command winpty vue.cmd create hello-world. If you still want to use the above command, then you can alias the syntax by adding the below line to your ~/.bashrc file. Use alias vue='winpty vue.cmd' and restart your Git Bash terminal session to update bashrc file. 

You will be required to select a preset. Either select the default preset that comes along with a Babel + ESLint, or choose “Manually selected features” and you can easily pick features that you need. 

                                          Source: Vue CLI

To quickly prototype your new project, use the default setup. The manual setup provides more features and functions that allow you to create more productive-oriented projects.  

                                           Source: Vue CLI

Save the manually selected features so that you can reuse them in the future. We have included presets and plugins in our separate blog. 

The vue create command has a lot of options and you can easily explore them by running the following command. 

vue create --help

Usage: create [options] <app-name> create a new project powered by vue-cli-service Options:   -p, --preset <presetName>       Skip prompts and use saved or remote preset   -d, --default                   Skip prompts and use default preset   -i, --inlinePreset <json>       Skip prompts and use inline JSON string as preset   -m, --packageManager <command>  Use specified npm client when installing dependencies   -r, --registry <url>            Use specified npm registry when installing dependencies   -g, --git [message|false]       Force / skip git initialization, optionally specify initial commit message   -n, --no-git                    Skip git initialization   -f, --force                     Overwrite target directory if it exists   --merge                         Merge target directory if it exists   -c, --clone                     Use git clone when fetching remote preset   -x, --proxy                     Use specified proxy when creating project   -b, --bare                      Scaffold project without beginner instructions   --skipGetStarted                Skip displaying "Get started" instructions   -h, --help                      Output usage information

Step 2: Use the GUI

You can create and maintain Vuejs projects with the help of a graphical interface with the vue ui command:

vue ui

This command will allow you to open a browser window wih GUI that help you with the project creation process. 

                                                Source: Vue CLI

Step 3: Pulling 2.x Templates (Legacy)

The command Vue CLI >= 3 uses the same vue binary, and that’s how it overwrites Vue CLI 2 (vue-cli). In case you still want a legacy vue init functionality, install global bridge:

npm install -g @vue/cli-init # vue init now works exactly the same as vue-cli@2.x vue init webpack my-project

This Vuejs example will help you create an interactive application. Our CLI Service integration will help you create an app with CLI.