Running and building a Vue app

Introduction

Running a Vue app lets you see your work in a browser while building prepares your app for sharing with others.

You want to test your Vue app on your computer during development.

You need to create a version of your app that loads fast on the internet.

You want to check how your app looks and works on different devices.

You are ready to share your app with friends or users online.

Syntax

Vue

npm run dev
npm run build
npm run preview

npm run dev starts a local server to run your app during development.

npm run build creates optimized files for production use.

npm run preview starts a local server to preview the built app.

Examples

This command runs your Vue app locally so you can see changes live.

Vue

npm run dev

This command prepares your app files for fast loading on the web.

Vue

npm run build

This command lets you preview the built app locally before sharing.

Vue

npm run preview

Sample Program

This example shows the commands you type to run and build your Vue app step-by-step.

Vue

/* Steps to run and build a Vue app */

// 1. Open terminal in your Vue project folder
// 2. Run the development server:
npm run dev

// 3. After finishing development, build the app:
npm run build

// 4. Preview the built app locally:
npm run preview

Important Notes

Make sure you have Node.js and npm installed before running these commands.

Use a modern browser to open the local URL shown after running npm run dev.

The dist folder contains your built app ready to upload to a web server.

Summary

Use npm run dev to run your Vue app locally during development.

Use npm run build to create optimized files for production.

Use npm run preview to check the built app before sharing.