Javascript 为什么应用程序实例在导入命令中为空？

我尝试添加到vuejs3中，因为我不需要任何页面上的选项卡 为了仅在1页上引用它并从src/main.js导入应用程序，我得到了一个错误，应用程序实例为null。 I在src/views/test.vue中：

<template>
  <div>
    
    stringVar:{{ stringVar}}
    <h3>Basic Example</h3>
    <tabs
      v-model="selectedTab"
    >
      <tab
        class="tab"
        v-for="(tab, i) in tabs"
        :key="`t${i}`"
        :val="tab"
        :label="tab"
        :indicator="true"
      />
    </tabs>
    <tab-panels
      v-model="selectedTab"
      :animate="true"
    >
      <tab-panel
        v-for="(tab, i) in tabs"
        :key="`tp${i}`"
        :val="tab"
      >
        {{ tab }}
      </tab-panel>
    </tab-panels>
  </div>
</template>

<script>
  import { ref, onMounted, reactive } from 'vue'

  import { Tabs, Tab, TabPanels, TabPanel } from 'vue3-tabs'
  import app from '@/main.js'

  console.log('src/views/test.vue app::')
  console.log(app) // In console I see that this var is empty

  app.use(Tabs)

  export default {
    name: 'testTrePage',
    components: {
      Tabs,
      Tab,
      TabPanels,
      TabPanel
    },
    setup() {
      let stringVar = ref('Init value')
      const tabs = ['A', 'B', 'C']
      const state = reactive({
        selectedTab: tabs[1]
      })

      const testInit = async () => {
      }

      onMounted(testInit)

      return {
        stringVar,
        tabs,
      }
    } // setup() {

  }
</script>

<template>
  <div>
    
    selectedTab:{{ selectedTab}}<br>
    stringVar:{{ stringVar}}<br>
    tabs:{{ tabs}}
    <h3>Basic Example</h3>
    <tabs
      v-model="selectedTab"
    >
      <tab
        class="tab"
        v-for="(tab, i) in tabs"
        :key="`t${i}`"
        :val="tab"
        :label="tab"
        :indicator="true"
      />
    </tabs>
    <tab-panels
      v-model="selectedTab"
      :animate="true"
    >
      <tab-panel
        v-for="(tab, i) in tabs"
        :key="`tp${i}`"
        :val="tab"
      >
        {{ tab }}
      </tab-panel>
    </tab-panels>
  </div>
</template>

<script>
  import { ref, onMounted, reactive } from 'vue'

  import { Tabs, Tab, TabPanels, TabPanel } from 'vue3-tabs'
  export default {
    name: 'testTrePage',
    components: {
      Tabs,
      Tab,
      TabPanels,
      TabPanel
    },
    setup () {
      let stringVar = ref('Init value')
      const tabs = ['A', 'B', 'C']
      const selectedTab = ref(2)
      const state = reactive({
        selectedTab: tabs[1]
      })

      const testOnMounted = async () => {
        console.log('testOnMounted!!!::')
      }

      onMounted(testOnMounted)

      return {
        stringVar,
        tabs,
        selectedTab
        // ...toRefs(state)
      }
    } // setup() {

  }
</script>

在src/main.js中，我有：

import { createApp } from 'vue'
import { createStore } from 'vuex'
import axios from 'axios'
import store from './store' // src/store/index.js

import App from './App.vue'
import router from './router/router.js'

import DKToast from 'vue-dk-toast'
import mitt from 'mitt'

import 'bootstrap'
import 'font-awesome/css/font-awesome.css'

axios.defaults.crossDomain = true

const app = createApp(App)
const emitter = mitt()
app.config.globalProperties.$emitter = emitter

app.use(store)
app.config.globalProperties.$store = store

app.use(router)
app.config.globalProperties.$router = router

app.use(DKToast, {
  duration: 5000,
  positionY: 'top', // 'top' or 'bottom'
  positionX: 'right' // 'right' or 'left'
})
export default app.config.globalProperties
app.config.globalProperties.toast = DKToast

const rootInstance = app.mount('#app')

我使用建筑：

import app from '@/main.js'

当我需要使用一些外部组件时，它工作正常

但是为什么它不能在src/views/test.vue中使用制表符呢

package.json：

{
  "name": "yt3",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.20.0-0",
    "bootstrap": "^4.3.1",
    "core-js": "^3.6.5",
    "font-awesome": "^4.7.0",
    "jquery": "^3.4.1",
    "mitt": "^2.1.0",
    "moment-timezone": "^0.5.31",
    "node-sass": "^4.12.0",
    "popper.js": "^1.16.0",
    "sass-loader": "^10.0.4",
    "vee-validate": "^4.0.0-beta.18",
    "vue": "^3.0.0",
    "vue-dk-toast": "^1.1.4",
    "vue-router": "^4.0.0-rc.1",
    "vue-select": "^3.10.8",
    "vue3-tabs": "^0.1.4",
    "vuex": "^4.0.0-rc.1",
    "yup": "^0.29.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^7.0.0-0"
  }
}

