Menu
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Vue Tutorial

Vue HOME Vue Intro Vue Directives Vue v-bind Vue v-if Vue v-show Vue v-for Vue Events Vue v-on Vue Methods Vue Event Modifiers Vue Forms Vue v-model Vue CSS Binding Vue Computed Properties Vue Watchers Vue Templates

Scaling Up

Vue Why, How and Setup Vue First SFC Page Vue Components Vue Props Vue v-for Components Vue $emit() Vue Fallthrough Attributes Vue Scoped Styling Vue Local Components Vue Slots Vue v-slot Vue Scoped Slots Vue Dynamic Components Vue Teleport Vue HTTP Request Vue Template Refs Vue Lifecycle Hooks Vue Provide/Inject Vue Routing Vue Form Inputs Vue Animations Vue Animations with v-for Vue Build Vue Composition API

Vue Reference

Vue Built-in Attributes Vue Built-in Components Vue Built-in Elements Vue Component Instance Vue Directives Vue Instance Options Vue Lifecycle Hooks

Vue Examples

Vue Examples Vue Exercises Vue Quiz Vue Server Vue Certificate

Build Your Project

When a Vue project is finished, it should move from being in "development mode" into "build" mode.

The build command compiles our Vue project into .html, .js and .css files that are optimized to run directly in the browser.

We build our Vue project to create files on a server for others to access.

To 'Build' The Web Page

So far in this tutorial we have had our projects running in development mode, meaning that the Vite build tool is running a development server. When you make changes during development and save them, Vite will update the page instantly. This requires a lot of resources from the computer.

The build step comes after the development phase, when the page is ready to go public. We then have to build our project into files the browser understands without running Vite in development mode. The build step is done to minimize server resource usage and improve performance.

To build your Vue application, stop the development server if it is running, by pressing 'Q' or 'ctrl'+'C', then write:

npm run build

When your project is built, Vite creates a folder dist with all the files needed to run your project on a public server, with files the browser understands *.html, *.css and *.js instead of the *.vue files we use during development.

To see your built project in the browser, use the commando:

npm run preview

This commando should open a browser window that displays the built project from the dist folder.


Vue Exercises

Test Yourself With Exercises

Exercise:

The  command compiles our Vue project 
into .html, .js and .css files that are 
optimized to run directly in the .

Start the Exercise