在很多项目中,有时候无法加入webpack等编译工具,要是想使用ElementUI就非常困难了。
不过还好浏览器加载标准requirejs可以解决这个问题。
1、关键点在于,requirejs的define函数已经定义的ElementUI组件的名称为 ELEMENT,所以引入的时候必须使用这个名称。
2、使用requirejs的时候,ElementUI组件是不会自动注册到Vue中的,必须使用 ELEMENT.install(Vue); 手动注册。
代码:
<!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>