FastAdmin用require引入vue3到项目

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 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值