信息资讯综合思念体

【Vue】在requirejs中使用ElementUI

在很多项目中,有时候无法加入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>


发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

«   2019年9月   »
1
2345678
9101112131415
16171819202122
23242526272829
30
网站分类
搜索
最新留言
文章归档
网站收藏
友情链接
  • RainbowSoft Studio Z-Blog
  • 订阅本站的 RSS 2.0 新闻聚合

Powered By Z-BlogPHP 1.5.1 Zero Theme By 爱墙纸

百度资讯综合思念体对有机生命接触用人形终端界面 那就是
晋ICP备15000230号