问题背景，因为近期要做一个门户网站，但是自己只有一点的vue基础和uniapp、uview框架的项目经验，就想到了使用vue+elementUI框架开发，当我去官网了解时遇到了问题，点击组件在线运行时会报错，它使用的是codepen前端在线编辑器

CodePen 是一个完全免费的前端代码托管服务。与 GitHub Pages 相比，它最重要的优势有：

1. 即时预览。你甚至可以本地修改并即时预览别人的作品。
2. 支持多种主流预处理器。你从不需要手写生产级别的代码，无论是 Jade 、 LESS 、 Sass ，还是 CoffeeScript 、 es6+（ Babel ），都能尽情使用。
3. 快速添加外部资源文件。只需在输入框里输入库名， CodePen 就会从 cdnjs 上寻找匹配的 css 或 js 库。
4. 免费用户支持创建三个模板，不是每个作品都需要从白板开始。
5. 优秀的外嵌体验，且支持 oEmbed 。在 WordPress 或 Reddit 等支持oEmbed的平台上，只要简单地把链接贴入编辑框，发布后会自动转为嵌入作品。

以上引用于CodePen简介_weixin_34258838的博客-CSDN博客CodePen就是用来制作测试页面的网站。是优秀前端demo的展示。我们进入其首页就可以看到很多精湛的前端demo效果。CodePen的意义在何处？他人奇思妙想的效果，提供了交互灵感源泉他人精湛效果实现，为自己的学习提供参考支持流行技术，如SASS, 我们可以无需自建平台，利用CodePen进行快速学习想他人请教问题，利用CodePen制作问题demo，有助于问题快速解决培养乐于分...https://blog.csdn.net/weixin_34258838/article/details/91443781当我使用elementUI在线编译时遇到Uncaught ReferenceError: Vue is not defined。

 

 这里问题的原因是没有引用vue，所以，我们可以点击右上角的设置按钮

打开vue官网，找到引入vue的地址复制粘贴到上图的位置

https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js

 同理，还需要引入elementUI的样式和组件库

<!-- 引入样式 --> 
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 --> 
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

 

 然后保存退出即可，效果如下：

 总结：因为不会使用codepen工具，菜就是原罪，建议先到B站学习一下codepen入门