有人能解释一下类星体组件应该如何使用吗？

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

您有关于类星体项目结构的信息here

如您所见，您需要的所有组件都保存在 templates 文件夹中。

router.js将根据您的需要。我建议你看看这个 tutorial on 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>

MODEL里面methods我有函数：

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

正如我所说，您还有其他需求，我认为这个示例不适用，但可以给您一个想法。

有人能解释一下类星体组件应该如何使用吗？

Could someone explain how quasar-components should be used?

quasar