如何在全球范围内加载 quasar 框架答案

【问题标题】：How to load quasar framework Globally如何在全球范围内加载 quasar 框架
【发布时间】：2018-03-22 23:06:08
【问题描述】：

我是 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>

【问题讨论】：

标签： javascript vue.js quasar-framework

【解决方案1】：

每当您使用任何 Quasar 元素（例如 q-btn、q-select）时，您都需要在 .vue 文件中导入和导出它。

例如，要显示 <q-btn>，您可以使用 <q-btn > Confirm </q-btn> 但要显示它，您需要在 .vue 文件中包含以下内容。喜欢：

import {
     QSelect,
     QBtn
   } from 'quasar'
export {
     QSelect,
     QBtn
   } from 'quasar'

这样，您将注册所有组件。

【讨论】：

【解决方案2】：

在我的项目中，我导入并使用这样的组件

import Quasar, { QBtn, QSelect } from 'quasar-framewok';

Vue.use(Quasar, {
    components: { QBtn, QSelect }
});

仅用于测试用例全部导入

import Quasar, * as All from 'quasar';

Vue.use(Quasar, {
    components: All,
    directives: All
});

见Quasar docs

【讨论】：