element例子在线运行(前往 codepen.io 运行此示例)报错:Uncaught ReferenceError: Vue is not defined

797 阅读1分钟

前言:在使用 Element的时候会到官网看相关的例子,有时候需要在线运行的时候,跳转codepen.io 运行此示例,运行报错。

  1. 如:查看 Dialog 对话框中基本用法的例子:

image.png

  1. 打开后如下图(发现没有效果,这时候会看到代码右下角有个红色叹号,打开就会看到报错):

image.png

3.点击叹号,可以看到报错:Uncaught ReferenceError: Vue is not defined

image.png 报错很明显,就是没有找到vue,看到HTML中是有引入vue.js的,但是还是提示报错,说明路径有问题

4.为了验证是vue路径问题,重新点击“跳转codepen.io 运行此示例”,进入页面F12审查元素在network中可以看到vue.js加载404,所以确定是vue.js路径问题。

image.png

5.更改vue.js路径,引入 Vue(vue.js官方介绍:cn.vuejs.org/v2/guide/):

image.png 此时vue.js已经成功加载,红色叹号已经没有了,示例正常启动。 6.再看运行结果:

image.png 已经可以正常运行了,点击效果如图:

image.png 总结: element例子在线运行(前往 codepen.io 运行此示例)报错:Uncaught ReferenceError: Vue is not defined,主要解决办法是修改vue.js的引入路径:

当然还有其他的路径或者方法,我这里只简单使用,欢迎大家推荐更多其他的方法,如有不正确的地方欢迎指正。