Könnte jemand erklären, wie Quasar-Komponenten verwendet werden sollten?

Question

Ich bin neu im Quasar-Framework. Könnte jemand erklären, wie Quasar-Komponenten verwendet werden sollten?

1)Where should they be stored? 
2)What will be the folder structure if more components are used for a single app? 
3)How will be the router.js file be? 

Answer 1

Sie haben Informationen über die Struktur eines Quasars Projekt here

Wie Sie alle Komponenten, die Sie benötigen im templates Ordner gespeichert werden sehen können.

Die router.js wird nach Ihren Bedürfnissen sein. Ich empfehle, dass Sie sich diese tutorial auf Vue-Router, die sehr abgeschlossen ist, und wird Ihnen die Dinge klären.

Zum Beispiel können die Inhalte meiner router.js würde wie folgt aussehen:

import Vue from 'vue' 
import VueRouter from 'vue-router' 

Vue.use(VueRouter) 

function load (component) { 
    return() => System.import(`components/${component}.vue`) 
} 

const router = new VueRouter({ 
    routes: [ 
    { 
     path: '/', 
     component: load('Index') 
    }, // Default 
    { 
     path: '/login', 
     component: load('Login') 
    }, 
    { 
     path: '/home', 
     component: load('Home'), 
     meta: { 
     requiresAuth: true 
     } 
    }, 
    { 
     path: '/settings', 
     component: load('Settings') 
    }, 
    { 
     path: '/session', 
     component: load('Session'), 
     meta: { 
     requiresAuth: true 
     } 
    }, 
    { 
     path: '/node/:id', 
     component: load('Node'), 
     meta: { 
     requiresAuth: true 
     } 
    }, 
    { 
     path: '/admin/:action', 
     component: load('Admin'), 
     meta: { 
     requiresAuth: true 
     } 
    }, 
    { 
     path: '/template/:id', 
     component: load('Template'), 
     meta: { 
     requiresAuth: true 
     } 
    }, 
    { 
     path: '/output/:id', 
     component: load('Output'), 
     meta: { 
     requiresAuth: true 
     } 
    }, 
    { 
     path: '/form/:id', 
     component: load('Form'), 
     meta: { 
     requiresAuth: true 
     } 
    }, 
    { 
     path: '/file/:id', 
     component: load('File'), 
     meta: { 
     requiresAuth: true 
     } 
    }, 
    { 
     path: '*', 
     component: load('Error404') 
    } 
    ] 
}) 

export default router 

Dann in der component.vue ich auf eine andere Strecke navigieren:

HTML Innen <template>

<button v-if="session !== null" @click="goPath('/home')"><i>home</i></button> 

MODELL Innerhalb methods Ich habe die Funktion:

goPath (url) { 
     this.$router.push(url) 
    } 

Wie gesagt Sie andere Bedürfnisse haben, und ich glaube nicht, dieses Beispiel aber gilt Ihnen eine Vorstellung zu geben.