我是Quasar框架的新手。有人可以解释如何在全球范围内加载quasar组件。 （我的申请中的每个地方）
我的main.js就像：
import Vue from 'vue'
import Quasar from 'quasar'
import router from './router'
require(`quasar/dist/quasar.${__THEME}.css`)
Vue.config.productionTip = false
Vue.use(Quasar) // Install Quasar Framework
if (__THEME === 'mat') {
require('quasar-extras/roboto-font')
}
import 'quasar-extras/material-icons'
// import 'quasar-extras/ionicons'
// import 'quasar-extras/fontawesome'
// import 'quasar-extras/animate'
Quasar.start(() => {
/* eslint-disable no-new */
new Vue({
el: '#q-app',
router,
render: h => h(require('./App').default)
})
})
Unknown custom element: <q-btn> - did you register the component correctly?
For recursive components, make sure to provide the "name" option.
found in
---> <App> at src\App.vue
<Root>
答案 0 :(得分：3)
每当您使用任何Quasar元素（例如.q-btn，q-select）时，您需要在.vue文件中导入和导出它。
例如，要显示Toplevel，您可以使用
close()
但要显示它，您需要在.vue文件中包含以下内容。像：
<q-btn>像这样，您将注册所有组件。
答案 1 :(得分：1)
在我的项目中，我使用这样的组件导入和使用
BoxLayout:
orientation: 'vertical'
#spacing : 10
BoxLayout:
#spacing : 10
canvas.before:
Rectangle:
pos: self.pos
size: self.size
#Color:
#rgb: (70,70,70)
size_hint_y:1
Button:
canvas:
Color:
rgb: 0,0,0
Line:
points: self.pos[0] + self.size[0], self.pos[1], self.pos[0] + self.size[0], self.pos[1] + self.size[1]
width: 1.5
spacing : 10
text: 'test1'
size : (60,30)
size_hint : (None, None)
background_normal: ''
background_color: 90 , 90, 90, 90
color: 0, 0.517, 0.705, 1
Button:
canvas:
Color:
rgb: 0,0,0
Line:
points: self.pos[0] + self.size[0], self.pos[1], self.pos[0] + self.size[0], self.pos[1] + self.size[1]
width: 1.5
text: 'test2'
size: (60, 30)
size_hint: (None, None)
background_color: 90 , 90, 90, 90
background_normal: ''
color: 0, 0.517, 0.705, 1
Button:
id: btn
text: 'test3'
size: (60, 30)
size_hint: (None, None)
on_release: dropdown.open(self)
#size_hint_y: None
#height: '40dp'
background_normal: ''
background_color: 90 , 90, 90, 90
color: 0, 0.517, 0.705, 1
CustDrop:
auto_width: False
size_hint_x: None
width: '250dp'
id: dropdown
BoxLayout:
size_hint_y: None
height: '30dp'
Button:
text: 'Sub menu1 Test3'
size_hint_x: None
width: '125dp'
#on_release: dropdown.select('')
on_release: app.root.test
background_color: 90 , 90, 90, 90
color: 0, 0.517, 0.705, 1
Button:
background_color: 0,0,0,0
width: '125dp'
BoxLayout:
size_hint_y: None
height: '30dp'
Button:
text: 'Sub menu2 Test3'
size_hint_x: None
width: '125dp'
on_release: dropdown.select('')
background_color: 90 , 90, 90, 90
color: 0, 0.517, 0.705, 1
Button:
background_color: 0,0,0,0
width: '125dp'
BoxLayout:
size_hint_y: None
height: '30dp'
Button:
text: 'Sub menu3 Test3'
size_hint_x: None
width: '125dp'
on_release: dropdown.select('')
background_color: 90 , 90, 90, 90
color: 0, 0.517, 0.705, 1
Button:
background_color: 0,0,0,0
width: '125dp'
BoxLayout:
size_hint_y: None
height: '30dp'
Button:
text: 'Fourth'
size_hint_x: None
width: '125dp'
on_release: dropdown2.open(d2)
background_color: 90 , 90, 90, 90
color: 0, 0.517, 0.705, 1
Button:
id: d2
background_color: 0,0,0,0
size_hint_x: None
width: self.parent.width/2.0
CustDrop:
auto_width: False
size_hint_x: None
width: '125dp'
id: dropdown2
Button:
text: 'Sub menu1 Test3'
size_hint_y: None
height: '30dp'
#on_release: dropdown2.select('')
on_release: app.root.test
background_color: 90 , 90, 90, 90
color: 0, 0.517, 0.705, 1
Button:
text: 'Sub menu2 Test3'
size_hint_y: None
height: '30dp'
on_release: dropdown2.select('')
background_color: 90 , 90, 90, 90
color: 0, 0.517, 0.705, 1
Button:
text: 'Sub menu3 Test3'
size_hint_y: None
height: '30dp'
on_release: dropdown2.select('')
background_color: 90 , 90, 90, 90
color: 0, 0.517, 0.705, 1
BoxLayout:
spacing: 0,0
canvas.before:
Rectangle:
pos: self.pos
size: self.size
Color:
rgb: (1,1,1)
AsyncImage
source: '2.jpg'
AsyncImage
source: '4.jpg'
AsyncImage
source: '2.jpg'
Label:
size_hint_x: 22
Label:
size_hint_y: 18
import Quasar, { QBtn, QSelect } from 'quasar-framewok';
Vue.use(Quasar, {
components: { QBtn, QSelect }
});
请参阅Quasar docs