Cody Uhi
CodeUhi

CodeUhi

Creating Your First Vue App

Creating Your First Vue App

Cody Uhi's photo
Cody Uhi
·Nov 5, 2021·

2 min read

Creating Your First Vue App

Intro

VueJS is a JavaScript Framework that allows developers to more easily build user interfaces through JavaScript. I like Vue because it is easier to use when I want to make dynamic and interactive web pages.

Create an app with 3 commands

If you have a Node package manager installed globally (i.e. - NPM or Yarn), you can create your first Vue App in as little as three terminal commands. I will show the process using Yarn:

  1. Install the @vue/cli package globally:
    yarn global add @vue/cli
    
  2. Create the Vue app and cd into the app's root directory (you can change your app's name by replacing app with your desired name):
    vue create app && cd app
    
  3. Serve the Vue app using the Vue CLI:
    yarn serve
    

You should see some terminal output that looks like this:

 DONE  Compiled successfully in 4359ms                                       8:31:51 PM


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://<YOUR_LOCAL_IP_ADDRESS>:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

And if you go to localhost:8080 in your browser, you should see a webpage that looks like this:

Screenshot of Default Vue Webpage

Outtro

Congratulations on building your first Vue app! Follow for more content about changing your Vue page to make it the way you want it.

 
Share this