Setting Up Vue
Use create-vue (Vite-based) for new projects. It can enable Router, Pinia, and TypeScript.
Node.js and a package manager are required.
npm create vue@latest
cd <project>
npm install
npm run devOfficial scaffolder flow.
Vue Setup
Use create-vue (Vite-based) for new projects. It can enable Router, Pinia, and TypeScript. This lesson covers practical patterns, syntax, and mistakes to avoid.
Files
src/main.js, src/App.vue, vite.config.js- Prefer Vue 3 + Composition API.
- Use script setup for SFCs.
- Keep components focused.
- Lean on official docs.
Vue Setup Cheatsheet
Quick reference for patterns covered in this lesson.
| Item | Example | Purpose |
|---|---|---|
| create-vue | scaffold | Official |
| Vite | dev server | Fast |
| TS | optional | Types |
| Router | optional | SPA |
| Pinia | optional | State |
| ESLint | optional | Quality |
Entry
createApp(App).use(router).use(pinia).mount('#app').
Common Mistakes
- Hand-rolling Webpack for new apps.
- Skipping the official scaffold docs.
Key Takeaways
- Vue Setup is a core Vue skill.
- Practice in a Vite app.
- Prefer clarity.
- Revisit docs for edge cases.
Pro Tip
Enable TypeScript in the scaffolder if you already know JS.