1、先下载vue3(https://unpkg.com/vue@3.4.21/dist/vue.global.js)
2、存在路径里。。。。。\public\assets\libs\vue3\vue.global.js
3、修改\public\assets\js\backend-init.js
require.config({
paths:{
'vue':'../libs/vue3/vue.global'
},
shim:{
'vue':{
exports: 'Vue'//注意这里一定要大写第一个字母
}
}
});
4、在前端\application\admin\view\test\index.html中添加vue
<div id="app">
{{message}}
</div>
5、在\public\assets\js\backend\test.js添加代码
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')
效果如下:
6、修改核心js或css就需要重新打包,否则生产环境是没有修改的,有可能引用不到vue3