修改的块： 我进入src/main.js行：

import { Tabs, Tab, TabPanels, TabPanel } from 'vue3-tabs'

...

app.use(Tabs)
app.use(Tab)
app.use(TabPanels)
app.use(TabPanel)

export default app.config.globalProperties
app.config.globalProperties.toast = DKToast

app.mount('#app')

在src/views/test.vue中：

<template>
  <div>
    
    stringVar:{{ stringVar}}
    <h3>Basic Example</h3>
    <tabs
      v-model="selectedTab"
    >
      <tab
        class="tab"
        v-for="(tab, i) in tabs"
        :key="`t${i}`"
        :val="tab"
        :label="tab"
        :indicator="true"
      />
    </tabs>
    <tab-panels
      v-model="selectedTab"
      :animate="true"
    >
      <tab-panel
        v-for="(tab, i) in tabs"
        :key="`tp${i}`"
        :val="tab"
      >
        {{ tab }}
      </tab-panel>
    </tab-panels>
  </div>
</template>

<script>
  import { ref, onMounted, reactive } from 'vue'

  import { Tabs, Tab, TabPanels, TabPanel } from 'vue3-tabs'
  import app from '@/main.js'

  console.log('src/views/test.vue app::')
  console.log(app) // In console I see that this var is empty

  app.use(Tabs)

  export default {
    name: 'testTrePage',
    components: {
      Tabs,
      Tab,
      TabPanels,
      TabPanel
    },
    setup() {
      let stringVar = ref('Init value')
      const tabs = ['A', 'B', 'C']
      const state = reactive({
        selectedTab: tabs[1]
      })

      const testInit = async () => {
      }

      onMounted(testInit)

      return {
        stringVar,
        tabs,
      }
    } // setup() {

  }
</script>

<template>
  <div>
    
    selectedTab:{{ selectedTab}}<br>
    stringVar:{{ stringVar}}<br>
    tabs:{{ tabs}}
    <h3>Basic Example</h3>
    <tabs
      v-model="selectedTab"
    >
      <tab
        class="tab"
        v-for="(tab, i) in tabs"
        :key="`t${i}`"
        :val="tab"
        :label="tab"
        :indicator="true"
      />
    </tabs>
    <tab-panels
      v-model="selectedTab"
      :animate="true"
    >
      <tab-panel
        v-for="(tab, i) in tabs"
        :key="`tp${i}`"
        :val="tab"
      >
        {{ tab }}
      </tab-panel>
    </tab-panels>
  </div>
</template>

<script>
  import { ref, onMounted, reactive } from 'vue'

  import { Tabs, Tab, TabPanels, TabPanel } from 'vue3-tabs'
  export default {
    name: 'testTrePage',
    components: {
      Tabs,
      Tab,
      TabPanels,
      TabPanel
    },
    setup () {
      let stringVar = ref('Init value')
      const tabs = ['A', 'B', 'C']
      const selectedTab = ref(2)
      const state = reactive({
        selectedTab: tabs[1]
      })

      const testOnMounted = async () => {
        console.log('testOnMounted!!!::')
      }

      onMounted(testOnMounted)

      return {
        stringVar,
        tabs,
        selectedTab
        // ...toRefs(state)
      }
    } // setup() {

  }
</script>

selectedTab:{{selectedTab}}

stringVar:{{stringVar}}

制表符：{{tabs}
基本示例
{{tab}}
从“vue”导入{ref，onMounted，reactive}
从“vue3选项卡”导入{Tabs，Tab，TabPanels，TabPanel}
导出默认值{
名称：“testTrePage”，
组成部分：{
标签，
标签，
选项卡面板，
选项卡面板
},
设置（）{
设stringVar=ref（'Init value'）
const tabs=['A'，'B'，'C']
const selectedTab=ref（2）
常数状态=无功({
所选选项卡：选项卡[1]
})
const testOnMounted=async（）=>{
log（'testOnMounted！！！：'）
}
onMounted（testOnMounted）
返回{
斯特林瓦尔，
标签，
选定选项卡
//…托雷斯（州）
}
}//setup（）{
}

我得到了一个错误：

[Vue warn]: Component is missing template or render function. 
  at <Anonymous modelValue=2 onUpdate:modelValue=fn > 
  at <TestTrePage onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <App>
  

[Vue warn]：组件缺少模板或渲染功能。
在

怎么了

谢谢！
您需要导出
app
内
main.js
您的意思是：导出默认app.config.globalProperties app.config.globalProperties.toast=dktoos app.mount（'#app'）导出{app}？那不行…你能在main.js中给出导出格式吗？你需要导出
app
内
main.js
你的意思是：导出默认的app.config.globalProperties app.config.globalProperties.toast=dktoap.mount（'#app'）导出{app}？那不行……请您在main.js中给出导出格式好吗？