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>