Может ли кто-нибудь объяснить, как следует использовать квазар-компоненты?

Question

Я новичок в рамках Quasar. Может кто-нибудь объяснить, как следует использовать квазар-компоненты?

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

У вас есть информация о структуре квазар-проекта здесь

Как видите, все необходимые компоненты сохранены в templates папка.

router.js будет в соответствии с вашими потребностями. Я рекомендую вам взглянуть на этот учебник по vue-router, который очень полон и прояснит вам кое-что.

Например, содержимое моего router.js будет следующим:

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

Тогда в component.vue Я перехожу на другой маршрут:

HTML внутри <template>

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

МОДЕЛЬ Внутри methods У меня есть функция:

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

Как я уже сказал, у вас будут другие потребности, и я не думаю, что этот пример применим, но чтобы дать вам идею.