quasar - 有人可以解释应该如何使用类星体组件吗？

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 的教程，它非常完整，会为你澄清一些事情。

例如，my 的内容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)
    }

正如我所说，你会有其他需求，我认为这个例子并不适用，而是给你一个想法。