requirejs加载vue

最新推荐文章于 2020-12-30 14:25:58 发布

wx_lidysun

最新推荐文章于 2020-12-30 14:25:58 发布

阅读量1w

点赞数

分类专栏：框架插件文章标签： vue require-js

本文链接：https://blog.csdn.net/lidysun/article/details/69943004

版权

框架插件专栏收录该内容

14 篇文章 0 订阅

订阅专栏

代码下载地址
demo
原先，我也以为requirejs 加载Vue需要在config里写shim配置：

//config.js
requirejs.config({
    baseUrl:'./',
    paths:{
        jquery:'jquery.min',
        vue:'vue',
    },
    shim:{
        vue:{exports:'Vue'} //注意这行
    }
})
require(['indexController']);

后来，经过测试，根本不需要（也就是说Vue本身支持AMD规范的requirejs加载，就想大家熟悉的jquery 一样）。

//config.js
requirejs.config({
    baseUrl:'./',
    paths:{
        jquery:'jquery.min',
        vue:'vue',
    },
    shim:{
        /*vue:{exports:'Vue'} //这行可以注释掉*/ 
    }
})

require(['indexController']);

用法

//indexController
define(['vue'],function(Vue){
    return { //坑
        template: new Vue({
            el:'.box',
            data:{
                name:'孙刚',
            }
        })
    }
})

—-》这里曾经有个坑，return 返回一个对象，就得遵循对象的写法（键：值），如下图报错：

这里写图片描述

—-》要么，就不要rerurn ,直接写方法

这里写图片描述

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>require vue</title>
    <script src="require.min.js" data-main="config.js"></script>
    <style>
        [v-cloak] { display:none}; /*v-cloak解决vue解析闪烁问题*/
    </style>
</head>
<body>
    <div class="box" v-cloak>
        姓名：{{name}}
    </div>
</body>
</html>