🔷 Quasar Lesson 01 — Setup & CLI

1. Quasar ဆိုတာ ဘာလဲ?

2. Prerequisites — ကြိုတင်လိုအပ်တာ

# Node.js version စစ်
node --version    # v18+ လိုတယ်
npm --version     # v8+ လိုတယ်

# Node.js မရှိရင် nodejs.org မှာ download
# Vue.js basic နားလည်ဖို့ လိုတယ်

3. Quasar CLI Install

# Global install (တစ်ကြိမ်ပဲ လုပ်ရတယ်)
npm install -g @quasar/cli

# Install ပြီးရင် စစ်
quasar --version
# 2.x.x ပြမယ်

4. Project Create လုပ်နည်း

# New project ဆောက်
npm init quasar

# သို့မဟုတ်
quasar create my-app

Setup wizard မှာ ရွေးရမယ်:

5. Project Run လုပ်နည်း

# Project folder ဝင်
cd my-app

# Dependencies install
npm install

# Development server start
quasar dev
# Browser မှာ http://localhost:9000 ဖွင့်မယ်

# Production build
quasar build

6. Folder Structure

my-app/
├── src/
│   ├── assets/          # Images, fonts
│   ├── boot/            # App startup files (axios, i18n)
│   ├── components/      # Reusable components (.vue)
│   ├── css/             # Global styles
│   ├── layouts/         # Page layouts (MainLayout.vue)
│   ├── pages/           # Route pages (IndexPage.vue)
│   ├── router/          # Vue Router config
│   └── App.vue          # Root component
├── public/              # Static files
├── quasar.config.js     # Quasar configuration
└── package.json

7. quasar.config.js — Key Settings

export default defineConfig((ctx) => ({
  framework: {
    config: {
      brand: {
        primary: '#1976D2',    // main color
        secondary: '#26A69A',
        accent: '#9C27B0'
      }
    },
    // Auto-import components (no need to import manually)
    components: [],
    directives: [],
    plugins: ['Notify', 'Dialog', 'Loading']
  },
  build: {
    vueRouterMode: 'history'
  }
}))