导入顺风自定义组件

时间:2021-03-10 14:49:20

标签: vue.js vuejs3 tailwind-css tailwind-in-js

我有这个代码:

/plugins/t-alert.js :

    import Vue from 'vue'
    import VueTailwind from 'vue-tailwind'
    import TAlert from 'vue-tailwind/dist/t-alert'

    const settings = {
    't-alert': {
        component: TAlert,
        props: {
            fixedClasses: {
                wrapper: 'rounded p-4 flex text-sm border-l-4',
                body: 'flex-grow',
                close: 'ml-4 rounded',
                closeIcon: 'h-5 w-5 fill-current'
            },
            classes: {
                wrapper: 'bg-blue-100 border-blue-500',
                body: 'text-blue-700',
                close: 'text-blue-700 hover:text-blue-500 hover:bg-blue-200',
                closeIcon: 'h-5 w-5 fill-current'
            },
            variants: {
                danger: {
                    wrapper: 'bg-red-100 border-red-500',
                    body: 'text-red-700',
                    close: 'text-red-700 hover:text-red-500 hover:bg-red-200'
                },
            }
        }
      },
     }
     Vue.use(VueTailwind, settings)

在文件中:/plugins.index.js

export * from './t-alert';

在文件 main.ts 中:

    import { createApp } from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    import "tailwindcss/tailwind.css"
    import './plugins';

    createApp(App).use(store).use(router).mount('#app')

运行已成功完成,但我在浏览器中出现错误:Uncaught TypeError: Vue__default.default.extend is not a function。你对这个问题有什么想法吗?提前感谢并为我的英语感到抱歉。

0 个答案:

没有答案