fastadmin导入vue

前台 require-frontend.js或frontend-init.js

后台 require-backend.js或backend-init.js

后台

方法一

require-backend.js

在 paths 中加入’vue’:‘…/libs/vue/vue.min’,
在shim 中加入

paths: {
......
......

'vue':'../libs/vue/vue.min',
}
shim: {
......
......

        'vue': {
            exports: 'Vue'
        },
}

方法二：
在backend-init.js中加入

require.config({
    paths: {
        'vue': "../libs/vue/dist/vue.global"
    },
    // shim依赖配置
    shim: {
        'vue': {
            exports: 'Vue'
        }
    }
});

    define(['backend'], function (Backend) {
    
});

最后在 js 中加入

前面是小写 vue , 后面是大写 Vue

define(['jquery', 'bootstrap', 'backend', 'table', 'form','vue'], function ($, undefined, Backend, Table, Form,Vue) {

define(['jquery', 'bootstrap', 'backend', 'table', 'form','vue'], function ($, undefined, Backend, Table, Form,Vue) {

    console.log('vue:',Vue);
    var Controller = {
        index: function () {
            const { createApp,ref} = Vue
            const app = createApp({
                setup(){
                    const message = ref('你好谢谢')
                    return {
                        message
                    }
                }
            });
            app.mount('#app');
        }
    };
    return Controller;
});

前端

<div class="panel panel-default panel-intro">

    <div id="app">
        {{message}}
    </div>
</div>

原文地址：https://blog.csdn.net/qq_42580037/article/details/140442791

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！