create-vue — Your First Project
You want to build Shelf, a small app that tracks the books you are reading. Before writing a single component you need a folder with Vue installed, a dev server that reloads as you type, and a build step for later. Setting that up by hand takes an afternoon. One command does it in a minute.
The rule
One command scaffolds;
main.jsmountsApponto#app.
create-vue is Vue's official project starter. You run it through npm:
npm create vue@latestIt asks for a project name (we type shelf) and then a short list of yes or no questions: TypeScript? Vue Router? Pinia for shared state? A testing tool? Answer "No" to all of them for now; each one only adds files you can add later. Then:
cd shelf
npm install
npm run devnpm install downloads Vue and Vite, the build tool create-vue sets up for you. npm run dev starts Vite's development server and prints a local address, usually http://localhost:5173. Open it and the starter page appears. Save a file and the page updates at once.
Three files explain how the page gets there:
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')index.htmlis the one real HTML page. It holds an empty<div id="app"></div>and loadssrc/main.js.src/main.jscreates the Vue application from the root component and mounts it on that div.src/App.vueis the root component: everything else in Shelf will live inside it.
The shortcut
When a Vue project confuses you, trace it from the outside in: page → script → root component. Every Vue app, however large, starts with that chain.
Vite serves the page
The browser asks for
index.html. It contains an emptydivwithid="app"and a script tag pointing atsrc/main.js.
A common beginner mistake is to open index.html directly from the file explorer. Nothing appears, because .vue files are not something a browser understands; Vite has to compile them. Always go through npm run dev.
Drills
Answer fast — trust the rule.
Which command starts a new Vue 3 project with the official scaffolding tool?
Which build tool does a create-vue project use for its dev server?
What does createApp(App).mount('#app') do?
You double-click index.html and see a blank page. What is the likely cause?
Remember
npm create vue@latest, thennpm installandnpm run dev, gives you a running project on Vite.- Shortcut: trace index.html → main.js → App.vue;
createApp(App).mount('#app')joins them. - Trap: opening
index.htmldirectly. Vue files need Vite to compile them.