vue-cli3.0报错Uncaught TypeError: Cannot read property prototype of undefined

一时失言乱红尘 2023-02-14 15:48 3阅读 0赞

在vue项目里使用CDN方法引入使用elementui组件时报错

1）引入

![20200603165518301.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70][]

2）报错如下：

![20200603165504699.png][]

3）解决方法：

报错原因，引入js顺序问题，按如下所示引入即可。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1][]

参考以下格式所得， 通过CDN的方式，使用Element写出一个Hello world页面

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      
      <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </head>
    <body>
      <div id="app">
        <el-button @click="visible = true">Button</el-button>
        <el-dialog :visible.sync="visible" title="Hello world">
          <p>Try Element</p>
        </el-dialog>
      </div>
    </body>
      
      <script src="https://unpkg.com/vue/dist/vue.js"></script>
      
      <script src="https://unpkg.com/element-ui/lib/index.js"></script>
      <script>
        new Vue({
          el: '#app',
          data: function() {
            return { visible: false }
          }
        })
      </script>
    </html>

[20200603165518301.png]: https://img-blog.csdnimg.cn/20200603165518301.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200603170752329.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70
[20200603165504699.png]: https://img-blog.csdnimg.cn/20200603165504699.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200603170246686.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70