Now that you know what Vue is, it's time to run it. This module shows the two ways to get started: dropping Vue into a page from a CDN with a single script tag, and scaffolding a full project with a command-line tool.
You will build a small app straight from the CDN, then create a project, start the dev server, clean out the boilerplate, and learn what each file and folder is for, including .vue single-file components.
Note that the project-setup lessons use the Vue CLI. For new
projects, the Vue team now recommends create-vue
(npm create vue@latest), which is built on Vite. The folder structure
and the single-file components work the same way, so what you learn here carries over.
Watch the lessons in order, then continue on to Template Syntax & Directives.
The "Vue 3 Setup" section of freeCodeCamp's Vue 3 course: getting Vue running in a plain HTML page.
Brad Traversy builds a small random user generator using Vue loaded from a CDN, a quick way to see Vue working before any tooling.
Creating a new Vue project from the command line with the Vue CLI.
Running the dev server, looking at the generated files, and removing the boilerplate so you can start from a clean project.
The "Vue CLI" section of freeCodeCamp's Vue 3 course: scaffolding a project with the CLI and moving beyond the CDN.
A tour of the folders and files in a Vue project, and where each part of your app lives.