在很多项目中，有时候无法加入webpack等编译工具，要是想使用ElementUI就非常困难了。
不过还好浏览器加载标准requirejs可以解决这个问题。
1、关键点在于，requirejs的define函数已经定义的ElementUI组件的名称为 ELEMENT，所以引入的时候必须使用这个名称。
2、使用requirejs的时候，ElementUI组件是不会自动注册到Vue中的，必须使用 ELEMENT.install(Vue); 手动注册。
代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用requirejs加载ElementUI</title>
<script src="/js/require.js"></script>
</head>
<body>
<div id="v-app">
<div>
<el-date-picker
v-model="value1"
type="datetimerange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['12:00:00']" value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</div>
</div>
<script>
require.config({
map: { //map告诉RequireJS在任何模块之前，都先载入这个css模块
'*': {
css: '/js/require-css.js'
}
},
paths: {
'vue': 'https://unpkg.com/vue/dist/vue',
'ELEMENT': '/js/elementui/index'
},
shim: {
'ELEMENT': {
deps: ['vue', 'css!/js/elementui/theme-chalk/index.css']
}
}
});
</script>
<script>
require(['vue', 'ELEMENT'], function (Vue, ELEMENT) {
ELEMENT.install(Vue);
window.vm = new Vue({
el: '#v-app',
delimiters: ['${', '}'],
data: function () {
return {
value1: []
}
},
});
});
</script>
</body>
</html>
|