//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) { })引入模塊了
