前台 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>
