Installing Vue Cli

Posted on  by admin
-->

A guide to help you set up a Vue.js development environment on Windows. Learn more on the Vue.js overview page.

Vue can be installed directly on Windows or on the Windows Subsystem for Linux (WSL). We generally recommend that you install Vue on WSL if you are planning to interact with a NodeJS backend, want parity with a Linux production server, or plan to follow along with a tutorial that utilizes Bash commands. For more info, see Should I install on Windows or Windows Subsystem for Linux?.

Prerequisites

  • The following instruction will walk how to install Vue CLI, launch Vue CLI UI and create a project with custom dependencies. To install Vue CLI, enter the following command into the terminal window:.

Install Vue.js

To install Vue.js:

  1. Once the installation is complete, you can check the installation with the following command:.

  2. The Vue CLI GUI is a Graphical User Interface (GUI) for creating and managing Vue CLI projects and runs completely in the browser.

  3. To launch the Vue CLI GUI enter the following command into the terminal window:.

Check the version number you have installed by using the command: vue --version.

The terminal window that launches Vue CLI GUI must remain open while in use.

Once the Vue CLI GUI, your browser should automatically open to page like this:. From the Vue Project Manager of Vue CLI GUI, click on the Create in the navbar.

Install Vue CLI

Vue CLI is a toolkit for working with Vue in your terminal / command line. It enables you to quickly scaffold a new project (vue create), prototype new ideas (vue serve), or manage projects using a graphical user interface (vue ui). Vue CLI is a globally installed npm package that handles some of the build complexities (like using Babel or Webpack) for you. If you are not building a new single-page app, you may not need or want Vue CLI.

To install Vue CLI, use npm. You must use the -g flag to globally install in order to upgrade (vue upgrade --next):

To learn more about additional plugins that can be added (such as linting or Apollo for integrating GraphQL), visit Vue CLI plugins in the Vue CLI docs.

Additional resources

  • From here you see the current file directory of your computer, navigation to the directory you wish to create a new project and then click on the Create a new project here button.
  • You should be now see the Create a new project page.