npm init quasar
Majd a Node csomagok telepítése:
Install project dependencies? (recommended) » Yes, use npm
.vscode/extensions.json állományból:
- "editorconfig.editorconfig", (és a .editorconfig állomány a projekt root-ból)
- "wayou.vscode-todo-highlight"
A .vscode mappába a következő tartalommal:
{
// .vscode/tasks.json
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "dev",
"group": {
"kind": "build",
"isDefault": true
}
},
{
"type": "npm",
"script": "test",
"group": {
"kind": "test",
"isDefault": true
}
}
]
}
Ez után a projekt a Ctrl-Shift-B billentyű-kombinációval is futtatható, vagy:
npm run dev
Javasolt bővítmények:
- TypeScript Vue Plugin (Volar)
- GitLens — Git supercharged
- Markdown All in One
- Quasar Docs
- vscode-pdf
- Git Branch Warnings
Beállítások a .vscode/settings.json állományba:
"editor.mouseWheelZoom": true,
"editor.wordWrap": "on",
"editor.minimap.enabled": false,
"files.autoSave": "afterDelay",
"git.enableSmartCommit": true,
"git.confirmSync": false,
"git.autofetch": true,
"git.autofetchPeriod": 60,
"prettier.printWidth": 120,
.prettierrc állományban:
"singleQuote": false,
.eslintrc.cjs állományban:
quotes: ["warn", "double", { avoidEscape: true }],
majd:
npm run format
A launch.json állomány létrehozása a .vscode mappába a következő tartalommal:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "msedge",
"request": "launch",
"name": "Quasar App: Edge",
"url": "http://localhost:9000",
// To properly reflect changes after HMR with Vite
"enableContentValidation": false,
"webRoot": "${workspaceFolder}/src",
// No need to configure sourcemap explicitly for vite.
"sourceMapPathOverrides": {
"webpack://package-name/./src/*": "${webRoot}/*"
},
"skipFiles": [
"${workspaceFolder}/node_modules/**/*"
]
},
{
"type": "chrome",
"request": "launch",
"name": "Quasar App: Chrome",
"url": "http://localhost:9000",
// To properly reflect changes after HMR with Vite
"enableContentValidation": false,
"webRoot": "${workspaceFolder}/src",
// No need to configure sourcemap explicitly for vite.
"sourceMapPathOverrides": {
"webpack://package-name/./src/*": "${webRoot}/*"
},
"skipFiles": [
"${workspaceFolder}/node_modules/**/*"
]
}
]
}
- Indítsad el a fordítást a Ctrl-Shift-B-vel, vagy az "npm run dev" paranccsal
- Zárjad be a megjelenő böngészőablakot (ha megjelenik)
- Indítsad el az alkalmazást debug-módban az F5-el
- A forrás megnyitása után helyezz el a vizsgálni kívánt kódsorok elé töréspontokat (piros pontok)
- Navigálj úgy az alkalmazásban, hogy a kódsorok végrehajtásra kerüljenek
- Vizsgáld a változók tartalmát, figyeld/folytasd a programsorok végrehajtását (F10, F11, F5)
A quasar.config.js állományt kell bővíteni:
framework: {
config: {},
// ...
// Quasar plugins
plugins: ["Notify", "Dialog", "Loading", "LocalStorage"],
},
Néhány példa használatukra (Loading, Notify) az ExampleComponent.vue állományban.