//main.js
requirejs.config({
baseUrl: 'lib/js',//参照于引入这个js文件的index.html页面的相对路径,因为此时mian.js文件已经导入到了index.html中
paths: {
'jquery': 'jquery-1.8.3.min',//lib/js目录下的文件名,都是js可省略后缀.js
'vue' : 'vue',
'Slide' : 'TouchSlide.1.1'
}
});
//index.html
首先require.js与main.js文件的script标签引入，要放在body前面，在head标签中引用即可
第一种:用函数封装法
<head>
<script data-main="lib/main.js" src="lib/require.js"></script>
</head>
<body>
<button onclick="cb_click()"></button>
</body>
<script>
function cb_click() {
require(['jquery', 'vue'], function ($, Vue) {
$('body').css('background', 'blue');
var add = {
template: "<div>这就是一个用例</div>"
}
new Vue({
el: '#app',
data: function () {
return {
seller: {
type: Object
}
}
},
template: "<v-add></v-add>",
components: {
'v-add': add
}
})
})
}
</script>
第二种与第三种：不是函数封装，直接require(['jquery', 'vue'], function ($, Vue) { })会造成同步加载不出，异步加载失败
第二种: 把require(['jquery', 'vue'], function ($, Vue) { })放到main.js文件中，
放到requirejs.config({ })方法的后面
第三种：直接把<script data-main="lib/main.js" src="lib/require.js"></script>
拆分成 <script src="lib/require.js"></script> 与
<script src="lib/main.js"></script>
然后就可以在index.html页面直接在其后面用require(['jquery', 'vue'], function ($, Vue) { })引入模块了